WEB前端-轮播图

高显

于 2024-04-20 11:37:30 发布

阅读量384

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/gaoxiangaoxian/article/details/137994210

版权

本文详细介绍了如何使用JavaScript操作DOM元素，实现图片轮播功能，以及鼠标事件触发图片轮播的暂停和恢复，以及小圆点点击切换图片的效果。

摘要由CSDN通过智能技术生成

获取盒子元素，并循环

var content = this.document.getElementsByClassName("content")[0]
var li = content.getElementsByTagName("li")
function fun (i, j){
    li[i].style.opacity = 1
    li[j].style.opacity = 0
    li[i+3].style.backgroundColor = "black"
    li[j+3].style.backgroundColor = ""
}
fun(0, 1)
var i = 0
function auto(){
    i++
    if(i>=3){
        i=0
        fun(0,2)
    }
    else{
        fun(i, i-1)
    }
}
timer = this.setInterval(auto, 2000)

鼠标移入图片，轮播图停止轮播；鼠标移出图片，轮播图继续轮播

content.onmouseover = function(){
    clearInterval(timer)
}
content.onmouseout = function(){
    timer = setInterval(auto, 2000)
}

点击小圆点，转移至相对图片

for(j=0;j<3;j++){
    li[j+3].index = j
    li[j+3].onclick = function(){
        fun(this.index, i)
        i = this.index
    }
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
        .overall{
            width: 900px;
            height: 500px;
            align-items: center;
            margin: 5% auto;        
        }
        .content{
            position: relative;
            height: 400px;
        }
        .content ul{
            list-style-type: none;
        }
        .content ul>li{
            position: absolute;
            width: 600px;
            height: 300px;
            transition: 1s;
            opacity: 0;
        }
        .content ul>li img{
            width: 900px;
            height: 500px;
            border-radius: 5%;
            border: 5px solid black;
        }
        .content ol{
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 75px);
            grid-template-rows: auto;
            grid-gap: 1em;
            gap:1em;
            float:right;
            margin-top: 450px;
            list-style: none;
            top: 0;
            left: 0;
        }
        .content ol li{
            width: 20px;
            height: 20px;
            font-size: 15px;
            line-height: 20px;
            float: left;
            text-align: center;
            border-radius: 2em;
            border: 5px solid grey; 
            
        }
    </style>
</head>
<body>
	<div class="overall">
        <div class="content">
            <ul>
                <li><img src="./素材/屏幕截图 2024-04-07 225349.png" alt=""></li>
                <li><img src="./素材/屏幕截图 2024-03-31 191228.png" alt=""></li>
                <li><img src="./素材/屏幕截图 2024-04-07 225350.png" alt=""></li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>        
    </div>
	<script>
    var content = this.document.getElementsByClassName("content")[0]
    var li = content.getElementsByTagName("li")
    function fun (i, j){
        li[i].style.opacity = 1
        li[j].style.opacity = 0
        li[i+3].style.backgroundColor = "black"
        li[j+3].style.backgroundColor = ""
    }
    fun(0, 1)
    var i = 0
    function auto(){
        i++
        if(i>=3){
            i=0
            fun(0,2)
        }
        else{
            fun(i, i-1)
        }
    }
    timer = this.setInterval(auto, 2000)
    content.onmouseover = function(){
        clearInterval(timer)
    }
    content.onmouseout = function(){
        timer = setInterval(auto, 2000)
    }
    for(j=0;j<3;j++){
        li[j+3].index = j
        li[j+3].onclick = function(){
            fun(this.index, i)
            i = this.index
        }
    }
	</script>
</body>
</html>

效果

20240420_112337