html+css+js轮播图

장숙혜

已于 2023-11-12 18:41:01 修改

阅读量4.6k

点赞数 9

文章标签： css javascript html

于 2023-11-12 18:23:46 首次发布

本文链接：https://blog.csdn.net/qq_53911056/article/details/134363599

版权

本文介绍：通过html+css+js实现轮播图效果——自动轮播、左右箭头切换图片、小圆点点击切换图片
（注意这里采用字体图标）
1、html（这里就不多介绍）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js轮播图</title>
    //字体图标样式引入
    <link rel="stylesheet" href="./font/iconfont.css">
    //引入css样式
    <link rel="stylesheet" href="./work.css" />
  </head>
  <body>
    <div class="bigbox">
        <!-- 所有图片 -->
        <div class="imgall">
            <img src="./images/1.jpg" alt="">
            <img src="./images/2.jpg" alt="">
            <img src="./images/3.jpg" alt="">
            <img src="./images/4.png" alt="">
            <img src="./images/5.png" alt="">
            <img src="./images/6.jpg" alt="">
        </div>
        <!-- 点击箭头 -->
        <div onclick="left(this)" class="jiantouone">
            <span class="iconfont icon-left"></span>
        </div>
        <div onclick="right(this)" class="jiantoutwo">
            <span class="iconfont icon-zuoyoujiantou"></span>
        </div>
        <!-- 小圆点 -->
        <div class="yuan">
            <div class="one"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <script src="./work.js"></script>
  </body>
</html>

2、css（这里就不多介绍）

*{
    margin: 0;
    padding: 0;
}
.bigbox{
    width: 560px;
    height: 360px;
    background-color: aqua;
    margin-left: 110px;
    position: relative;
    margin: 100px auto;
    overflow: hidden;
}
.imgall{
    width: 3360px;
    height: 360px;
    font-size: 0;
    background-color: bisque;
    transform: translateX(0);
    transition: all 0.3s;
}
.imgall img{
    width: 560px;
    height: 360px;
}
.jiantouone{
    width: 50px;
    height: 60px;
    background-color: rgb(79, 79, 79);
    position: absolute;
    top: calc(50% - 30px);
    left: -60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 6px 6px 0;
    transition: all 0.2s;
}
.jiantouone>span{
    color: white;    
}
.jiantoutwo{
    width: 50px;
    height: 60px;
    background-color: rgb(79, 79, 79);
    position: absolute;
    top: calc(50% - 30px);
    right: -60px; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px 0 0 6px;
    transition: all 0.2s; 
}
.jiantoutwo>span{
    color: white;  
}
.yuan{
    width: 110px;
    height: 20px;
    position: absolute;
    left: calc(50% - 55px);
    bottom: 10px;
}
.yuan div{
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #999;
    float: left;
    margin: 0 2px;
}
.yuan div:first-child{
    background-color: blueviolet;
}
.imgall:hover{
    animation-play-state: paused;
    cursor: pointer;
}
.bigbox:hover .jiantouone{
    left: 0;
}
.bigbox:hover .jiantoutwo{
    right: 0;
}

3、这段JS实现了一个轮播图的效果，包括了向左、向右切换图片、自动轮播、鼠标悬停停止轮播、小圆点点击切换图片等功能。具体实现方式是通过获取图片容器、图片、小圆点等元素，监听鼠标事件和小圆点点击事件，计算图片移动距离进行轮播图片的切换。其中的变量、函数和方法含义如下：
（1）变量：

imgall：图片容器
imgs：所有图片元素
circles：小圆点集合
num：当前轮播到的图片索引
（2）函数：
left(obj)：向左切换图片函数
right(obj)：向右切换图片函数
slide()：轮播图片的函数
（3）方法：
getElementsByClassName()：通过类名获取元素集合
getElementsByTagName()：通过标签名获取元素集合
querySelectorAll()：通过选择器获取元素集合
setInterval()：定时器函数，实现自动轮播
clearInterval()：清除定时器，停止轮播
addEventListener()：添加事件监听器，监听点击事件
style.transform：设置元素的CSS transform属性，实现动画效果
代码如下：

let imgall=document.getElementsByClassName("imgall")[0];
let imgs=imgall.getElementsByTagName("img");
let circles = document.querySelectorAll(".yuan div"); 
let num=0;
//  console.log(circles);
// 向左
function left(obj){
    num--;
    if(num<0){
        num=5;
    }
    slide();
}
// 向右
function right(obj){
    num++;
    if(num>5){
        num=0;
    }
    slide();
}
// 加载自动轮播
let stop;
let box=document.getElementsByClassName("bigbox")[0];
console.log(box);
window.onload=function(){
    stop=setInterval(right,1000);
}
box.onmousemove=function(){
    console.log(111);
    clearInterval(stop);
}
box.onmouseout=function(){
    stop=setInterval(right,1000);
}
// 轮播
function slide(){
    let move=(-num)*560;
    imgall.style.transform=`translateX(${move}px)`;
    circles.forEach(function(circle,index){
        if(num==index){
            circle.style.backgroundColor="blueviolet";
        }else{
            circle.style.backgroundColor="#999";
        }
    })
}
// 小圆点
circles.forEach(function(circle,index){
    // console.log(circle);
    // console.log(index);
    circle.addEventListener("click",function(){
        num=index;
        // console.log(num);
        slide();
        // return num;
    });
})

在这里插入图片描述案例图片来源于觉唯网站

장숙혜

关注

9
点赞
踩
66

收藏

觉得还不错? 一键收藏
4
评论
html+css+js轮播图

3、这段JS实现了一个轮播图的效果，包括了向左、向右切换图片、自动轮播、鼠标悬停停止轮播、小圆点点击切换图片等功能。具体实现方式是通过获取图片容器、图片、小圆点等元素，监听鼠标事件和小圆点点击事件，计算图片移动距离进行轮播图片的切换。本文介绍：通过html+css+js实现轮播图效果——自动轮播、左右箭头切换图片、小圆点点击切换图片。1、html（这里就不多介绍）2、css（这里就不多介绍）（注意这里采用字体图标）
复制链接

扫一扫