之前页面需要图片轮播的时候，都是直接在网上找一个插件，然后自己动手改一下，把图片的路径改成自己图片的路径，然后万事大吉。后来觉得这样并不能提高自己的前端水平，于是乎，自己动手写了一个图片轮播的小demo，用的是jquery，小弟前端小白一个，各位前端大神看了之后，望批评指正。
我的思路是这样的，定义两个变量，一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小，如果$index大于$exdex,说明是朝左翻页，反之，就是朝右翻页。如果是朝左翻页，就把当前页朝左偏移100%的宽度，让下一页同样朝左偏移100%宽度。以下是代码部分：
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .banner{ width:300px; height:250px; position: relative; z-index: 100; background: skyblue; margin:100px auto; overflow:hidden ; } .banner .first{ left:0; } .banner a{ width: 100%; height: 100%; position: absolute; display:block; top:0; left:100%; } .banner a img{ width: 100%; height: 100%; } .banner .pre{ position: absolute; left:0; top:120px; background: gray; width:30px; height:30px; border-radius: 30px; line-height: 30px; text-align: center; opacity: 0.4; z-index: 1000; cursor: pointer; } .banner .next{ position: absolute; right:0; top:120px; background: gray; width:30px; height:30px; border-radius: 30px; line-height: 30px; text-align: center; opacity: 0.4; z-index: 1000; cursor: pointer; } .choose{ position: absolute; width:100px; height:20px; bottom:10px; left:90px; z-index: 1000; } .choose span{ display: block; float: left; margin-left:15px; width:10px; height:10px; border-radius: 10px; background: blue; cursor: pointer; } .choose .red{ background: red; } </style></head><body> <div class="banner"> <span class="pre"><=</span> <span class="next">=></span> <a href="#" class="first"><img src="./1.jpg" alt=""/></a> <a href="#"><img src="./2.jpg" alt=""/></a> <a href="#"><img src="./3.jpg" alt=""/></a> <a href="#"><img src="./4.jpg" alt=""/></a> <div class="choose"> <span class="red"></span> <span></span> <span></span> <span></span> </div> </div></body><script src="./jquery.min.js"></script><script> var $index = 0; var $exdex = 0; $('.choose span').mouseover(function(){ $index = $(this).index(); $('.choose span').eq($index).addClass("red").siblings().removeClass("red"); if($index > $exdex) { next(); } else { pre(); } return $exdex = $index; }); function next() { $('.banner a').eq($index).stop(true,true).css('left',"100%").animate({"left":0}); $('.banner a').eq($exdex).stop(true,true).css('left',"0").animate({"left":"-100%"}); } function pre() { $('.banner a').eq($index).stop(true,true).css('left',"-100%").animate({"left":"0"}); $('.banner a').eq($exdex).stop(true,true).css('left',"0").animate({"left":"100%"}); }</script></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
