Jquery實現輪播圖效果（fadeIn()和fadeOut()方法的應用）

時間 2019-11-07

標籤 jquery 實現效果 fadein fadeout 方法應用欄目 JQuery 简体版

原文原文鏈接

1.jquery.js從官網上下載最新的，使用外鏈導入到html中，javascript

下載地址：html

http://jquery.com/download/java

2.圖片能夠自行準備，我這裏的圖片是用的京東的輪播圖片，左右按鈕是隨便在網上扒的。(原本代碼有註釋，上傳代碼段，自動給去掉了，鬱悶)jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        div {
            position: relative;
            margin: 0 auto;
            width: 590px;
            height: 470px;
            overflow: hidden;
            top: 50px;
        }
        
        .btn_leftBtn {
            position: absolute;
            width: 55px;
            height: 55px;
            top: 207px;
            left: 0px;
        }

        .btn_rightBtn {
            position: absolute;
            width: 55px;
            height: 55px;
            top: 207px;
            right: 0px;
        }
    </style>
    <script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
</head>
<body>
    <div class="wrapper">
        <ul class="sliderPage">
            <li><a href=""><img src="img/jd01.jpg"></a></li>
            <li><a href=""><img src="img/jd02.jpg"></a></li>
            <li><a href=""><img src="img/jd03.jpg"></a></li>
            <li><a href=""><img src="img/jd04.jpg"></a></li>
            <li><a href=""><img src="img/jd05.jpg"></a></li>
            <li><a href=""><img src="img/jd06.jpg"></a></li>
            <li><a href=""><img src="img/jd07.jpg"></a></li>
            <li><a href=""><img src="img/jd08.jpg"></a></li>
        </ul>
        <div class="btn_leftBtn">
            <img src="./img/slide-btnl.png">
        </div>
        <div class="btn_rightBtn">
            <img src="./img/slide-btnR.png">
        </div>
    </div>
    <script>
        $(function() {
            var cnt = 0;    
            $(".wrapper .btn_leftBtn").click(function() {
                cnt++;
                if (cnt == $(".wrapper li").length) {
                    cnt = 0;
                }
                $(".wrapper li").eq(cnt).fadeIn("fast").siblings("li").fadeOut();
            });

            $(".wrapper .btn_rightBtn").click(function(){
                cnt--;
                if (cnt == -1) {
                    cnt = $(".wrapper li").length - 1;
                }
                $(".wrapper li").eq(cnt).fadeIn("fast").siblings("li").fadeOut();
            });    
        })
    </script>
</body>
</html>

3.執行效果圖：app

第一張圖片ide