js实现固定宽高滑动轮播图效果

时间：2021-05-26

话不多说，请看具体示例代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style> *{ margin:0; padding:0; } html, body { position: relative; height: 100%; } body { background: #eee; font-size: 14px; color:#000; margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } #banner1{ width:500px; } .banner{ width: 500px; height:100px; border:1px solid red; position: relative; margin:40px auto 0; overflow: hidden; } .banner ul{ width:9999px; position: absolute; top:0; left: 0; height: 100%; } .banner li{ width:500px; float: left; height: 100%; line-height: 100px; } .banner li a{ display: block; background:green; font-size:30px; text-align: center; } .cur{ height: 20px; position: absolute; right: 0; bottom:10px; text-align: center; } .cur a{ display: inline-block; width: 20px; height: 20px; background:yellow; margin-left:2px; } .cur a.active{ background:red; } .prve{ position: absolute; top:50%; left: 0; width:30px; height: 30px; background: red; line-height: 30px; text-align:center; color:#fff; margin-top:-15px; } .next{ position: absolute; top:50%; right: 0; width:30px; height: 30px; background: red; line-height: 30px; text-align:center; color:#fff; margin-top:-15px; } </style></head><body> <div class="banner" id="banner1"> <ul class="tab"> <li><a href="###">1</a></li> <li><a href="###">2</a></li> <li><a href="###">3</a></li> </ul> <div class="cur"></div> <div class="prve"><</div> <div class="next">></div> </div><script>$(function(){ cc("banner1",500); });function cc(id,w){ var i=0; var id=$("#"+id); var tab=id.children(".tab"); var tabLi=tab.find("li"); var clone=tabLi.first().clone(); tab.append(clone); var size=tab.find("li").size(); var cur=id.children(".cur"); var curA=cur.children("a"); var prve=id.children(".prve"); var next=id.children(".next"); for(var j=0;j<size-1;j++){ cur.append("<a href='###'></a>"); } cur.find("a").first().addClass("active"); cur.find("a").hover(function(){ var index=$(this).index(); i=index; tab.stop().animate({left:-index*w},500) $(this).addClass("active").siblings().removeClass("active") }); var t=setInterval(function(){ i++; move() },2000) id.hover(function(){ clearInterval(t); },function(){ t=setInterval(function(){ i++; move(); },2000) }); prve.click(function(){ i--; move(); }); next.click(function(){ i++; move(); }); function move(){ if(i==size){ tab.css({left:0}); i=1; }; if(i==-1){ tab.css({left:-(size-1)*w}); i=size-2; }; tab.stop().animate({left:-i*w},500); if(i==size-1){ cur.children("a").eq(0).addClass("active").siblings().removeClass("active") }else{ cur.children("a").eq(i).addClass("active").siblings().removeClass("active") }; };}</script> </body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章