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

点击向左的按钮code

点击向右的按钮htm