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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。