轮播图创意案例_创意轮播图-优快云博客

该博客展示了如何利用JavaScript创建一个简单的轮播图案例。代码中定义了图片数据，通过定时器动态改变图片的src属性和对应的标题，同时实现了在特定条件下改变轮播图边框阴影效果。这个案例对于初学者理解DOM操作和JavaScript动画原理非常有帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

演示最近学习JS做了一个轮播图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
.img-box{
    height:400px;
    width: 270px;

    margin-top: 50px;
    margin-left: 120px;
    border: darkgray solid ;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(4, 6, 55, 0.55);
}
.pic{
    position: absolute;
    left: 100px;
    top: 100px;
    border-radius: 20px;
    height: 400px;
    width: 260px;

}
.text{
    text-align: center;
    font-family: Arial;
}
    </style>
</head>

<body>
<div class="img-box">
    <img class="pic" src = "images/1.jpg" alt="第一章图的描述信息">
    <div>
        <h3 class="text" > My Love 1</h3>
    </div>
</div>
<script>
    let data = [{imgSrc: 'images/1.jpg',title: 'My Love 1'},
        {imgSrc: 'images/2.jpg',title: 'My Love 2'},
        {imgSrc: 'images/3.jpg',title: 'My Love 3'},
        {imgSrc: 'images/4.jpg',title: 'My Love 4'},
        {imgSrc: 'images/5.jpg',title: 'My Love 5'},]
    let pic = document.querySelector('.pic')
    let text = document.querySelector('.text')
    let box=document.querySelector('.img-box')
    //记录图片张数
    let i=0
    //开启定时器
    setInterval(function (){
        i++
        //修改图片src属性
        pic.src= data[i].imgSrc
        text.innerHTML=data[i].title
        if(i===data.length-1){
        i=-1
        }
        if(i===2){
            box.style.boxshow = ' box-shadow: 0 15px 30px rgba(210, 21, 240, 0.55)';
        }
    },1000)
</script>
</body>
</html>