jquery实现带左右箭头跟数字焦点的图片轮播手写代码

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>

jquery实现带左右箭头跟数字焦点的图片轮播手写代码

相关推荐