JS实现斗罗大陆轮播图，新手入门很容易理解，几步就搞定了

最新推荐文章于 2020-07-02 19:49:04 发布

原创最新推荐文章于 2020-07-02 19:49:04 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一个简单的网页图片轮播效果实现方案，包括HTML结构、CSS样式和JavaScript交互逻辑。通过按钮点击或自动切换的方式展示图片集合。

预览效果

废话不多说，直接上码。One word go！jia ！jia ！jia！

HTML代码：

<div class="div">
    <button class="button1" onclick="preImg()">上一张</button>
    <button class="button2" onclick="nextImg()">下一张</button>
    <br />
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3484867728,1442783722&fm=26&gp=0.jpg" id="imgs" width="600px" />
</div>

CSS代码：

.div{position: relative;text-align: center}
.button1{position: absolute;top: 25px;left: 300px}
.button2{position: absolute;top: 25px;right: 300px}

JS代码：

//创建图片数组
var imgArr = [
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3484867728,1442783722&fm=26&gp=0.jpg',
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=710776287,3294690783&fm=26&gp=0.jpg',
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=204391119,477738753&fm=11&gp=0.jpg',
    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1977418245,1101263902&fm=26&gp=0.jpg',
    'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=454051213,3483702548&fm=26&gp=0.jpg'
];

var i = 0;
function nextImg() {
    var next = document.getElementById("imgs");
    next.src = imgArr[i];
    i++;
    if(i == 4){
        i=0;
    }
}

function preImg() {
    var next = document.getElementById("imgs");
    next.src = imgArr[i];
    if(i == 0){
        i=5;
    }
    i--;
}

//自动切换
function play(){
    timer=setInterval(function(){
        nextImg();
    },2000);
}

//停止切换
function stop(){
    clearInterval(timer)
}
play();
document.getElementById("imgs").onmouseover =  stop;
document.getElementById("imgs").onmouseout =  play;

写得寡丑，用我们贵州话来说，写哈看看在博客上的效果。