JS实现轮播图

最新推荐文章于 2024-04-17 09:52:42 发布

小码鑫

最新推荐文章于 2024-04-17 09:52:42 发布

阅读量499

点赞数

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

本文链接：https://blog.csdn.net/xxiyy0411/article/details/122022550

版权

javascript 同时被 2 个专栏收录

2 篇文章 1 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

自动换图片||点击换图片

js实现轮播图

**
html 里面的路径要改为自己的

html 代码

<!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/lub.css">
    <script src="../js/lub.js" defer></script>
    <style>
        .imgdiv ul li img{
            /* 图片大小 */
            width: 2024px;
            height:820px;
        }
    </style>
</head>
<body>
    <div class="imgdiv" style="width: 2024px; height:820px;">
        <ul style="left: 0;">
            <li><img src="../img/首页.jpg" alt=""></li>
            <li><img src="../img/y.png"" alt=""></li>
            <li><img src="../img/zang.jpg" alt=""></li>
            <li><img src="../img/s.jpg" alt=""></li>
        </ul>
        <span class="lf"><img src="../img/left.png" alt=""></span>
        <span class="rf"><img src="../img/right.png" alt=""></span>
    </div>
</body>
</html>

在js文件夹下建lub.js

var indexUl = document.querySelector(".imgdiv>ul");
// li标签
var indexLi=indexUl.querySelectorAll("li");   
var lengthLi =indexLi.length;
// 最大的div
var pop = document.querySelector(".imgdiv");
var lfspan=pop.querySelector('.lf');
var rfspan=pop.querySelector('.rf');
// 设置左右按钮居中
lfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
rfspan.style.top=(parseInt(pop.offsetHeight)-60)/2+'px';
// 初始化,获得显示框的宽度
var content_width=parseInt(pop.offsetWidth);

const TIME=2000;
var timer;

// 设置全局累加器，判断动到哪一张图片**************
var num=0;
// 跟随图片的个数,动态设置圆点的个数
newsbigdiv=document.createElement('div');
newsbigdiv.className='newsbigdiv';
pop.appendChild(newsbigdiv);
// 循环创建子div,给每个子div一个class样式,加一个索引
for(var i=0;i<lengthLi;i++){
    newsdiv=document.createElement('div');
    newsbigdiv.appendChild(newsdiv);
    newsdiv.className="newsdiv";
    newsdiv.setAttribute('index',i);//给每个子div设置一个索引值
}
// 获取圆点div个数,让其左偏移,居中显示
var divsv = newsbigdiv.querySelectorAll('div');
newsbigdiv.style.left=(content_width-divsv.length*60)/2+'px';
// 默认第一个为高亮
divsv[0].style.opacity=1;


function change(){
    // 把所有圆点样式透明设置为0.3
    for(var j=0;j<lengthLi;j++){
        divsv[j].style.opacity=0.3;
    }
    // 给当前索引为num的图片改变圆点高亮显示
    divsv[num].style.opacity=1;
    indexUl.style.left=-num*content_width+'px';
}

for(var i=0;i<lengthLi;i++){
    divsv[i].onclick=function(){
        num=this.getAttribute('index');
        change();
    }
}
lfspan.onclick=function(){
    num--;
    if(num==-1){
        num=lengthLi-1;
    }
    change();
}
rfspan.onclick=function(){
    num++;
    if(num==lengthLi){
        num=0;
    }
    change();
}

timer=setInterval(rfspan.onclick,TIME);

// 当鼠标放在图片上时,清除定时器
pop.onmouseover=function(){
    clearInterval(timer);
}
// 鼠标离开定时器时,开启定时器
pop.onmouseout=function(){
    timer=setInterval(rfspan.onclick,TIME);
}

在css下建 lub.css

*{
    margin: 0;
    padding: 0;
}
ul li{
    list-style: none;
}
.imgdiv{
    margin: 200px auto 0;
    overflow: hidden;
    position:relative;
}
.imgdiv ul{
    display:flex;
    transition: left 1s linear;/*动画效果*/
    position:absolute;
}
.imgdiv span{
    cursor:pointer;
}
.imgdiv span.lf{
    position: absolute;
    left: 10px;
}
.imgdiv span.rf{
    position: absolute;
    right: 10px;
}
.imgdiv>div{
    margin: 0 auto;
    position: absolute;
    left:0;
    bottom:20px;
    display: flex;
}
.newsdiv{
    width: 0;
    height: 0;
    border: 10px solid rgb(139, 138, 138);
    border-radius: 50%;
    margin:0 20px;
    cursor:pointer;
    opacity: 0.3;
}
上述代码中的下面这两段代码：是给下面放小圆点盒子与小圆点样式的。在js中根据图片个数动态创建小圆点

.imgdiv>div{
    margin: 0 auto;
    position: absolute;
    left:0;
    bottom:20px;
    display: flex;
}
.newsdiv{
    width: 0;
    height: 0;
    border: 10px solid rgb(139, 138, 138);
    border-radius: 50%;/*正方形变成圆形*/
    margin:0 20px;
    cursor:pointer;/*鼠标放上去变成小手*/
    opacity: 0.3;/*初始透明度，通过js修改透明度，来修改其高亮*/
}

小码鑫

关注

0
点赞
踩
0

收藏

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

js实现轮播图**html 代码**<!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="st.
复制链接

扫一扫