jQuery实现轮播图效果

最新推荐文章于 2023-05-23 10:54:11 发布

weixin_43700362

最新推荐文章于 2023-05-23 10:54:11 发布

阅读量2.5k

点赞数 9

文章标签： jquery 轮播图

本文链接：https://blog.csdn.net/weixin_43700362/article/details/103244707

版权

大概思路：

在div里存放ul（li），注意div设置相对定位，ul设置绝对定位，因为ul到了后面需要轮播移动。li需要设置float：left。设置li里的img宽高分别为560px，300px。最后面需要拼接一个假的图0（方便最后图和第一图的转变）。
在div里存放另一个div，左右按钮。通过绝对定位，定位到左右两边合适的距离。
在div里存放另一个div，轮播图下面的小圆点，图片移动的时候，小圆点的颜色也会跟着“移动”。

最初，设置index为0。
当点击右按钮的时候，index++。ul移动的距离为（-560index）。当点击最后图的时候，假0显示完全后，直接回到真0的位置
当点击左按钮的时候，index–。ul移动的距离为（-560index）。当点击第一图的时候，瞬间来到假0的位置（方便来到最后一个图）。index设置为最后一个图的index。

程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .big{
        width:560px;
        height:300px;
        position: relative;
        margin:200px auto;
        border:10px solid red;
    }
    .big .move{
        width:5600px;
        height:300px;
        position: absolute;
        left:0;
        top:0;
    }
    .big  ul li{
        float: left;
        list-style: none;
    }
    img{
        width:560px;
        height:300px;
    }

    .btn div{
        width:40px;
        height:60px;
        background: red;
        position: absolute;
        top:50%;
        margin-top:-30px;
    }
    .rightbtn{
        right:0;
    }

    .circle{
        position: absolute;
        left:20px;
        bottom:15px;
    }
    .circle ul{
        overflow: hidden;
        list-style: none;

    }
    .circle ul li{
        background: white;
        float: left;
        margin-right:10px;
        width:20px;
        height:20px;
        border-radius: 50%;
    }


</style>
<body>
<div class="big">

    <ul class="move">
        <li> <img src="img/0.jpg" alt=""> </li>
        <li> <img src="img/1.jpg" alt=""> </li>
        <li> <img src="img/2.jpg" alt=""> </li>
        <li> <img src="img/3.jpg" alt=""> </li>

        <li> <img src="img/0.jpg" alt=""> </li>
    </ul>

    <div class="btn">
        <div class="leftbtn"> < </div>
        <div class="rightbtn"> > </div>
    </div>

    <div class="circle">
        <ul class="circleUl">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</div>


<script src="js/jquery-1.12.3.min.js"> </script>
<script>
    $('.circleUl li').eq(0).css("background","red");
    var index = 0;

    $(".leftbtn").click(function(){
        index--;
        if(index<0){
//            当图0按左按钮，瞬间来到假0的位置，方便来到最后一个图。
            index = 3;
            $(".move").css("left",-560*4);
        }
        $(".move").animate( {left:-560*index} ,1000);
        $('.circleUl li').eq(index).css("background","red").siblings().css("background","white");;
    });

    $(".rightbtn").click (function() {
        index++;
        $(".move").animate({left:-560*index},1000,function(){
            if(index == 4){
//                当到最后一个图的时候(真的图三)，在按右按钮，假0显示完全后，回到真0的位置
                index = 0;
                $(".move").css("left",0);
            }
        });
        $('.circleUl li').eq(index==4?0:index).css("background","red").siblings().css("background","white");
    });



    $('.circleUl li').click(function(){
        console.log( $(this).index() );
        $('.circleUl li').eq( $(this).index()).css("background","red").siblings().css("background","white");

        var index = $(this).index();
        $('.move').animate({left:index*(-560)},1000);
    })

</script>

</body>
</html>

运行结果：

在这里插入图片描述

相同功能代码封装函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .big{
        width:560px;
        height:300px;
        position: relative;
        margin:200px auto;
        border:10px solid red;
    }
    .big .move{
        width:5600px;
        height:300px;
        position: absolute;
        left:0;
        top:0;
    }
    .big  ul li{
        float: left;
        list-style: none;
    }
    img{
        width:560px;
        height:300px;
    }

    .btn div{
        width:40px;
        height:60px;
        background: red;
        position: absolute;
        top:50%;
        margin-top:-30px;
    }
    .rightbtn{
        right:0;
    }

    .circle{
        position: absolute;
        left:20px;
        bottom:15px;
    }
    .circle ul{
        overflow: hidden;
        list-style: none;

    }
    .circle ul li{
        background: white;
        float: left;
        margin-right:10px;
        width:20px;
        height:20px;
        border-radius: 50%;
    }


</style>
<body>
<div class="big">

    <ul class="move">
        <li> <img src="img/0.jpg" alt=""> </li>
        <li> <img src="img/1.jpg" alt=""> </li>
        <li> <img src="img/2.jpg" alt=""> </li>
        <li> <img src="img/3.jpg" alt=""> </li>

        <li> <img src="img/0.jpg" alt=""> </li>
    </ul>

    <div class="btn">
        <div class="leftbtn"> < </div>
        <div class="rightbtn"> > </div>
    </div>

    <div class="circle">
        <ul class="circleUl">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</div>


<script src="js/jquery-1.12.3.min.js"> </script>
<script>
    $('.circleUl li').eq(0).css("background","red");
    var index = 0;

    $(".leftbtn").click(function(){
        index--;
        move();
    });

    $(".rightbtn").click (function() {
        index++;
        move();
    });


    function move(){
//        左边按钮部分
        if(index<0){
//            当图0按左按钮，瞬间来到假0的位置，方便来到最后一个图。
            index = 3;
            $(".move").css("left",-560*4);
        }
//        其中，左边按钮部分的ul移动和小圆点变色与右边按钮的ul移动和小圆点变色“合并”了。
//        右边按钮部分
        $(".move").animate({left:-560*index},1000,function(){
            if(index == 4){
//                当到最后一个图的时候(真的图三)，在按右按钮，假0显示完全后，回到真0的位置
                index = 0;
                $(".move").css("left",0);
            }
        });
        $('.circleUl li').eq(index==4?0:index).css("background","red").siblings().css("background","white");

    }



//    小圆点点击事件
    $('.circleUl li').click(function(){
        console.log( $(this).index() ); 
        $(this).css("background","red").siblings().css("background","white");
//被点击的小圆点的index索引值 赋值给index，为了左右按钮里的index值得正确性。
        var index = $(this).index();
        $('.move').animate({left:index*(-560)},1000);
    })

</script>

</body>
</html>

weixin_43700362

关注

9
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现轮播图效果

大概思路：在div里存放ul（li），注意div设置相对定位，ul设置绝对定位，因为ul到了后面需要轮播移动。li需要设置float：left。设置li里的img宽高分别为560px，300px。最后面需要拼接一个假的图0（方便最后图和第一图的转变）。在div里存放另一个div，左右按钮。通过绝对定位，定位到左右两边合适的距离。在div里存放另一个div，轮播图下面的小圆点，图片移动的时候，...
复制链接

扫一扫