jquery实现轮播图效果

157 阅读 0 评论 104 点赞

我是靠谱客的博主结实溪流，最近开发中收集的这篇文章主要介绍jquery实现轮播图效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果如下：

代码如下：

<!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>

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