집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 타이머의 원리를 사용하여 배너 이미지 전환 실현

jQuery 타이머의 원리를 사용하여 배너 이미지 전환 실현

PHPz원래의: 2016-05-16 16:33:101463검색

banner图片切换效果，在一些企业网站上经常会碰到，本文运用jQuery定时器的原理实现banner图片切换，感兴趣的朋友可以学习下。

主要运用了定时器的原理，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,&#39;\5B8B\4F53&#39;,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:&#39;.&#39;;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=&#39;#66000000&#39;,
 
EndColorStr=&#39;#66000000&#39;) ; }
:root .d-fs-control{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=&#39;#66000000&#39;
 
,EndColorStr=&#39;#66000000&#39;)\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 =$(&#39;.d-ftab&#39;);
var imgs = wrap.find(&#39;.d-fShow ul >li&#39;);
var len=imgs.length ;
var tabTime=100;
var outTime=4000;
var select=&#39;select&#39;;
var num =0 ;
var interval;
var type = &#39;click&#39;;
var btns=wrap.find(&#39;.d-fs-control ul>li&#39;);
btns.bind(type,function(){
var _this=$(this);
_this.addClass(&#39;select&#39;).siblings ().removeClass(&#39;select&#39;);
num=_this.prevAll().length;
imgs.stop().eq(num).fadeTo(tabTime,1) ;
imgs.not(&#39;:eq(&#39;+num+&#39;)&#39;).filter(&#39;:visible&#39;).fadeOut(tabTime) ;
return false;
}).eq(num).trigger(type);
var interFunc=function(){
num=(num+1)%len;
btns.eq(num).triggerHandler(type);
}
wrap.bind(&#39;mouseover&#39;,function(){
clearInterval(interval);
}).bind(&#39;mouseout&#39;,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 타이머의 원리를 사용하여 배너 이미지 전환 실현

以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问jQuery视频教程！

성명：

이전 기사：js 디버깅 도구에 대한 자세한 설명 콘솔 command_javascript 기술다음 기사：js 디버깅 도구에 대한 자세한 설명 콘솔 command_javascript 기술

jQuery 타이머의 원리를 사용하여 배너 이미지 전환 실현

관련 기사