京东轮播图源代码

最新推荐文章于 2024-02-20 00:03:41 发布

羊咩咩和喵呜

最新推荐文章于 2024-02-20 00:03:41 发布

阅读量4.6k

点赞数 15

分类专栏： js 文章标签：京东轮播图轮播图京东好看轮播图

本文链接：https://blog.csdn.net/qq_42853707/article/details/88605421

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里是html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东轮播图</title>
    <!--只引入css-->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--底部的模块-->
<div class="banner">
    <!--轮播图的内容-->
    <ul class="content">
        <li><a href="###"><img src="img/1.jpg" alt=""></a></li>
        <li><a href="###"><img src="img/2.jpg" alt=""></a></li>
        <li><a href="###"><img src="img/3.jpg" alt=""></a></li>
        <li><a href="###"><img src="img/4.jpg" alt=""></a></li>
        <li><a href="###"><img src="img/5.jpg" alt=""></a></li>
        <li><a href="###"><img src="img/6.jpg" alt=""></a></li>
        <li><a href="###"><img src="img/7.jpg" alt=""></a></li>
        <li><a href="###"><img src="img/8.jpg" alt=""></a></li>
        <!--这里记得更换图片路径(＾Ｕ＾)ノ~ＹＯ-->
    </ul>
    <!--左右按钮-->
    <div class="button">
        <div class="left"></div>
        <div class="right"></div>
    </div>
   <!--轮播图指示器 小圆点-->
<ul class="dot">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>
</body>
</html>
<!--引入js文件-->
<script src="js/jingdong.js"> </script>

这里是js文件

//1.获取所有的图片
var imgs = document.querySelectorAll(".content>li");
//2.获取所有的圆点
var dots = document.querySelectorAll(".dot li");
//3.左按钮
var leftBtn = document.querySelector(".left");
//4.右按钮
var rightBtn = document.querySelector(".right");

//补充变量 存储当前正在显示的图片的下标
var index = 0;//默认第一张

//避免过度的快速点击,设置是否可以点击
var isClick = true;
//右侧按钮
rightBtn.onclick = function () {
    if ( !isClick){
        return;
    }
    isClick = false;
    //延迟0.5秒执行
    setTimeout(function () {
        isClick = true;
    }, 500);
//    ----------------
    //先隐藏当前显示的图片
    imgs[index].style.opacity = 0;
    //圆点
    dots[index].style.backgroundColor = '#fff';
    //下标增加
    index++;
    //判断下标 不要越界,一共8张 最大下标到7  从0开始
    if(index == 8){
        index = 0;
    }
    //切换新图片
    imgs[index].style.opacity = 1;
    dots[index].style.backgroundColor = "#dc192c";
};
//左侧按钮
leftBtn.onclick = function () {
    if (!isClick) {
        return;
    }
    isClick = false;
    //延迟
    setTimeout(function () {
        isClick = true;
    }, 500);
//    -----------------------
    imgs[index].style.opacity = 0;
    dots[index].style.backgroundColor = '#fff';
    index--;
    if (index == -1){
        index = 7;
    }
    imgs[index].style.opacity = 1;
    dots[index].style.backgroundColor = "#dc192a";
};
//------------------------
//自动滚动
//获取底部的banner
var banner = document.querySelector(".banner");
//设置自动函数
function autoChange() {
   imgs[index].style.opacity = 0;
   dots[index].style.backgroundColor = "#fff";
   index++;//默认向右滚动
    if (index == 8){
        index = 0;
    }
    //显示新的一张  和圆点
    imgs[index].style.opacity = 1;
    dots[index].style.backgroundColor = "#dc192a";
}
//自动切换--开启计时器
var timer = setInterval(autoChange, 1000);
//监测鼠标触摸banner的事件
banner.onmouseenter = function () {
    //关闭计时器
    clearInterval(timer);
};
//鼠标离开banner
banner.onmouseleave = function () {
    //重新开始计时器
    timer = setInterval(autoChange, 1000);
};
//鼠标经过小圆点 8个园点都可切换图片 所以每个圆点的功能都一样
for (var i = 0; i < 8; i++){
    dots[i].onmousemove = function () {
        //隐藏当前图片
        imgs[index].style.opacity = 0;
        dots[index].style.backgroundColor = '#fff';
        //this: 代表当前当前触发事件元素
        for(var j = 0; j < 8; j++){
            if(dots[j] == this){
                //j就是当前触摸的圆点的下标
                index = j;
                break;//结束循环
            }
        }
//新的位置
imgs[index].style.opacity = 1
  dots[index].style.backgroundColor = '#dc192a';
    };
}

这里是css代码

*{
    margin:0;
    padding:0;
}
/*底部banner模块*/
.banner {
    width: 790px;
    height: 340px;
    border: 5px solid gold;
    margin: 50px auto;
    /*定位  让子级在使用绝对定位的时候 以父级为参考*/
    position: relative;/*不脱离文档流 对网页标签无影响*/
}
/*高清 ** 大图 */
.content {
    list-style:none;/*去除列表自带圆点*/
    position: relative;
}
.content > li{
    position: absolute;
    top:0;
    left:0;
    /*先全部隐藏*/
    opacity:0;
    /*添加切换图片的过渡动画*/
    transition:opacity 0.5s;
}
.content>li:nth-child(1){
    opacity:1;
}
/*按钮*/
.button {
    padding-top: 140px;
    position: relative;
}
.left,.right {
    width: 30px;
    height: 60px;
    position: absolute;
    background-color: rgba(0,0,0,0.1);
    opacity:0;
}

/*鼠标划入就显示*/
/******  hover后面不可使用群组性的选择器*/
.banner:hover .button>.left {
    opacity:1;
}
.banner:hover .right{
    opacity:1;
}
/*鼠标划入按钮 颜色加深*/
.left:hover, .right:hover{
    background-color: rgba(0,0,0,0.5);
}
/*添加背景图片  箭头 > */
.left {
    left:0;
    background-image: url("../img/left.png");
    background-repeat: no-repeat;
    background-position: center;
}
.right {
    right:0;
    background-image: url("../img/right.png");
    background-repeat: no-repeat;
    background-position: center;
}
/*----------*/
/*小圆点*/
.dot {
    list-style:none;
    position: absolute;
    left: 50%;
    bottom: 30px;
    background-color: rgba(255, 255,255, 0.3);
    border-radius: 12px;
    padding:5px;
    margin-left: -94px;
}
.dot li {
    width:12px;
    height: 12px;
    border-radius: 6px;
    background-color: white;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
}
.dot li:nth-child(1){
    background-color: #dc192a;
}

羊咩咩和喵呜

关注

15
点赞
踩
43

收藏

觉得还不错? 一键收藏
5
评论
京东轮播图源代码

这里是html文件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;京东轮播图&lt;/title&gt; &lt;!--只引入css--&gt; &lt;link r
复制链接

扫一扫