JS实现简单的轮播图（非常简单，一看就懂）_js四个图片每隔一秒轮播显示-CSDN博客

本文链接：https://blog.csdn.net/Best_CXY/article/details/79565983

主要思路：先将需要轮播的4张图使用绝对定位让其重叠在banner这个盒子中，然后遍历所有的图片将其隐藏，再获取当前图片的index值，根据当前的index值设置当前的图片显示出来。设置间歇定时器setInterval每隔1秒使得index的值加1，如果大于图片个数则index=0，每隔1秒调用changeImg()函数，改变图片的显示。

li项的实现原理一样，总的来说就是围绕index的值来进行设置图片的显示与隐藏，或是Li项的样式，从而达到轮播图的效果。

以下为代码部分：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS实现轮播图</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="main" id="main">
        <div class="nav" id="nav">
            <ul>
                <li class="changeColor">首页</li>
                <li>点击看看</li>
                <li>会自动的</li>
                <li>我的网站</li>
            </ul>
        </div>
        <div class="banner" id="banner">
            <a href="#">
                <div class="banner-slide slide1"></div>
            </a>
            <a href="#">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="#">
                <div class="banner-slide slide3"></div>
            </a>
            <a href="#">
                <div class="banner-slide slide4"></div>
            </a>
        </div>
    </div>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS代码：

* {
    padding: 0;
    margin: 0;
}

.main {
    width: 1200px;
    height: auto;
    margin: 50px auto;
    overflow: hidden;
}

.nav {
    width: 1200px;
    height: 80px;
}

ul {list-style-type: none;}

li {
    float: left;
    width: 25%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
}

.changeColor {
    background: #ffcc00;
    border-radius: 5px;
}

.banner {
    width: 1200px;
    height: 460px;
    overflow: hidden;
}

.banner-slide {
    width: 1200px;
    height: 460px;
    background-repeat: no-repeat;
    position: absolute;
}

.slide1 {
    background-image: url("../img/1.jpg");
}
.slide2 {
    background-image: url("../img/2.jpg");
}
.slide3 {
    background-image: url("../img/3.jpg");
}
.slide4 {
    background-image: url("../img/4.jpg");
}

JS代码：

var timer = null,
    index = 0,
    pics = document.getElementsByClassName("banner-slide"),
    lis = document.getElementsByTagName("li");


//封装一个代替getElementById()的方法
function byId(id){
    return typeof(id) === "string"?document.getElementById(id):id;
}

function slideImg() {
    var main = byId("main");
    var banner = byId("banner");
    main.onmouseover = function(){
        stopAutoPlay();
    }
    main.onmouseout = function(){
        startAutoPlay();
    }
    main.onmouseout();

    //点击导航栏切换图片
    for(var i=0;i<pics.length;i++){
        lis[i].id = i;
          //给每个li项绑定点击事件
        lis[i].onclick = function(){
          //获取当前li项的index值
            index = this.id;
            changeImg();
        }
    }
}
//开始播放轮播图
function startAutoPlay(){
    timer = setInterval(function(){
        index++;
        if(index>3){
            index = 0;
        }
        changeImg();
    },1000);
}
//暂停播放
function stopAutoPlay(){
    if (timer) {
        clearInterval(timer);
    }
}
//改变轮播图
function changeImg(){
    for(var i=0;i<pics.length;i++){
        pics[i].style.display = "none";
        lis[i].className = "";
    }
    pics[index].style.display = "block";
    lis[index].className = "changeColor";
}

slideImg();

效果如下：