suchen

Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie das Prinzip des jQuery-Timers, um den Wechsel von Bannerbildern zu realisieren

Verwenden Sie das Prinzip des jQuery-Timers, um den Wechsel von Bannerbildern zu realisieren

PHPz
PHPzOriginal
2016-05-16 16:33:101395Durchsuche

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>

效果如下图：

Verwenden Sie das Prinzip des jQuery-Timers, um den Wechsel von Bannerbildern zu realisieren

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Fähigkeiten des JS-Debugging-Tools Console command_javascriptNächster Artikel：Detaillierte Erläuterung der Fähigkeiten des JS-Debugging-Tools Console command_javascript

In Verbindung stehende Artikel

Mehr sehen