cari

Rumah >hujung hadapan web >tutorial js >Gunakan prinsip pemasa jQuery untuk merealisasikan penukaran imej sepanduk

Gunakan prinsip pemasa jQuery untuk merealisasikan penukaran imej sepanduk

PHPz
PHPzasal
2016-05-16 16:33:101437semak imbas

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>

效果如下图：

Gunakan prinsip pemasa jQuery untuk merealisasikan penukaran imej sepanduk

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang kemahiran penyahpepijatan js Console command_javascriptArtikel seterusnya：Penjelasan terperinci tentang kemahiran penyahpepijatan js Console command_javascript

Artikel berkaitan

Lihat lagi