實現輪播圖

時間 2019-11-12
標籤實現简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 500px;
            height: 500px;
            margin-top: 100px;
            margin-left: 290px;
            position: relative;

        }
        .img li{
            position: absolute;
            list-style: none;
            top:0;
            left: 0;
        }
        .num{
            position: absolute;
            bottom: 150px;
            left: 0;
            list-style: none;
            margin-left: 300px;

        }
        .num li{
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color:white;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            margin-left: 4px;
        }
        .btn{
            position: absolute;
            width: 30px;
            height: 60px;
            background-color: grey;
            color: white;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            opacity: 0.3;
            margin-top:150px;
            display: none;
        }
        .outer:hover .btn{
            display: block;
        }
        .left{
            left: 0;
        }
        .right{
            right: -290px;
        }
        .num .active{
            background-color: red;
        }

    </style>
</head>
<body>

<div class="outer">
    <ul class="img">
        <li><a href=""><img src="//img11.360buyimg.com/da/jfs/t4441/49/1784702367/91632/480f1bfc/58e60c72Nbe6e37f1.jpg"  title="jd1" ></a></li>
        <li><a href=""><img src="//img13.360buyimg.com/da/jfs/t4453/304/2090907070/122737/8821f7ec/58eb6de8Nd3a1b8fe.jpg" title="jd2" ></a></li>
        <li><a href=""><img src="//img1.360buyimg.com/da/jfs/t4915/42/882494763/136605/c0df87b5/58e9ec51Na0becbb9.jpg" title="jd3" ></a></li>
        <li><a href=""><img src="//img14.360buyimg.com/da/jfs/t4924/166/986079800/154274/6832fccd/58eb6e6eNa2cf5872.jpg"  title="jd4" ></a></li>
        <li><a href=""><img src="//img1.360buyimg.com/da/jfs/t4576/37/1783288975/114963/5b28403c/58e600aaNf0a41c82.jpg" title="jd5" ></a></li>
        <li><a href=""><img src="//img13.360buyimg.com/da/jfs/t4522/79/1905196885/120099/7f653940/58e768e9N021ccf82.jpg" title="jd6" ></a></li>
    </ul>
    <ul class="num">
        <!--<li class="active"></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
    </ul>
    <div class="left btn"><</div>
    <div class="right btn">></div>
</div>

<script src="jquery-3.2.0.js"></script>
<script>
    //經過jq自動建立按鈕標籤

    var num_img=$('.img li').length;
    for (i=0;i<num_img;i++){
        $('.num').append('<li></li>')
    }
    $('.num li').eq(0).addClass('active');


    //手動輪播
    $('.num li').mouseover(function () {
        var index=$(this).index()//拿到當前下標索引值
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
//        $('.img li').eq(index).show(1).siblings().hide(1)
        $('.img li').eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000)


    });
    //自動輪播（設置定時器）
    var c=setInterval(go,1500);
    var i=0;
    function go() {
        if(i==num_img-1){
            i=-1
        }
         i++;
        $('.num li').eq(i).addClass('active');
        $('.num li').eq(i).siblings().removeClass('active');
//        $('.img li').eq(index).show(1).siblings().hide(1)
        $('.img li').eq(i).stop().fadeIn().siblings().stop().fadeOut()

    }
    //
     function go_l() {
        if(i==0){
            i=num_img
        }
         i--;
        $('.num li').eq(i).addClass('active');
        $('.num li').eq(i).siblings().removeClass('active');
//        $('.img li').eq(index).show(1).siblings().hide(1)
        $('.img li').eq(i).stop().fadeIn().siblings().stop().fadeOut()

    }
    $('.outer').hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(go,1500);
    })

    //button加定播
    $('.right').click(go);
    $('.left').click(go_l)
</script>


</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。