css+js 实现轮播图

最新推荐文章于 2024-07-16 08:00:00 发布

L姀M

最新推荐文章于 2024-07-16 08:00:00 发布

阅读量130

点赞数

分类专栏：前端---js

本文链接：https://blog.csdn.net/LTT_SH1ock/article/details/102939001

版权

前端---js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：

HTML:

<div class="container">
        <div class="wrap">
            <img src="1.jpg">
            <img src="3.jpg">
            <img src="4.jpg">
            <img src="5.jpg">
            <img src="india.jpg">
        </div>
        <div class="buttons">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <a href="javascript:;" class="arrow" style="right:15px;" onclick="toNext()">&gt;</a>
        <a href="javascript:;" class="arrow" style="left:15px;" onclick="roPre()">&lt;</a>
    </div>

CSS:

<style>
        .container{
            width: 400px;
            height:400px;
            margin:50px auto;
            border:1px solid #000;
            box-sizing: border-box;
            overflow: hidden;
            font-size: 0; /*设置之后图片之间无间距*/
            position: relative;
        }
        .wrap{
            width:2000px; /*所有图片总宽度 400*5 */
            height:400px;
            position: absolute;
            left:0;/*是相对于.container的*/
        }
        .wrap img{
            width:400px;
            height: 400px;
        }
         .arrow {
             font-size: 50px;
            color:red;
             text-decoration: none;
            position:absolute;
            top:150px;
            z-index: 2;
        }
        .container .buttons{ /* 设置数字指标位置*/
            position: absolute;
            z-index: 2;
            bottom: 10px;
            right:15px;
            font-size: 20px;
        }
        .buttons span{
            cursor: pointer;
        }
        .on{
            background-color: aqua; /*点击数字指标之后的背景颜色*/
        }
    </style>

JS:

<script>
    let timer=null; //定时器变量
    let index=0; //记录目前图片的下标，开始时默认是第一张图片
    let buttons=document.getElementsByClassName("buttons")[0];
    let spans=buttons.getElementsByTagName("span");
    spans[index].className="on"; //为数字指标1添加背景色
    let len =spans.length; //图片张数=数字指标的个数
    let lastLeft=-400*(len-1); //最后一张图片左边距（400：每张图片的宽度）
    //点击数字下标事件
    for (let i=0;i<len;i++){
        spans[i].onclick=function () {
            back();
            index=i;
            let wrap = document.getElementsByClassName("wrap")[0];
            wrap.style.left=-400*i+"px";
            spans[i].className="on";
        }
    }
    function autoplay(){
        timer=setInterval(function () {
            toNext();
        },5000);
    }
    autoplay();
    let container=document.getElementsByClassName("container")[0];
    //鼠标移入取消轮播
    container.onmouseenter=function () {
        clearInterval(timer)
    };
    //鼠标移除恢复轮播
    container.onmouseleave=function () {
        autoplay();
    };
    //点击下一张
    function toNext(){
        spans[index].className="";
        let wrap = document.getElementsByClassName("wrap")[0];
        let newLeft= parseInt(wrap.style.left) || 0; //400px=>400
        if(newLeft===lastLeft){ //0 400 800 1200 (4张图片时)
            wrap.style.left=0+"px";
            index=0;
        }else{
            wrap.style.left=newLeft-400+"px";
            index++;
        }
        spans[index].className="on";
    }
    //点击上一张
    function roPre(){
        spans[index].className="";
        let wrap = document.getElementsByClassName("wrap")[0];
        let newLeft= parseInt(wrap.style.left) || 0;
        if(newLeft===0){
            wrap.style.left=lastLeft+"px";
            index=len-1;
        }else{
            wrap.style.left=newLeft+400+"px";
            index--;
        }
        spans[index].className="on";
    }
    //取消所有数字指标的背景色
    function back(){
        for (let i=0;i<len;i++){
            spans[i].className="";
        }
    }
</script>