轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

恩洛

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量149

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            overflow: hidden;
        }
        /*图片定位*/
        .box img{
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
        }
        .focusList{
            position: absolute;
            left: 50%;
            width: 300px;
            margin-left:-150px ;
            height: 10px;
            z-index: 2;
        }
        .focusList span{
            float: left;
            width: 80px;
            height: 10px;
            margin-right: 30px;
            background-color:rgba(0,0,0,.5);
        }
        .focusList span.cur{
            background-color: #ff4a00;
        }
        .focusList span:last-child{
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
           <img src="./images/index_slide_1.png" alt="" style="z-index: 1">
           <img src="./images/index_slide_2.png" alt="">
           <img src="./images/index_slide_3.png" alt="">
        </div>
        <div class="focusList">
            <span class="cur"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
            //动态计算box的高度，设置focusList的bottom
            $(window).resize(function () {
                change();
            });
            function change() {
                var h = $('img').css('height');
                $('.box').css('height',h);
                $('.focusList').css('bottom','10%');
            }
            change();
            //自动切换
            var step = 0;
            var timer = null;
            function autoPlay() {
                timer = setInterval(function () {
                    step++;
                    if(step===3){
                        step = 0;
                    }
                    $('img').eq(step).hide().css('left',0).fadeIn().siblings().fadeOut();
                    $('.focusList span').eq(step).addClass('cur').siblings().removeClass('cur');
                },2000);
            }
            autoPlay();
            //点击焦点切换
            $('.focusList span').click(function () {
                clearInterval(timer);
                //当前播放到第几张 step
                var temp = $(this).index();//获取当前点击的span的索引
                if(temp<step){
                    $('img').css('z-index',0);
                    $('img').eq(step).css('z-index',1).animate({left:'100%'},500);
                    $('img').eq(temp).show().css({left:'-100%',zIndex:1}).animate({left:0},500);
                    step = temp;
                }else if(temp>step){
                    $('img').css('z-index',0);
                    $('img').eq(step).css('z-index',1).animate({left:'-100%'},500);
                    $('img').eq(temp).show().css({left:'100%',zIndex:1}).animate({left:0},500);
                    step = temp;
                }
                $('.focusList span').eq(temp).addClass('cur').siblings().removeClass('cur');
            });

            $('img').mouseover(function () {
                clearInterval(timer);
            }).mouseout(function () {
                autoPlay();
            });
    </script>
</body>
</html>