js实现轮播图

Posted 2020-10-11 .

<div>
        <!---图片区域-->
        <div class="sideShow">
            <img src="images/1.jpg" style="width:100%;"/>
        </div>
        <div class="sideShow">
            <img src="images/2.jpg" style="width:100%;"/>
        </div>
        <div class="sideShow">
            <img src="images/3.jpg" style="width:100%;"/>
        </div>
        <!--上一张 & 下一张-->
        <a class="last" onclick="polusSild(-1)"><</a>
        <a class="next" onclick="polusSild(1)">></a>
        <!---圆点区域--->
        <div style="text-align:center;">
            <span class="dot" onmouseover="currNode(1)"></span>
            <span class="dot" onmouseover="currNode(2)"></span>
            <span class="dot" onmouseover="currNode(3)"></span>
        </div>
     </div>

body{ margin: 0px; padding: 0px }

/*图片显示区域*/
.sideShow{
    width: 100%;
    animation:mymove 2s;
}

@keyframes mymove{
    from{opacity:.4}
    to{opacity: 1}
}
/*上一张 & 下一张按钮*/
.last,.next{
    cursor: pointer; /*鼠标变成手状*/
    color: #fff;
    width: auto;
    position: absolute;
    top: 30%;
    font-weight: bold;
    font-size: 40px;
    border-radius: 0 3px 3px 0;
      padding: 16px;
    opacity: 0.2;    
    transition: background-color .6s ease; /*过渡*/
}
.last:hover,.next:hover{
    background-color: #000;
}

.last{
    left:0;
}
.next{
    right: 0;
    border-radius: 3px 0 0 3px;
}
/*圆点*/
.dot{
      cursor: pointer;
      height: 13px;
      width: 13px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
}
.inter,.dot:hover{
    background-color:#03C;
}

var img = document.getElementsByClassName("sideShow"); //获取存放图片div的集合
var dot = document.getElementsByClassName("dot"); //圆点集合
var slideIndex = 1;  
showSild(slideIndex);
var tiems = setInterval(function(){showSild(++slideIndex)},5000)
var tiems
function polusSild(n){
    showSild(slideIndex += n);
}
function currNode(n){
    showSild(slideIndex = n);
}
function showSild(index){    
    var i;
    if(index < 1){ slideIndex = img.length;    }
    
    if(index > img.length){ slideIndex = 1;    }
    
    for(i = 0;i < img.length; i++){
        img[i].style.display = "none";
    }
    
    for(i = 0;i < dot.length; i++){
        dot[i].className = dot[i].className.replace(" inter",""); 
    }
    img[slideIndex - 1].style.display = "block";
    dot[slideIndex - 1].className += " inter";
}