运用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 相关文章推荐
js 处理URL实用技巧
Nov 23 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
Javascript闭包实例详解
Nov 29 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
Mac下安装vue
Apr 11 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
vue.js循环radio的实例
Nov 07 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 验证码制作(网树注释思想)
2009/07/20 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
django下创建多个app并设置urls方法
2020/08/02 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
如何唤起类中的一个方法
2013/11/29 面试题
中职生自荐信范文
2014/06/15 职场文书
村级四风对照检查材料
2014/08/24 职场文书
幼儿园辞职书
2015/02/26 职场文书
病危通知单
2015/04/17 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
Sql Server之数据类型详解
2022/02/28 SQL Server