首页 > 代码库 > js实现轮播图
js实现轮播图
<!---图片放在ul中--->
<ul class="tup"> <li class="lis"><img src="img/wqe.jpg" class="zuimg"></li> <li class="lis"><img src="img/zxc.jpg" class="zuimg"></li> <li class="lis"><img src="img/qwe.jpg" class="zuimg"></li> </ul> <!-----这里放的是圆点-------> <div id="sdcontrolbtm"> <a class="controlitem actitem" href="#"></a> <a class="controlitem" href="#"></a> <a class="controlitem" href="#"></a> </div> <!----这里放的控制按钮-----> <div class="xstp-a"> <span class="xstp-a-s a-s-vs">></span> <span class="xstp-a-s a-s-v"><</span> </div>
/*这里放的是css代码*/
body,.tup,.lis{ margin:0; padding:0; list-style:none; /*取消li前面的圆点*/ } .lis{ width:100%; height:100%; position:absolute; opacity:0; /*设置透明度为0,也就是不显示*/ transition:1s; /*动画时间为1秒*/ } .lis:first-child{ opacity:1; }
<script> $(function(){ var li = $(".lis"); /*获取图片集合*/ var index = 0; $(".a-s-vs").click(function(){ index++; if(index == li.length){ index = 0; } for(var i=0; i< li.length; i++){ li[i].style.opacity = 0; } li[index].style.opacity = 1; $("#sdcontrolbtm a").eq(index).addClass(‘actitem‘).siblings().removeClass(‘actitem‘); }) $(".a-s-v").click(function(){ index--; if(index == -1){ index = li.length -1; } console.log(index); for(var i=0; i< li.length; i++){ li[i].style.opacity = 0; } li[index].style.opacity = 1; $("#sdcontrolbtm a").eq(index).addClass(‘actitem‘).siblings().removeClass(‘actitem‘); }) $(".controlitem").click(function(){ }) $("#sdcontrolbtm a").mousemove(function(){ var index = $(this).index(); for(var i=0; i< li.length; i++){ li[i].style.opacity = 0; } li[index].style.opacity = 1; $(this).addClass(‘actitem‘).siblings().removeClass(‘actitem‘); }) }) </script>
js实现轮播图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。