jquery實現帶左右箭頭和數字焦點的圖片輪播手寫代碼

時間 2019-11-19

原文原文鏈接

之前圖片輪播常常用網上的插件，而後想說本身也要認真看看，一步一步弄明白，因此就本身研究寫了個圖片輪播的代碼，我本身以爲還算是挺簡單的。若有改進的地方，歡迎你能幫我指出，共同進步。css

（ps：博客園如何上傳代碼就是能夠供你們下載那種，一直沒找到地方！）html

html：ide

<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>