Posted in Javascript onDecember 26, 2016
之前页面需要图片轮播的时候,都是直接在网上找一个插件,然后自己动手改一下,把图片的路径改成自己图片的路径,然后万事大吉。后来觉得这样并不能提高自己的前端水平,于是乎,自己动手写了一个图片轮播的小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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
原生JS实现图片轮播效果
- Author -
Stephen_Numb声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@