这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 JS 实现图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
之前页面需要图片轮播的时候,都是直接在网上找一个插件,然后自己动手改一下,把图片的路径改成自己图片的路径,然后万事大吉。后来觉得这样并不能提高自己的前端水平,于是乎,自己动手写了一个图片轮播的小 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>
来源: http://www.phperz.com/article/17/0517/329163.html