jquery轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <style type="text/css" rel="stylesheet">
        *{margin: 0;padding: 0;}
        li{list-style-type: none;}
        .carousel-wrap{
            position: relative;overflow: hidden;height: 120px;
            width: 1005px;
            margin: 100px auto;
        }
        .carousel{width: 99999px;z-index: 9;position: absolute;left: 0;top: 0;}
        .carousel li {float: left;}
        .carousel img{width: 1005px;height: 120px}
        .arrow{z-index: 10;position: absolute;width: 30px;height: 50px;text-align: center;line-height: 50px;
            top: 50%;margin-top: -25px;text-decoration: none;color: #333;
            font-family: '宋体';font-size: 30px;background: rgba(0,0,0,.2);font-weight: 600;
        }
        .arrow-left{left: 0;}
        .arrow-right{right: 0}
        .indicators{z-index: 10;position: absolute;right: 10px;bottom: 10px;}
        .indicator{float: left;margin-right: 10px;width: 8px;height: 8px;border-radius: 50%; background: #ccc;}
        .indicator.active{background: #333;}
    </style>
</head>
<body>
<div class="carousel-wrap">
    <ul class="carousel">
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/3.png" alt=""></li>
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.png" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
    </ul>
    <a class="arrow arrow-left" href="">&lt;</a>
    <a class="arrow arrow-right" href="">&gt;</a>
    <ul class="indicators">
        <li class="indicator active"></li>
        <li class="indicator"></li>
        <li class="indicator"></li>
        <li class="indicator"></li>
        <li class="indicator"></li>
        <li class="indicator"></li>
    </ul>
</div>
<script>
    var carousel = $('ul.carousel'),
        arrowLeft = $('a.arrow-left'),
        arrowRight = $('a.arrow-right'),
        indicators = $('li.indicator'),
        carouselWrap = $('div.carousel-wrap');

    var num = 7,carouselWidth=1005,count=1,timer=null;
    // $('.carousel li').css('width','100');
    //设置左右箭头的点击事件

    arrowLeft.click(function (e) {
        e.preventDefault()
        move(true)
    })
    arrowRight.click(function(e){
        e.preventDefault()
        move()
    })

    // 指示器
    indicators.click(function () {
        count = $(this).index();
        count++;
        setIndicatorStyle()
        carousel.finish().animate({left:-carouselWidth*(count-1)},500)
    })

    // 设置指示器样式
    function setIndicatorStyle(){
        if(count === 0){
            indicators.eq(count).addClass('active').siblings().removeClass('active')
        }else {
            indicators.eq(count-1).addClass('active').siblings().removeClass('active')
        }

    }

    interval()
    // 鼠标移入  暂停 自动轮播
    carouselWrap
        .mouseover(function () {
            clearInterval(timer)
        })
        .mouseout(interval)   // 鼠标移开 记录轮播

    // 动画 主函数
    function move(flag) {
        if(!flag){
            l = -carouselWidth*count
            count++;
            if(count===num){
                carousel.animate({
                    left: l
                }, 500, function(){
                    count = 0
                    setIndicatorStyle()
                    $(this).css('left', -carouselWidth*count)
                    count++;
                })
            }else {
                setIndicatorStyle()
                carousel.animate({
                    left: l
                }, 500)
            }
        }else{

            count--;
            l = -carouselWidth*(count-1);
            console.log(count)
            if(count === 0){
                carousel.finish().animate({
                    left: l
                }, 500, function(){
                    count = num - 1
                    setIndicatorStyle()
                    $(this).css('left', -carouselWidth*(count-1))
                })
            }else{
                setIndicatorStyle()
                carousel.finish().animate({
                    left: l
                }, 500)
            }
        }
    }

    // 自动轮播
    function interval() {
        timer = setInterval(move, 2000)
    }
</script>
</body>
</html>
猜你喜欢
