jQuery案例（2）实现渐变轮播图（仿京东）

最新推荐文章于 2023-03-25 15:38:25 发布

芝麻蓝

最新推荐文章于 2023-03-25 15:38:25 发布

阅读量353

点赞数

分类专栏：前端 jQuery 案例文章标签： jQuery js 轮播图

本文链接：https://blog.csdn.net/weixin_44138076/article/details/100265536

版权

前端同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

jQuery

13 篇文章 0 订阅

订阅专栏

案例

2 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

html

<!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>渐变轮播图</title>
    <link type="text/css" rel="stylesheet" href="runmap.css"/>
    <script src="jquery-3.4.1.js"></script>
    <script src="runmap.js"></script>
</head>
<body>
    <div class="map">
        <ul>
            <li class="one"><a href="javascript:void(0);"><img src="imgs/0.png"></a></li>
            <li><a href="javascript:void(0);"><img src="imgs/1.png"></a></li>
            <li><a href="javascript:void(0);"><img src="imgs/2.png"></a></li>
        </ul>
        <div class="btn">
            <span class="leftbtn">&lt;</span>
            <span class="rightbtn">&gt;</span>
        </div>
    </div>
</body>
</html>

css

*{
    margin:0;
    padding: 0;
}
ul{
    list-style: none;
}
.map{
    height:340px;
    width:790px;
    margin: 100px auto;
    position: relative;
}
li{
    position: absolute;
    display: none;
}
.one{
    display:block;
}
.btn{
    display:none;
}
.map:hover .btn{
    display:block;
}
.leftbtn{
    left: 0;
    width: 30px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.1);
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-weight: 700;
    font-size: 30px;
    position: absolute;
}
.rightbtn{
    right: 0;
    width: 30px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.1);
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-weight: 700;
    font-size: 30px;
    position: absolute;
}

js

解析：在这个案例里，先为左右两个按钮注册点击事件，然后定义一个变量记录当前轮播图的页数，当点击右边按钮时首先判断定义的变量count是否是最大的一页，如果是就赋值为0，否则就加一页，然后选中第count个标签，让他渐渐出现，他的兄弟标签渐渐消失就行了。左边也是类似道理。

$(function(){
    var count = 0;

    $(".rightbtn").click(function(){//右边的按钮
        count++;//定义一个变量记录页数
        if(count == $(".map li").length){//判断是否是最大值（最后一页）
            count = 0;//回到第一页
        }
       
        $(".map li").eq(count).stop().fadeIn().siblings("li").fadeOut();//第count个li渐渐显示，第count个li的兄弟渐渐消失
    });

    $(".leftbtn").click(function(){
        count--;
        if(count == -1){//判断是否是最小值（第一页）
            count = $(".map li").length - 1;//去到最后一页
        }
     
        $(".map li").eq(count).stop().fadeIn().siblings("li").fadeOut();//第count个li渐渐显示，第count个li的兄弟渐渐消失
    });
})

芝麻蓝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery案例（2）实现渐变轮播图（仿京东）

效果html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
复制链接

扫一扫