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

简单实现了js的图片上一张下一张效果，没怎么做css美化单纯就是想记录一下js部分。效果图：嘿嘿，wuli爽妹子镇图！！ <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8">&amp

辣姐什么鬼

40986人浏览 · 2016-08-01 11:41:21

辣姐什么鬼 · 2016-08-01 11:41:21 发布

简单实现了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>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport