JS 实例轮播图制作

2022-03-07 03:33:39
功能需求：
自动轮流展示图片。鼠标悬浮时停止自动滚动，显示翻动按钮和小图标，点击小图标可以切换至指定图片。
用到的知识点：
定时器、css动画、dom操作
效果演示：
代码实现：
<!doctype html>
<html>

<head>
    <title>Test</title>

    <meta charset="utf-8">
    <style type="text/css">
        #wrapper{
            width:750px;
            height:350px;
            margin:50px auto;
            background-color: #eeeeee;
            position: relative;
            overflow: hidden;
            z-index: 100;
        }
        #prevBtn{
            width:50px;
            height: 150px;
            background-image: url("prev_next.png");
            transform:rotateZ(180deg);
            position: absolute;
            top:100px;
            z-index: 100;
        }
        #nextBtn{
            width:50px;
            height: 150px;
            background-image: url("prev_next.png");
            position: absolute;
            right:0px;
            top:100px;
            z-index: 100;
        }
        #picWrapper{
            width: 8000px;
            height:350px;
            transform: translateX(0px);
            transition: transform 0.5s;
        }
        #picWrapper img{
            display: inline-block;
            width: 600px;
            margin:37px 73px;
        }
    </style>
</head>
    
<body>
    <div id = "wrapper">
        <div id = "prevBtn">
        </div>
        <div id = "nextBtn">
        </div>
        <div id = "littleDotsWrapper">
            
        </div>
        <div id = "picWrapper">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <img src="img/6.jpg" alt="">
            <img src="img/7.jpg" alt="">
            <img src="img/8.jpg" alt="">
        </div>
    </div>
    
<script type = "text/javascript">
    var currentID = 0;
    var totalNum = 8;
    var littleDotsWrapper = document.getElementById("littleDotsWrapper");
        
    littleDotsWrapper.style = "margin:0px auto;height:20px;width:"+totalNum*25+"px;position:absolute;bottom:10px;left:280px;";
    
    document.getElementById("prevBtn").onclick = function(){
        
        showLittleDots();

        previous();
    }
    document.getElementById("nextBtn").onclick = function(){
        
        showLittleDots();

        next();
    }
    
    var littleDots = [];
    
    function next(){
        currentID++;
        if(currentID==totalNum){
            currentID=0;
        }
        document.getElementById("picWrapper").style.transform = "translate(-"+ 750*currentID +"px)";
    }
    
    function previous(){
        currentID--;
        if(currentID==-1){
            currentID=totalNum-1;
        }
        document.getElementById("picWrapper").style.transform = "translate(-"+ 750*currentID +"px)";
    }
    
    var slideTimer = setInterval(next,1000);
    
    
    for(var i = 0 ;i<totalNum;i++){
        littleDots[i] = document.createElement("div");
        littleDotsWrapper.appendChild(littleDots[i]);
        littleDots[i].index = i;
        
        
        littleDots[i].onclick =function(){
            currentID = this.index;
            showLittleDots();
        }
        
        littleDots[i].style = "float:left;width:15px;height:15px;background:grey;margin:3px;";

    }
    
    function showLittleDots(){

        for(var j in littleDots){
            littleDots[j].style.backgroundColor = "grey";
        }

        littleDots[currentID].style.backgroundColor = "red";
        
    }
    
    document.getElementById("wrapper").onmouseover = function(){
        document.getElementById("prevBtn").style.display = "block";
        document.getElementById("nextBtn").style.display = "block";
        document.getElementById("littleDotsWrapper").style.display = "block";
        clearInterval(slideTimer);
    }
    document.getElementById("wrapper").onmouseout = function(){
        document.getElementById("prevBtn").style.display = "none";
        document.getElementById("nextBtn").style.display = "none";
        document.getElementById("littleDotsWrapper").style.display = "none";
        slideTimer = setInterval(next,1000);
    }
    
    //Initial
    showLittleDots();
    document.getElementById("prevBtn").style.display = "none";
    document.getElementById("nextBtn").style.display = "none";
    document.getElementById("littleDotsWrapper").style.display = "none";
    
    
    
</script>
    
</body>

</html>
JS 实例轮播图制作
码农公寓

相关文章
