用javascript实现图片的切换

先把相应的图片路径添加到存储图片路径的数组imgArr里，之后运行代码就可以实现图片的切换了

以下是代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }

           #outer{
               /* position: fixed; */
               width: 2000px;
               /* height: 1200px; */
               margin: 0 auto;
               /* padding: 20px; */
               /* background-color: greenyellow; */
               /*设置文本居中*/
               text-align: center;
           }

</style>

       <script type="text/javascript">
           window.onload = function(){

               /*
               *   点击按钮切换图片
               *        点击上一张，切换到上一张
               *        点击下一张，切换到下一张
               */

               //获取两个按钮
               var prev = document.getElementById("prev");
               var next = document.getElementById("next");

               //获取提示文字对象
               var info = document.getElementById("info");

               /*
               *   要切换图片就是要修改img标签的src属性
               */

               var img = document.getElementsByTagName("img")[0];
               //这是一个数组
               //alert(img);

               //创建一个数组来保存一个图片的路径
               var imgArr = ["img/02.png","img/05.png","img/06.png","img/07.png","img/10.png","img/11.png","img/12.png"];


               //创建一个变量,来保存当前正在显示图片的索引
               var index = 0;

               info.innerHTML = "一共"+imgArr.length+"张，现在是第"+(index+1)+"张~~~";
               //分别为两个按钮来绑定单击响应函数
               prev.onclick = function(){

                   //alert("上一张");
                   index--;
                   if(index <= 0){
                       index = 0;
                   }
                   //切换图片就是要修改img标签的src属性
                   info.innerHTML = "一共"+imgArr.length+"张，现在是第"+(index+1)+"张~~~";
                   img.src = imgArr[index];

               };

               next.onclick = function(){

                   //alert("下一张");
                   index++;
                   if(index >= imgArr.length-1){
                       index = imgArr.length-1;
                   }
                   //切换图片就是要修改img标签的src属性
                   info.innerHTML = "一共"+imgArr.length+"张，现在是第"+(index+1)+"张~~~";
                   img.src = imgArr[index];

               };


           };

           /* window.οnscrοll=function(){
               var prev = document.getElementById("prev");
               var t = document.documentElement.scrollTop || document.body.scrollTop;
               prev.style.top=t+"px";
               var next = document.getElementById("next");
               var t = document.documentElement.scrollTop || document.body.scrollTop;
               next.style.top=t+"px";
               } */

       </script>

   </head>
   <body>
       <div id="outer">

           <p id="info"></p>

           <img src="img/02.png" alt="烟花"/>
           <br />
           <button id="prev">上一张</button>
           <button id="next">下一张</button>

       </div>
   </body>
</html>

用javascript实现图片的切换相关推荐

JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻
新闻展示,滚动新闻程序说明原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果. 首先需要一个容器,程序会自动设置容器overflow为hidden,如果 ...
[JS]图片自动切换效果（学习笔记）
上次在下载的网页中看到 javascript实现图片自动切换效果: <style text="text/css"> /*图片滚动栏*/ .container, .con ...
模仿微信朋友圈图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存
模仿微信朋友圈图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存 2017年08月10日 12:11:38 阅读数:2311 previewImage-mobile 仿 ...
怎么使用javascript制作图片切换
** 怎么使用javascript制作图片切换 ** 轮播图在网页中是一个不可少的存在,其实只做起来还是相对而言还是比较简单的,来看看是怎么制作的. 这里是css的代码: #imgInfo,.clic ...
JavaScript之图片切换（类似淘宝商品图切换）
JavaScript之图片切换下边给出几种方法进行图片切换: 方法一(小白专用款!简单易懂) 下边附上代码: <!DOCTYPE html> <html lang="en ...
ASP.NET javascript实现图片切换
①Default.aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
jquery图片播放切换插件
点击这里查看效果可自定义数字样式和左右点击按钮这个更好: 移入按钮切换版本更多图片轮播以下是HTML文件代码: 1 <!DOCTYPE html PUBLIC "-//W3C/ ...
各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载:
最近看到各大门户站都有一个幻灯片特效,而且不是简单的JS特效,是FLASH和JS结合而成的觉得非常不错,今天在IT世界的原代码中查看了一下,特此发布!希望大家喜欢!有什么问题可以与我研究!<a ...
JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单
前天帮人做个网页作业,大概要求就是使用两个按钮控制图片的切换,在页面右上角出现一个图片按钮,点击这个按钮出现下拉菜单. 第一个要求还是很简单的,第二个多花了我几个小时的时间,因为我只做过select下 ...

用javascript实现图片的切换

用javascript实现图片的切换相关推荐

最新文章

热门文章