jQuery无缝轮播图代码
更新时间:2016年12月22日 11:18:46 作者:solly793755670
这篇文章主要为大家详细介绍了jQuery无缝轮播图代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery无缝轮播图的具体代码,供大家参考,具体内容如下
html 代码
<div class="banner"> <ul class="img"> <li><a href="#"><img src="image/1.jpg"></a></li> <li><a href="#"><img src="image/2.jpg"></a></li> <li><a href="#"><img src="image/3.jpg"></a></li> <li><a href="#"><img src="image/4.jpg"></a></li> </ul> <ul class="num"> </ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div> </div>
jq代码
$(function(){ var i=0; var clone=$(".banner .img li").first().clone(); $(".banner .img").append(clone); var size = $(".banner .img li").size(); for(var j=0;j<size-1;j++){ $(".banner .num").append("<li></li>"); } $(".banner .num li").first().addClass('on'); //鼠标划入圆点 $(".banner .num li").hover(function(){ var index=$(this).index(); i=index; $(".banner .img").stop().animate({left:-index*1000},500); $(this).addClass('on').siblings().removeClass('on'); }) /*自动轮播*/ var t=setInterval(function(){ i++; move(); },2000); //对banner定时器的操作 $(".banner").hover(function(){ clearInterval(t); },function(){ t=setInterval(move,2000); }) /*向左按钮*/ $(".banner .btn_l").click(function(){ i++; move(); }) /*向右按钮*/ $(".banner .btn_r").click(function(){ i--; move(); }) function move(){ if(i==size){ $(".banner .img").css({left:0}); i=1; } if(i==-1){ $(".banner .img").css({left:-(size-1)*1000}); i=size-2; } $(".banner .img").stop().animate({left:-i*1000},500); if(i==size-1){ $(".banner .num li").eq(0).addClass('on').siblings().removeClass('on'); }else{ $(".banner .num li").eq(i).addClass('on').siblings().removeClass('on'); } } })
style 样式
<style> *{padding:0;margin:0;list-style: none;} .banner{ margin:100px auto; border:5px solid #000; width:1000px; height:640px; position: relative; overflow: hidden; } .banner .img{ width:5000px; position: absolute; left:0px; top:0px; } .banner .img li{ float:left; } .banner .num{ position:absolute; width:100%; bottom:20px; left:0px; text-align: center; font-size: 0px; } .banner .num li{ width:10px; height:10px; background: #888; border-radius: 50%; display: inline-block; margin:0 3px; cursor: pointer; } .banner .num li.on{ background: #f00; } .banner .btn{ width:30px; height:50px; background: rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-25px; cursor: pointer; text-align: center; line-height: 50px; color:#fff; font-size: 40px; font-family: "宋体"; display: none; } .banner:hover .btn{ display: block; } .banner .btn_l{ left:0px; } .banner .btn_r{ right:0px; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Tab页界面 用jQuery及Ajax技术实现(php后台)
到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式2011-10-10基于HTML+CSS+JS实现增加删除修改tab导航特效代码
这篇文章主要介绍了基于HTML+CSS+JS实现增加删除修改tab导航特效代码的相关资料,非常不错,需要的朋友可以参考下2016-08-08jquery控制select的text/value值为选中状态
这篇文章主要对jquery控制select的text/value值为选中状态做下总结,省的每次使用都要到网上翻下2014-06-06
最新评论