js轮播图

最新推荐文章于 2025-05-27 09:23:26 发布

汤卓杰

最新推荐文章于 2025-05-27 09:23:26 发布

阅读量171

点赞数

文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/tang31415926/article/details/116451463

版权

本文介绍了如何使用HTML、CSS和JavaScript创建一个轮播图，包括图片复制、路径调整、功能如自动播放、暂停按钮、SVG图标和图片切换效果。详细步骤涉及CSS样式、JavaScript交互和SVG元素的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用

方式

复制css、js文件到项目文件;
html格式复制到需要插入的位置,修改图片及引用插件路径;
修改js文件里的参数;

功能

自动播放、移入暂停播放显示按钮、移出播放隐藏按钮、点击按钮及⚪换图(节流)、⚪随图片变色(颜色设置在css最后).

效果

注意

引用插件及图片注意路径
html:
   按照格式复制插入
js:
   在html轮播图后面引入,若在前, 需要放onload内,改动较大;
   t:轮播时间(ms);
   n:图片数目加1;
   h:图片高度(px);
   w:图片宽度(px);
css:
   直接引用,注意不要被后代选择器改属性.
class:
   用到以下类名:
   "Tang_section","Tang_img_ul","Tang_left","Tang_right","cr".

svg:

素材取自阿里图标库,若商用需授权,请自找svg素材,代码随意.

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 rel="stylesheet" href="轮播图插件.css">
        
    </head>
    <body>
        <div>
            <div class="Tang_section">
                <ul class="Tang_img_ul">
                    <li><img src="images/01.png" alt=""></li>
                    <li><img src="images/02.png" alt=""></li>
                    <li><img src="images/03.png" alt=""></li>
                    <li><img src="images/04.png" alt=""></li>
                    <li><img src="images/05.png" alt=""></li>
                </ul>
                <svg viewBox="0 0 1024 1024"><path d="M765.3 124.4c0 20-43.6 198.6-43.6 382.8 0 184.1 39.4 374.4 43.6 387.5 15.4 49-45.4 79.6-69.9 58.7-19.6-16.8-379.9-358-413.5-387-48.9-33-12.7-98-12.8-98 24.2-21.2 402.5-370.8 431.1-394.5 21-17.4 65.1-18.1 65.1 50.5z" fill="#040000" ></path></svg>
                <svg viewBox="0 0 1024 1024"><path d="M258.7 899.6c0-20 43.6-198.6 43.6-382.8 0-184.1-39.4-374.4-43.6-387.5-15.4-49 45.4-79.6 69.9-58.7 19.6 16.8 379.9 358 413.5 387 48.9 33 12.7 98 12.8 98-24.2 21.2-402.5 370.8-431.1 394.5-21 17.4-65.1 18.1-65.1-50.5z" fill="#040000" ></path></svg>
                <ul></ul>
            </div>
        </div>
        <script src="轮播图插件.js"></script>
    </body>
</html>

css代码

.Tang_section{
    padding: 0;
    position: relative;
    margin: auto;
    overflow: hidden;
}
.Tang_section ul{
    padding: 0;
    margin: 0;
}
.Tang_section li{
    list-style: none;
    float: left;
}
.Tang_img_ul{
    position: absolute;
    left: 0;
    display: flex;
}
.Tang_section svg{
    opacity: 0.5;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 13%;
    width: 7%;
    display: none;
}
.Tang_section svg:nth-child(3){
    right: 0;
}
.Tang_section ul:last-child{
    position: absolute;
    left: 50%;
    bottom: 5%;
    height: 5%;
    transform: translateX(-50%)
}
.Tang_section ul:last-child li{
    border-radius: 50%;
    height: 100%;
    background-color:white;
}
.Tang_section ul:last-child .cr{
    background-color: red;
}

js代码

const h=280;//图片统一高度,单位px
const w=520;//统一宽度,单位px
const n=6;//n=照片个数+1
const t=800;//图片移动一次的时间,单位ms

let ts=document.querySelector(".Tang_section");
ts.style.height=h+"px";
ts.style.width=w+"px";
let iU=ts.querySelector(".Tang_img_ul");
iU.style.height=h+"px";
iU.style.width=w*n+"px";
iU.appendChild(iU.firstElementChild.cloneNode(true));
let cul=ts.lastElementChild;
for(let i=1;i<n;i++){
    let cricle=document.createElement("li");
    cricle.style.width=0.05*h+"px";
    cricle.style.marginRight=0.01*h+"px";
    cul.appendChild(cricle);
}
cul.style.width=0.07*n*h+"px";
//以下动态
//节流锁🔒
let lock=true;
//图片序号
let index=0;
//⚪数组
let circle=cul.children;
circle[0].classList.add("cr");
for(let i=0;i<circle.length;i++){
    circle[i].style.transition=`all ${t}ms`
}
//右键 图片左移  自动轮播时调用
function right(){
    index++;
    move();
    if(index==(n-1)){
        index=0;
        setTimeout(function(){
            iU.style.transition="none"
            iU.style.left=0;
        },t);
    }
    cr();
}
//图片根据index移动
function move(){
    iU.style.transition=`left ${t}ms`;
    iU.style.left=-w*index+"px";
}
//⚪颜色变化
function cr(){
    for(let i=0;i<circle.length;i++){
        circle[i].classList.remove("cr");
    }
    circle[index].classList.add("cr");
}
let svg=document.querySelectorAll(".Tang_section svg");
// 左键图片右移动
svg[0].onclick=function(){
    if(lock){
        lock=false;
        if(index==0){
            iU.style.transition="none";
            iU.style.left=-w*(n-1)+"px";
            index=n-1;
        }
        setTimeout(function(){
            index--;
            move();
            cr();
        },0);
        setTimeout(function(){
            lock=true;
        },t);
    }
}
//右键图片左移
svg[1].onclick=function(){
    if(lock){
        lock=false;
        right();
        setTimeout(function(){
            lock=true;
        },t);
    }
}
//点击⚪事件
for(let i=0;i<circle.length;i++){
    circle[i].onclick=function(){
        for(let j=0;j<circle.length;j++){
            circle[j].classList.remove("cr");
        }
        this.classList.add("cr");
        for(let j=0;j<circle.length;j++){
            if(circle[j].classList.contains("cr")){
                index=j;
                break;
            }
        }
        move();
    }
}
let T_left=ts.querySelector(".Tang_left");
let T_right=ts.querySelector(".Tang_right");
let autoplay=window.setInterval("right();",(1.5*t));
ts.onmouseover=function(){
    svg[0].style.display="block";
    svg[1].style.display="block";
    window.clearInterval(autoplay);
}
ts.onmouseout=function(){
    svg[0].style.display="none";
    svg[1].style.display="none";
    autoplay=window.setInterval("right();",(1.5*t));
}