jQuery实现一个简单的轮播图

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,center,ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .wrapper{
            margin: 0 auto;
            margin-top: 20px;
            overflow: hidden;
            position: relative;
        }
        .left,.right{
            position: absolute;
            top: 40%;
            cursor: pointer;
            z-index: 10;
        }
        .left{left: 30px;}
        .right{right: 30px;}
        .slider{
            height: 439px;
            position: relative;
            left: 0;
            transition: left 0.6s;
        }
        .slider li{
            display: inline-block;
            float: left;
        }
        .pagination-wrap{
            position: absolute;
            bottom: 20px;
            margin-left: 50%;
            transform: translate(-50%);
        }
        .pagination-wrap li{
            display: inline;
            background: #4cae4c;
            padding: 8px 14px;
            cursor: pointer;
            color: #fff;
            border-radius: 50%;
        }
        .pagination-wrap li:not(:first-child){
            margin-left: 10px;
        }
        .active{
            color: #4cae4c !important;
            background: #fff !important;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <img class="left" width="50" src="img/left.png"/>
        <img class="right" width="50" src="img/right.png"/>
        <ul class="slider">
            <li><img src="http://img.hb.aicdn.com/8f65b03b803ef937fd033f65af275586b5d9fd4e3fed0-8o26Ao_fw658"></li>
            <li><img src="http://img.hb.aicdn.com/fc6e5b5812bf40bbb495b410ecd6b0e06e0f489e2a28e-Svc5yN_fw658"></li>
            <li><img src="http://img.hb.aicdn.com/e71ad9cda05c5b06ffa5a140136345baf2694d2149add-1m5ZQe_fw658"></li>
            <li><img src="http://img.hb.aicdn.com/27b8b0b3a02929baabda11221516b808c3407f546e578-lgGmZu_fw658"></li>
        </ul>
        <ul class="pagination-wrap">
            <li class="active">1</li><li>2</li><li>3</li><li>4</li>
        </ul>
    </div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
    var imgWidth = $('.slider li img:eq(0)').width();
    var curIndex = 0;
    var imgLen = $(".slider li").length;
    $(".wrapper").width(imgWidth);
    $(".slider").width(imgWidth*imgLen);

    var autoChange = setInterval(function () {
        if(curIndex<imgLen-1){
            curIndex++;
        }else {
            curIndex = 0;
        }
        changeTo(curIndex);
    },2000);

    $(".left").hover(function(){
        clearInterval(autoChange);
    },function () {
        autoChangeAgain();
    })

    $(".left").click(function () {
        curIndex=(curIndex>0)?(--curIndex):(imgLen-1);
        changeTo(curIndex);
    });

    $(".right").hover(function(){
        clearInterval(autoChange);
    },function () {
        autoChangeAgain();
    })

    $(".right").click(function () {
        curIndex=(curIndex<imgLen-1)?(++curIndex):0;
        changeTo(curIndex);
    });

    function changeTo(num) {
        var goLeft = num*imgWidth;
        $(".slider").animate({left:'-'+goLeft+'px'},0);
        $(".pagination-wrap").find('li').removeClass('active').eq(num).addClass('active');
    }

    function autoChangeAgain() {
        autoChange = setInterval(function () {
            if(curIndex<imgLen-1){
                curIndex++;
            }else {
                curIndex = 0;
            }
            changeTo(curIndex);
        },2500);
    }

    $(".pagination-wrap").find('li').each(function (item) {
        $(this).hover(function () {
            clearInterval(autoChange);
            changeTo(item);
            curIndex = item;
        },function () {
            autoChangeAgain();
        })
    })
</script>
</body>
</html>

运行效果：

 麻雀虽小，五脏俱全

posted @ 2018-04-30 17:01  指间流逝的夏末  阅读(955)  评论(0)    收藏  举报