search

Home >Web Front-end >JS Tutorial >Use the principle of jQuery timer to realize banner image switching

Use the principle of jQuery timer to realize banner image switching

PHPz
PHPzOriginal
2016-05-16 16:33:101461browse

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>

效果如下图：

Use the principle of jQuery timer to realize banner image switching

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of js debugging tool Console command_javascript skillsNext article：Detailed explanation of js debugging tool Console command_javascript skills

Related articles

See more