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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍JQuery实现图片轮播效果，包括了JQuery实现图片轮播效果的使用技巧和注意事项，需要的朋友参考一下 【原理简述】 这里大概说一下整个流程： 1，将除了第一张以外的图片全部隐藏， 2，获取第一张图片的alt信息显示在信息栏，并添加点击事件 3，为4个按钮添加点击侦听，点击相应的按钮，用fadeOut，fadeIn方法显示图片 4，设置setInterval，定时执行切换函数 【代
-
本文向大家介绍jQuery实现大图轮播，包括了jQuery实现大图轮播的使用技巧和注意事项，需要的朋友参考一下 css样式： js代码规范： 主体代码： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍jQuery插件实现图片轮播特效，包括了jQuery插件实现图片轮播特效的使用技巧和注意事项，需要的朋友参考一下 好了废话不多说了，先看看效果图。 HTML部分： CSS部分： JS部分： 以上就是差不多所有的代码了，一些比较关键的地方已经用注释好了，这里就不再叙述。 源码下载：https://github.com/wwervin72/jQuery/tree/master/
-
本文向大家介绍jQuery实现简洁的轮播图效果实例，包括了jQuery实现简洁的轮播图效果实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现简洁的轮播图效果。分享给大家供大家参考，具体如下： HTML： css： js： 调用JQ： 效果图： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQu
-
本文向大家介绍jquery实现淡入淡出轮播图效果，包括了jquery实现淡入淡出轮播图效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现淡入淡出轮播图的具体代码，供大家参考，具体内容如下 如题所述，直接上代码 其实淡入淡出轮播图的核心思想就是获取到当前的索引，根据索引找出图片的索引然后更改索引达到一个图片显示 其他图片消失 然后轮流交替进行的。最主要的核心思想在上面
-
本文向大家介绍jQuery焦点图轮播效果实现方法，包括了jQuery焦点图轮播效果实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery焦点图轮播效果实现方法。分享给大家供大家参考，具体如下： 前面一篇《JS实现焦点图轮播效果的方法详解》详细介绍了JS实现焦点图轮播效果的步骤，这里来分析一下jQuery的相关实现技巧。 核心代码如下： 和js的区别：用.animate()方法