运用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 相关文章推荐
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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代码审核的详细介绍
2013/06/13 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
JS查看对象功能代码
2008/04/25 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
实例解析Array和String方法
2016/12/14 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
Python描述器descriptor详解
2015/02/03 Python
python中base64加密解密方法实例分析
2015/05/16 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
产品售后服务承诺书
2014/05/21 职场文书
新教师岗前培训方案
2014/06/05 职场文书
基层党员对照检查材料
2014/09/24 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技