JS简单实现图片上一张下一张操作

最新推荐文章于 2024-06-27 12:49:37 发布

辣姐什么鬼

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量4w

点赞数 13

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/52084323

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

简单实现了js的图片上一张下一张效果，没怎么做css美化单纯就是想记录一下js部分。

效果图：嘿嘿，wuli爽妹子镇图！！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>幻灯片</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    #picBox{
        margin:100px auto;
        width:600px;
        height:400px;
    }
    #pic{
        width:600px;
        height:400px;

    }
    #buttonBox{
        width:150px;
        margin:10px auto;
    }
</style>
<body>
<div id="picBox">
  <img src="s1.jpg" id="pic">
  <div id="buttonBox">
    <input type="button" value="上一张" onclick="pre();">
    <input type="button" value="下一张" onclick="next();">
  </div>
</div>
<script>
    var picArr=new Array("s1.jpg","s2.jpg","s3.jpg","s4.jpg");
    var index=0;
    function next(){
        index++;
        if(index==picArr.length){
            index=0;
        }
        document.getElementById("pic").src=picArr[index];
    }
    function pre(){
        index--;
        if(index<0){
            index=picArr.length-1;
        }
        document.getElementById("pic").src=picArr[index];
    }
</script>
</body>
</html>