用jquery写一个轮播图左右键滚动

最新推荐文章于 2019-09-05 20:47:56 发布

Meroy0

最新推荐文章于 2019-09-05 20:47:56 发布

阅读量341

点赞数

本文链接：https://blog.csdn.net/Meroy0/article/details/100566366

版权

jquery实现轮播图

思路

大概思路是这样的

显示第一张，隐藏其他几张，然后使用定时器，把将要显示的图片通过定位于图片并排，利用动画效果实现图片轮播
我们利用一个class表示显示图片的当前位置
轮播动画有两种，向右轮播和向左轮播。所以定位图片并排和动画效果都不一样
向左轮播时刚好相反，假设当前是第二种需要轮播到第一张，我们利用定位把第一张图片并排放在第二种图片的左边，效果我就不演示了
然后通过动画效果把第一张或者第二种向右移动到相应的位置就行了

html部分代码

<div class="box">
                <ul class="image">
                    <li><img src="./img/1.jpg"/></li>
                    <li><img src="./img/2.jpeg"/></li>
                    <li><img src="./img/3.jpg"/></li>
                    <li><img src="./img/4.png"/></li>
                    <li><img src="./img/5.jpeg"/></li>
                </ul>
                <ul class="num">
                    <li class='current'>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <div class="left tow"><</div>
                <div class="right tow">></div>
            </div>

css部分代码

*{
                margin: 0;
                padding: 0;
            }
            .image{
                list-style: none;
            }
            .box{
                width: 730px;
                height: 454px;
                position: relative;
                margin: 50px auto;
            }
            .image li{
                width: 100%;
                height: 454px;
                float: left;
                position: absolute;
                display: none;
            }
            img{
                width: 730px;
                height: 460px;
            }
            .num{
                position: absolute;
                list-style: none;
                cursor: pointer;
                bottom: 20px;
                left: 281px;
            }
            .num li{
                float: left;
                color: white;
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: gray;
                margin: 0 4px;
                text-align: center;
                line-height: 20px;
            }
            .num .current{
                background-color: red;
            }
            .tow{
                height: 60px;
                width: 30px;
                position: absolute;
                cursor: pointer;
                background-color: black;
                color: white;
                opacity: 0.5;
                font-size: 20px;
                text-align: center;
                line-height: 60px;
                top: 197px;
                display: none;
            }
            .left{
                left: 0;
            }
            .right{
                right: 0;
            }

jquery部分代码

  var i =0
        var sum = $(".image li").length;
        $(function(){
            $(".image li").eq(0).show();
            $(".box").hover(function(){
                $(".tow").show();
            },function(){
                $(".tow").hide();
            })
            $(".left").click(function(){
                if(i==0){
                    i=sum;
                }
                i--;
                startLunbo();
            });
            $(".right").click(function(){
                if(i==sum-1){
                    i=-1;
                }
                i++;
                startLunbo();
            });
        });
        function startLunbo(){
            if(i==5){
                i=0;
            }
            $(".image>li").eq(i).fadeIn().siblings().fadeOut();
            $(".num>li").eq(i).addClass("current").siblings().removeClass("current");
        }

当然最后献上所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
    <style>
     *{
                margin: 0;
                padding: 0;
            }
            .image{
                list-style: none;
            }
            .box{
                width: 730px;
                height: 454px;
                position: relative;
                margin: 50px auto;
            }
            .image li{
                width: 100%;
                height: 454px;
                float: left;
                position: absolute;
                display: none;
            }
            img{
                width: 730px;
                height: 460px;
            }
            .num{
                position: absolute;
                list-style: none;
                cursor: pointer;
                bottom: 20px;
                left: 281px;
            }
            .num li{
                float: left;
                color: white;
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background-color: gray;
                margin: 0 4px;
                text-align: center;
                line-height: 20px;
            }
            .num .current{
                background-color: red;
            }
            .tow{
                height: 60px;
                width: 30px;
                position: absolute;
                cursor: pointer;
                background-color: black;
                color: white;
                opacity: 0.5;
                font-size: 20px;
                text-align: center;
                line-height: 60px;
                top: 197px;
                display: none;
            }
            .left{
                left: 0;
            }
            .right{
                right: 0;
            }
    
    </style>
</head>
<body>
        <div class="box">
                <ul class="image">
                    <li><img src="./img/1.jpg"/></li>
                    <li><img src="./img/2.jpeg"/></li>
                    <li><img src="./img/3.jpg"/></li>
                    <li><img src="./img/4.png"/></li>
                    <li><img src="./img/5.jpeg"/></li>
                </ul>
                <ul class="num">
                    <li class='current'>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <div class="left tow"><</div>
                <div class="right tow">></div>
            </div>
</body>
</html>
        <script>
            var i =0
        var sum = $(".image li").length;
        $(function(){
            $(".image li").eq(0).show();
            $(".box").hover(function(){
                $(".tow").show();
            },function(){
                $(".tow").hide();
            })
            $(".left").click(function(){
                if(i==0){
                    i=sum;
                }
                i--;
                startLunbo();
            });
            $(".right").click(function(){
                if(i==sum-1){
                    i=-1;
                }
                i++;
                startLunbo();
            });
        });
        function startLunbo(){
            if(i==5){
                i=0;
            }
            $(".image>li").eq(i).fadeIn().siblings().fadeOut();
            $(".num>li").eq(i).addClass("current").siblings().removeClass("current");
        }
        </script>
    </body>
</html>