运用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 相关文章推荐
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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
PHP 第二节 数据类型之数组
2012/04/28 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python删除n行后的其他行方法
2019/01/28 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
分析经典Python开发工程师面试题
2019/04/08 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
营销总监岗位职责范本
2014/02/26 职场文书
聚美优品励志广告词
2014/03/14 职场文书
普通话演讲稿
2014/09/03 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
项目投资意向书范本
2015/05/09 职场文书
董事长助理工作总结2015
2015/07/23 职场文书