运用jQuery定时器的原理实现banner图片切换


Posted in Javascript onOctober 22, 2014

主要运用了定时器的原理,bind,trigger应用等

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>banner切换实现</title>
<style type="text/css">
/*
* @description: banner切换样式
* @author: lanfeng(beryl)
* @time:2013-02-26
*/
/* reset*/
*{ margin: 0; padding: 0;}
body{font:12px/1.5 Tahoma,'\5B8B\4F53',arial,Tahoma,helvetica,sans-serif; color:#333333;background-color:#ffffff;position:relative; }
h1,h2,h3,h4,h5,h6{font-size:100%}
address,em{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none outside none;}
fieldset,img{border:0;}
img{vertical-align:middle}
table{border-collapse:collapse;border-spacing:0;font-size:inherit;*font-size:100%;}
input,button,textarea,select{vertical-align:middle;font:100% Helvetica,Arial,sans-serif; color:inherit}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}
.clear{font-size:0;line-height:0;height:0;clear:both;visibility:hidden;overflow:hidden;}

.d-ftab{ width:510px; height: 180px;position: relative; margin: 100px auto;}
.d-fShow ul li{ float: left; width: 510px; height: 180px;}
.d-fShow{ width: 510px; height: 180px; overflow: hidden;}
.d-fShow img{ width: 510px; height: 180px; float: left;}
.d-fs-control{ position: absolute; width:510px; position: absolute; left: 0; bottom: 0; height: 25px; line-height: 25px;

background: rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000',

EndColorStr='#66000000') ; }
:root .d-fs-control{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000'

,EndColorStr='#66000000')\9 ;}
.d-fs-control ul{ position: absolute; bottom:3px; right: 5px; height: 16px;}
.d-fs-control ul li{width:16px;height:16px; background:#777675;border-radius: 2px 2px 2px 2px; float:left;margin-left:5px;

color:#dcdcdc;text-align:center;font-weight:700;cursor:pointer;line-height:16px;filter: alpha(opacity=70); opacity: 0.7;}
.d-fs-control ul li:hover,.d-fs-control ul li.select{background:#ffffff;color:#ff6700;}

</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
var wrap =$('.d-ftab');
var imgs = wrap.find('.d-fShow ul >li');
var len=imgs.length ;
var tabTime=100;
var outTime=4000;
var select='select';
var num =0 ;
var interval;
var type = 'click';
var btns=wrap.find('.d-fs-control ul>li');
btns.bind(type,function(){
var _this=$(this);
_this.addClass('select').siblings ().removeClass('select');
num=_this.prevAll().length;
imgs.stop().eq(num).fadeTo(tabTime,1) ;
imgs.not(':eq('+num+')').filter(':visible').fadeOut(tabTime) ;
return false;
}).eq(num).trigger(type);
var interFunc=function(){
num=(num+1)%len;
btns.eq(num).triggerHandler(type);
}
wrap.bind('mouseover',function(){
clearInterval(interval);
}).bind('mouseout',function(){
interval=setInterval(interFunc,outTime)
})

})
</script>
</head>
<body>
<div class="d-ftab">
<div class="d-fShow">
<ul>
<li>
<a href="#"><img alt="" src=" images/1.jpg"/>
</a>
</li>
<li >
<a href="#"><img alt="" src="images/2.png">
</a>
</li>
<li>
<a href="#"><img alt="" src="images/3.jpg">
</a>
</li>
<li>
<a href=""><img alt="" src="images/4.jpg">
</a>
</li>
<li>
<a href="#"><img alt="" src="images/5.jpg">
</a>
</li>
</ul>
</div>
<div class="d-fs-control">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="select">5</li>
</ul>
</div>
</div>
</body>
</html>

效果如下图:
运用jQuery定时器的原理实现banner图片切换

Javascript 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
微信小程序实现左右列表联动
May 19 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 #Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 #Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 #Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 #Javascript
js实现select跳转功能代码
Oct 22 #Javascript
Javascript原型链和原型的一个误区
Oct 22 #Javascript
Javascript this 关键字 详解
Oct 22 #Javascript
You might like
ThinkPHP3.1查询语言详解
2014/06/19 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
在Django中创建第一个静态视图
2015/07/15 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python函数中不定长参数的写法
2019/02/13 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python add_argument()用法解析
2020/01/29 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
外语系毕业生自荐信范文
2013/12/16 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
教师演讲稿大全
2014/05/16 职场文书
六年级小学生评语
2014/12/26 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
借条如何写
2015/05/26 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js