你的位置:首页 > Java教程

[Java教程]jquery实现带左右箭头和数字焦点的图片轮播手写代码


以前图片轮播经常用网上的插件,然后想说自己也要认真看看,一步一步弄明白,所以就自己研究写了个图片轮播的代码,我自己觉得还算是挺简单的。如有改进的地方,欢迎你能帮我指出,共同进步。

(ps:博客园如何上传代码就是可以供大家下载那种,一直没找到地方!)

html:

<html>
<body><div class="main"> <div class="myslide"> <ul class="myslidetwo"> <li><img src="img/dn.jpg"/></li> <li> <img src="img/ey.jpg"/></li> <li><img src="img/fxh.jpg"/></li> <li><img src="img/ss.jpg"/></li> </ul> <p class="arrows"> <a class="pre"><</a> <a class="next">></a> </p> <ol class="label"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> </div></div></body>
</html>

css:

  <style>    body {      background-color: #dddddd;    }    * {      margin: 0px; padding: 0px;list-style: none;    }    a{      cursor: pointer;    }    .main {      position: relative;      width: 500px; height: 350px;margin:40px auto;    }    .myslide {      float: left; position: absolute; overflow: hidden;      width: 500px; height: 350px;    }    .myslidetwo {      position: absolute;      overflow: hidden;      width: 2000px;    }    .myslidetwo img {      float: left; width: 500px; height: 350px;    }    .label{      position: absolute;      bottom: 15px;      left: 210px;      width: 200px;    }    .label li {      float: left;      width:20px;height:20px;line-height:20px;text-align: center;      margin-right: 5px;      border:1px solid #ddd;      font-size: 14px;      background: #fff;      cursor: pointer;    }    .label li.current {      background: #0f0;    }    .arrows{      position: absolute;      left:0px; top:120px;      color:#666; font-size: 40px;font-weight: bold;    }    .arrows a{      background: rgba(0,0,0,0.2);      display: inline-block;width:30px;height: 70px;text-align: center;line-height: 70px;    }    .arrows a:hover{      color:#fff;    }    .arrows .pre{      margin-right: 420px;    }  </style>

jquey:

<script>  $(document).ready(function () {    var _now=0;    var oul = $(".myslidetwo");    var numl = $(".label li");    var wid = $(".myslide").eq(0).width();    //数字图标实现    numl.click(function () {      var index = $(this).index();      $(this).addClass("current").siblings().removeClass();      oul.animate({'left': -wid * index}, 500);    })    //左右箭头轮播    $(".pre").click(function () {      if (_now>=1) _now--;      else _now=3;      ani();    });    $(".next").click(function () {      if (_now == numl.size() - 1) {        _now = 0;      }      else _now++;      ani();    });    //动画函数    function ani(){      numl.eq(_now).addClass("current").siblings().removeClass();      oul.animate({'left': -wid * _now}, 500);    }    //以下代码如果不需要自动轮播可删除    //自动动画    var _interval=setInterval(showTime,2000);    function showTime() {      if (_now == numl.size() - 1) {        _now = 0;      }      else _now++;      ani();    }    //鼠标停留在画面时停止自动动画,离开恢复    $(".myslide").mouseover(function(){      clearTimeout(_interval);    });    $(".myslide").mouseout(function(){      _interval=setInterval(showTime,2000);    });  });</script>