jquery實現(xiàn)輪播圖效果

更新時間：2017年02月13日 12:01:14 作者：nick906

本文介紹了jquery實現(xiàn)輪播圖效果示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧

效果如下：

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>slider</title>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 #slideshow{
 position: relative;
 width: 512px;
 height: 384px;
 margin: 0 auto;
 overflow: hidden;
 }
 #slideshow>ul,#slideshow>ul>li,#slideshow-nav{
 position: absolute;
 }
 #slideshow>ul>li{
 list-style: none;
 }
 #slideshow-nav{
 bottom: 20px;
 width: 100%;
 text-align: center;
 }
 #slideshow-nav>span{
 display: inline-block;
 width: 15px;
 height: 15px;
 margin: 0 7px;
 font-size: 0;
 background-color: rgba(255,255,255,.3);
 border-radius: 50%;
 user-select: none;
 -webkit-user-select: none;
 transition: all .5s;
 -webkit-transition: all .5s;
 cursor: pointer;
 }
 #slideshow-nav>span.active{
 background-color: #fff;
 }
 </style>
</head>
<body>
 <div id="slideshow">
 <ul>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg" alt="gakki is mine"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236ugj2glgcl6g66gg4.jpg" alt="gakki is mine"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236c26bx5bbfp6kazzm.jpg" alt="gakki is mine"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236oqd8i8q158ojr0i7.jpg" alt="gakki is mine"></li>
 <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236o1iud19lkz11wqja.jpg" alt="gakki is mine"></li>
 </ul>
 <div id="slideshow-nav"></div>
 </div>
 <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <script type="text/javascript">
 $(function(){
 var timer = null,
 curindex = 0,
 duration = 2000,
 speed = 500;
 var $imgWrap = $('#slideshow>ul');
 var totalIndex = $imgWrap.find('li').length;
 var width = $('#slideshow').width();
 //insert navigate span, let img in order
 $('#slideshow').find('ul>li').each(function(index){
 $(this).css('left', width*index + 'px');
 $('#slideshow-nav').append('<span>' + (index+1) + '</span>');
 })
 //
 $('#slideshow-nav>span').eq(0).addClass('active');
 //auto slide
 var move = function(){
 curindex += 1;
 if (curindex===totalIndex) {
 curindex = 0;
 }
 // current span add classname "active"
 $('#slideshow-nav>span').each(function(index) {
 $(this).removeClass('active')
 }).eq(curindex).addClass('active');
 //auto slide
 $imgWrap.animate({
 'left': width*curindex*(-1)+'px',
 }, speed)
 //一開始沒加"timer = ",這個bug耽誤了不少時間
 timer = setTimeout(move,duration+speed);
 };
 //init
 timer = setTimeout(move,duration);
 //click event
 $('#slideshow-nav>span').on('click', function(event) {
 event.preventDefault();
 /* Act on the event */
 clearTimeout(timer);
 $imgWrap.stop(true, true);
 curindex = $(this).index() - 1;
 move();
 });
 })
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: