原生js实现轮播图

如何使用原生js实现轮播图效果呢，现在带着大家做一个小小的例子

　　先说一下这次的轮播图需要实现的功能点：　

　　　　1.3s自动切换图片,图片切换时提示点跟随切换
　　　　2.鼠标划到图片上，自动切换轮播图停止
　　　　3.指示点划过切换对应的图片，图片切换时提示点跟随切换
　　　　4.点击上一页下一页按钮切换图片

css代码部分

/*初始化浏览器默认样式*/
*{
    margin: 0;
    padding: 0;
}
/*sowingMap*/
.sowingMap{
    width: 800px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
/*imgPart*/
.imgPart{
    width: 800px;
    height: 500px;
    position: absolute;
}
/*imgSwitch*/
.imgSwitch{
    width: 800px;
    height: 500px;
    position: absolute;
    list-style: none;
    display: none;
    cursor: pointer;
}
.imgSwitch img{
    width: 100%;
    height: 500px;
}
.imgShow{
    display: block;
}
/*spotPart*/
.spotPart{
    position: absolute;
    bottom: 0;
    height: 40px;
    left: 36%;
}
.spotPart p{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #fff;
    float: left;
    margin-left: 20px;
    cursor: pointer;
}
/*提示点的选中颜色*/
.spotPart .spotColor{
    background-color: #f00;
}
/*上一张下一张切换部分*/
.preImg , .nextImg{
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    line-height: 70px;
    font-size: 30px;
    color: #f5f5f5;
    position: absolute;
    top: 190px;
    cursor: pointer;
    display: none;
}
.preImg{
    left: -35px;
    text-indent: 25px;
}
.nextImg{
    right: -35px;
    text-indent: -25px;
}

html代码部分

<div class="sowingMap">
    <ul class="imgPart">
        <li class="imgSwitch imgShow"><img src="img/1.jpg"/></li>
        <li class="imgSwitch"><img src="img/2.jpg"/></li>
        <li class="imgSwitch"><img src="img/3.jpg"/></li>
        <li class="imgSwitch"><img src="img/4.jpg"/></li>
        <li class="imgSwitch"><img src="img/5.jpg"/></li>
    </ul>
    <div class="spotPart">
        <p class="spotColor"></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="loopChange">
        <p class="preImg">&lt;</p>
        <p class="nextImg">&gt;</p>
    </div>
</div>

js代码部分

//定义自动轮播的定时器
var startLoop = null;
//获取所有的li 和 p标签
var li_v = document.querySelectorAll("li");
var p_v = document.querySelectorAll(".spotPart p");
var sowingMap = document.querySelector('.sowingMap');
var p_change = document.querySelectorAll('.loopChange p');
//业务1：实现3s钟自动循环切换图片,图片切换时提示点跟随切换
var num = 0;
function loopSetInterval() {
    clearInterval(startLoop);
    startLoop = setInterval(function() {
        for(var i = 0; i < li_v.length; i++) {
            li_v[i].setAttribute("class", "imgSwitch");
            p_v[i].setAttribute("class", " ");
        }
        if(num >= li_v.length - 1) {
            num = 0;
        } else {
            num++;
        }
        li_v[num].setAttribute("class", "imgSwitch imgShow");
        p_v[num].setAttribute("class", "spotColor");
    }, 3000);
}
loopSetInterval();

//业务2：鼠标划到图片上，轮播图停止自动切换，划出后继续播放
for(var i = 0; i < li_v.length; i++) {
    li_v[i].onmouseover = function() {
        clearInterval(startLoop);
    }
    li_v[i].onmouseout = function() {
        loopSetInterval();
    }
}

//业务三：指示点划过切换对应的图片，图片切换时提示点跟随切换
for(var i = 0; i < p_v.length; i++) {
    p_v[i].index = i;
    p_v[i].onmouseover = function() {
        clearInterval(startLoop);
        for(var i = 0; i < li_v.length; i++) {
            li_v[i].setAttribute("class", "imgSwitch");
            p_v[i].setAttribute("class", " ");
        }
        this.setAttribute("class", "spotColor");
        li_v[this.index].setAttribute("class", "imgSwitch imgShow");
    }
    p_v[i].onmouseout = function() {
        loopSetInterval();
    }
}

//业务四：点击上一页下一页切换
sowingMap.onmouseover = function () {
    for (var i=0;i<p_change.length;i++) {
        p_change[i].style.display = "block";        
    }
}
sowingMap.onmouseout = function () {
    for (var i=0;i<p_change.length;i++) {
        p_change[i].style.display = "none";        
    }
}
//点击切换上一张
p_change[0].onclick = function  () {
    console.log(num)
    for(var i = 0; i < li_v.length; i++) {
        li_v[i].setAttribute("class", "imgSwitch");
        p_v[i].setAttribute("class", " ");
    }
    if (num <= 0) {
        num = 4;
        li_v[num].setAttribute("class", "imgSwitch imgShow");
        p_v[num].setAttribute("class", "spotColor");
    } else if(num <= 4){
        li_v[num-1].setAttribute("class", "imgSwitch imgShow");
        p_v[num-1].setAttribute("class", "spotColor");
        num--;
    }
}
//点击切换下一张
p_change[1].onclick = function  () {
    console.log(num)
    for(var i = 0; i < li_v.length; i++) {
        li_v[i].setAttribute("class", "imgSwitch");
        p_v[i].setAttribute("class", " ");
    }
    if (num >= 4) {
        num = 0;
        li_v[num].setAttribute("class", "imgSwitch imgShow");
        p_v[num].setAttribute("class", "spotColor");
    } else if(num >= 0){
        li_v[num+1].setAttribute("class", "imgSwitch imgShow");
        p_v[num+1].setAttribute("class", "spotColor");
        num++;
    }
}

 

好了，一个原生的js代码实现轮播图效果就大功告成了，如果你想使用更简单的办法，可以参考我使用jQuery实现的轮播图效果：

https://www.cnblogs.com/qdclub/p/9782921.html