（图片素材取自于小米官网）
刚开始接触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实现简易轮播图的效果
原文地址：https://www.cnblogs.com/mycognos/p/9260675.html