首页 / JQUERY / jQuery无缝轮播图代码
jQuery无缝轮播图代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery无缝轮播图代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2421字,纯文字阅读大概需要4分钟。
内容图文
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的jQuery无缝轮播图代码全部内容,希望文章能够帮你解决jQuery无缝轮播图代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。