轮播图

最新推荐文章于 2024-09-18 09:47:26 发布

Bonjour_Yvonne

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量409

点赞数

分类专栏： web 文章标签： html css3

本文链接：https://blog.csdn.net/Bonjour_h/article/details/115462913

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用HTML、CSS和JavaScript实现一个具有自动轮播、鼠标悬停暂停、左右按钮切换及分页器导航功能的淘宝风格轮播图。通过设置定时器实现自动轮播，利用jQuery处理鼠标移入移出事件及按钮点击事件，动态改变图片位置和分页器状态，实现了常见的轮播图交互效果。

摘要由CSDN通过智能技术生成

淘宝轮播图
1、自动轮播（每隔一段时间换一张图）
2、鼠标放上去（自动轮播停止），鼠标移出（自动轮播停止）
3、有左右按钮，单击左右按钮可以切换图片
4、单击不同的分页器，可以显示不同图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入外部样式-->
    <link rel="stylesheet" href="./css/default.css">
    <!--引包，引入jq-->
    <script src="./js/jQuery.min.js"></script>
</head>
<body>
    <div>
        <ul>
            <li class="current"><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/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
        </ul>

        <button class="lbtn">&lt;</button>
        <button class="rbtn">&gt;</button>

        <ol>
            <li class="cur">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
</html>

<script>
    //右侧单击事件
    //信号量：全局变量，控制某一个li运动
    var idx = 0;

    //右侧按键代码进行封装
    function rhandle(){
        //当前图片从left为0运动到-600
        $("ul li").eq(idx).css({
            "left":0
        }).stop(true).animate({
            "left":-600
        },500);


        idx ++;
        if(idx == 5){
            idx = 0;
        }

        //下一张图片进入
        //eq方法：可以获取到某一个索引值标签
        $("ul li").eq(idx).css({
            "left":600
        }).stop(true).animate({
            "left":0
        },500)

        //底下分页器的变化
        //addclass代表给标签添加类名，removeclass相反
        $("ol li").eq(idx).addClass("cur").siblings().removeClass();
    }


    //点击下一页
    $(".rbtn").click(rhandle);

    //点击上一页
    $(".lbtn").click(function(){
        $("ul li").eq(idx).css({"left":0}).stop(true).animate({"left":600},500);
        idx --;
        if(idx == -1){
            idx = 4;
        }
        //下一张图片变化
        $("ul li").eq(idx).css({"left":-600}).stop(true).animate({"left":0},500);
        $("ol li").eq(idx).addClass("cur").siblings().removeClass();
    })
    

    //开启定时器，让轮播图定时轮播
    var timer = setInterval(function(){
        //开启自动轮播
        rhandle();
    },2000);

    //鼠标移上事件
    $("div").mouseenter(function(){
        //清除定时器
        clearInterval(timer);
    })

    //鼠标离开事件
    $("div").mouseleave(function(){
        //开启定时器
        timer = setInterval(rhandle,2000);
        /*
        //方法一也可
        var timer = setInterval(function(){
        //开启自动轮播
        rhandle();
    },2000);
    */
    })


    /******************************************************************/
    //底下的分页器业务
    $("ol li").click(function(){
        //获取单击的那个分页器li索引值
        //index方法：可以获取到某一个标签的索引值
        var index = $(this).index();
        //分两种情况讨论
        //情况一
        if(index > idx){
            //当前这张图移出
            $("ul li").eq(idx).css({"left":0}).stop(true).animate({"left":-600},500);
            
            //被点击页对应的图移入
            $("ul li").eq(index).css({"left":600}).stop(true).animate({"left":0},500);
            //对全局变量重新赋值
            idx=index;
            //分页器跟着变化
            $("ol li").eq(index).addClass("cur").siblings().removeClass();

        }else if(index < idx){
            //当前这张图移出
            $("ul li").eq(idx).css({"left":0}).stop(true).animate({"left":600},500);
            
            //被点击页对应的图移入
            $("ul li").eq(index).css({"left":-600}).stop(true).animate({"left":0},500);
            //对全局变量重新赋值
            idx=index;
            //分页器跟着变化
            $("ol li").eq(index).addClass("cur").siblings().removeClass();

        }

        //情况二
    })

</script>

*{
    margin:0;
    padding:0;
}

div{
    position: relative;
    width:600px;
    height: 400px;
    border:1px solid black;
    margin:50px auto;
    overflow: hidden;
}

ul{
    position: absolute;
    width: 600px;
    height: 400px;
    list-style: none;
}

img{
    width: 600px;
    height: 400px;
}

ul li{
    position: absolute;
    width: 600px;
    height: 400px;
    left:600px;
    

}

.current{
    left: 0px;

}

.lbtn{
    position:absolute;
    width: 30px;
    height: 30px;
    left: 0px;
    top: 50%;
    opacity: 40%;
    border-radius: 0px 45px 45px 0px;
}

.rbtn{
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top:50%;
    opacity: 40%;
    border-radius: 45px 0px 0px 45px;
}

ol{
    position: absolute;
    width:150px;
    height: 25px;

    left:45%;
    bottom:0px;
    list-style: none;
}

ol li{
    float: left;
    width: 15px;
    height:15px;
    border-radius: 50%;
    background-color:grey;
    opacity: 50%;
    color: white;
    text-align: center;
    line-height: 15px;
    margin-right: 3px;
    font-size:xx-small;
    cursor: pointer;
    
}

.cur{
    background-color: green;
    transform: scale(1.2);
}