基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码。这是一款基于jQuery实现的左右滑动切换焦点图代码。效果图如下:
实现的代码:
<div class="v_out v_out_p"> <div class="prev"> <a href="javascript:void(0)"></a> </div> <div class="v_show"> <div class="v_cont"> <ul> <li index="0" style="background: #f00">[第1讲]</li> <li index="1" style="background: #ff0">[第2讲]</li> <li index="2" style="background: #f0f">[第3讲]</li> <li index="3" style="background: #999">[第4讲]</li> <li index="4" style="background: #666">[第5讲]</li> </ul> </div> </div> <div class="next"> <a href="javascript:void(0)"></a> </div> <ul class="circle"> <li class="circle-cur">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script type="text/javascript"> $(function () { /*======next======*/ $(".next a").click(function () { nextscroll() }); function nextscroll() { var vcon = $(".v_cont "); var offset = ($(".v_cont li").width()) * -1; vcon.stop().animate({ left: offset }, "slow", function () { var firstItem = $(".v_cont ul li").first(); vcon.find("ul").append(firstItem); $(this).css("left", "0px"); circle() }); }; function circle() { var currentItem = $(".v_cont ul li").first(); var currentIndex = currentItem.attr("index"); $(".circle li").removeClass("circle-cur"); $(".circle li").eq(currentIndex).addClass("circle-cur"); } //setInterval(nextscroll,2000) /*======prev======*/ $(".prev a").click(function () { var vcon = $(".v_cont "); var offset = ($(".v_cont li").width() * -1); var lastItem = $(".v_cont ul li").last(); vcon.find("ul").prepend(lastItem); vcon.css("left", offset); vcon.animate({ left: "0px" }, "slow", function () { circle() }) }); /*======btn====circle======*/ var animateEnd = 1; $(".circle li").click(function () { if (animateEnd == 0) { return; } $(this).addClass("circle-cur").siblings().removeClass("circle-cur"); var nextindex = $(this).index(); var currentindex = $(".v_cont li").first().attr("index"); var curr = $(".v_cont li").first().clone(); if (nextindex > currentindex) { for (var i = 0; i < nextindex - currentindex; i++) { var firstItem = $(".v_cont li").first(); $(".v_cont ul").append(firstItem); } $(".v_cont ul").prepend(curr); var offset = ($(".v_cont li").width()) * -1; if (animateEnd == 1) { animateEnd = 0; $(".v_cont").stop().animate({ left: offset }, "slow", function () { $(".v_cont ul li").first().remove(); $(".v_cont").css("left", "0px"); animateEnd = 1; }); } } else { var curt = $(".v_cont li").last().clone(); for (var i = 0; i < currentindex - nextindex; i++) { var lastItem = $(".v_cont li").last(); $(".v_cont ul").prepend(lastItem); } $(".v_cont ul").append(curt); var offset = ($(".v_cont li").width()) * -1; $(".v_cont").css("left", offset); if (animateEnd == 1) { animateEnd = 0; $(".v_cont").stop().animate({ left: "0px" }, "slow", function () { $(".v_cont ul li").last().remove(); animateEnd = 1; }); } } }); }) </script>
css代码:
* { margin: 0px; padding: 0px; list-style-type: none; } .v_out { width: 748px; margin: 20px auto; overflow: hidden; } .v_show { width: 665px; overflow: hidden; position: relative; height: 280px; float: left; } .v_cont { width: 6650px; position: absolute; left: 0px; top: 0px; } .v_cont ul { float: left; text-align: center; line-height: 50px; } .v_cont ul li { width: 665px; height: 250px; background: #f8f8f8; float: left; margin-top: 3px; } /*---圆圈---*/ .v_out_p { position: relative; overflow: visible; } .circle { position: absolute; left: 40px; top: 290px; } .circle li { width: 120px; height: 60px; float: left; margin-right: 10px; background: #ccc; } .circle .circle-cur { background: #f00; } /*---切换---*/ .prev, .next { float: left; padding: 105px 9px 0; } .prev a { background: #f00; } .prev .ico_1 { background: url(input_a.gif) no-repeat 0 -3757px; } .next a { background: #f00; } .next .ico_2 { background: url(input_a.gif) no-repeat right -3757px; } .prev, .prev a, .next, .next a { width: 21px; height: 28px; display: block; }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。