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

2019-11-20 14:00:05

字体：大中小

来源：转载

供稿：网友

主要运用了定时器的原理，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>

效果如下图：