原生JS实现图片轮播效果
之前页面需要图片轮播的时候,都是直接在网上找一个插件,然后自己动手改一下,把图片的路径改成自己图片的路径,然后万事大吉。后来觉得这样并不能提高自己的前端水平,于是乎,自己动手写了一个图片轮播的小demo,用的是jquery,小弟前端小白一个,各位前端大神看了之后,望批评指正。
我的思路是这样的,定义两个变量,一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小,如果$index大于$exdex,说明是朝左翻页,反之,就是朝右翻页。如果是朝左翻页,就把当前页朝左偏移100%的宽度,让下一页同样朝左偏移100%宽度。以下是代码部分:
<html> <headlang="en"> <metacharset="UTF-8"> <title></title> <style> .banner{ width:300px; height:250px; position:relative; z-index:100; background:skyblue; margin:100pxauto; overflow:hidden; } .banner.first{ left:0; } .bannera{ width:100%; height:100%; position:absolute; display:block; top:0; left:100%; } .banneraimg{ 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; } .choosespan{ 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> <divclass="banner"> <spanclass="pre"><=</span> <spanclass="next">=></span> <ahref="#"class="first"><imgsrc="./1.jpg"alt=""/></a> <ahref="#"><imgsrc="./2.jpg"alt=""/></a> <ahref="#"><imgsrc="./3.jpg"alt=""/></a> <ahref="#"><imgsrc="./4.jpg"alt=""/></a> <divclass="choose"> <spanclass="red"></span> <span></span> <span></span> <span></span> </div> </div> </body> <scriptsrc="./jquery.min.js"></script> <script> var$index=0; var$exdex=0; $('.choosespan').mouseover(function(){ $index=$(this).index(); $('.choosespan').eq($index).addClass("red").siblings().removeClass("red"); if($index>$exdex){ next(); }else{ pre(); } return$exdex=$index; }); functionnext(){ $('.bannera').eq($index).stop(true,true).css('left',"100%").animate({"left":0}); $('.bannera').eq($exdex).stop(true,true).css('left',"0").animate({"left":"-100%"}); } functionpre(){ $('.bannera').eq($index).stop(true,true).css('left',"-100%").animate({"left":"0"}); $('.bannera').eq($exdex).stop(true,true).css('left',"0").animate({"left":"100%"}); } </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。