jQuery实现简易轮播图的效果
Posted mycognos
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现简易轮播图的效果相关的知识，希望对你有一定的参考价值。
（图片素材取自于小米官网）
刚开始接触jQuery的学习，个人觉得如果为了实现多数的动态效果，jQuery的确很简易方便。
下面简易的轮播图效果，还请前辈多多指教~
（努力学习react vue angular中，加油~~~）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,p,ul{margin:0px;padding:0px;} #box{width:1226px;height:460px;margin:0 auto;position:relative;} img{position:absolute;width:100%;display:none;} #cir{position:absolute;height:20px;width:150px;bottom:0;left:50%;transform:translateX(-50%);} span{height:20px;width:20px;border-radius:10px;background:blue;display:inline-block;box-sizing:border-box;} #left{height:69px;width:41px;position:absolute;top:50%;transform:translateY(-50%);background:url("img/icon-slides.png") no-repeat -83px 0px;} #right{height:69px;width:41px;position:absolute;right:0;top:50%;transform:translateY(-50%);background:url("img/icon-slides.png") no-repeat -125px 0px;} #left:hover{background:url("img/icon-slides.png") no-repeat 0px 0px;} #right:hover{background:url("img/icon-slides.png") no-repeat -42px 0px;} .span_on{background:red;border:1px solid yellow;} .img_on{display:block;} </style> <script src="jquery-1.11.3.js"></script> <script> $(function(){ var index=0; var timer=null; function play(){ index++; if(index>5){ index=0; } $("span").eq(index).prop("class","span_on").siblings().prop("class",""); $("img").eq(index).prop("class","img_on").siblings().prop("class",""); } timer=setInterval(play,1000); $("#box").mouseover(function(){ clearInterval(timer); }) $("#box").mouseout(function(){ timer=setInterval(play,1000); }) $("#left").click(function(){ index--; if(index<0){ index=5; } $("span").eq(index).prop("class","span_on").siblings().prop("class",""); $("img").eq(index).prop("class","img_on").siblings().prop("class",""); }) $("#right").click(function(){ play(); }) $("span").mouseover(function(){ $(this).prop("class","span_on").siblings().prop("class",""); index=$(this).index(); }) }) </script> </head> <body> <div> <div id="box"> <img class="img_on" src="img/11.jpg" alt=""> <img src="img/22.jpg" alt=""> <img src="img/33.jpg" alt=""> <img src="img/44.jpg" alt=""> <img src="img/55.jpg" alt=""> <img src="img/66.jpg" alt=""> <div id="cir"> <span class="span_on"></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div id="left"> </div> <div id="right"> </div> </div> </div> </body> </html>
以上是关于jQuery实现简易轮播图的效果的主要内容，如果未能解决你的问题，请参考以下文章