javascript图片切换综合实例(循环切换、顺序切换)


Posted in Javascript onJanuary 13, 2016

本文实例为大家介绍了javascript图片切换的两种方式,循环切换以及顺序切换的实例代码,分享给大家供大家参考,具体内容如下

<html>
 <head>
  <meta charset="utf-8">
  <style>
  p{margin:0;}
  input{border:none;outline: none;margin:0;padding:0;}
   img{width:300px;height:300px;}
   #loop{margin-left:50px;background:#c80;width:60px;height:40px;font-size:14px;line-height:20px;text-align: center;}
   #order{margin-left:50px;background:#c80;width:60px;height:40px;font-size:14px;line-height:20px;text-align:center;}
   div{width:300px;height:300px;position:relative;}
   span{position:absolute;left:0;top:0;width:300px;height:20px;font-size:14px;line-height:20px;background:#000;opacity:0.5;color:#fff;text-align: center;}
   div p{position:absolute;left:0;bottom:0;width:300px;height:20px;font-size:14px;line-height:20px;text-align: center;color:#fff;background:#000;opacity:0.5;}
   div input{position:absolute;width:60px;height:60px;top:100px;background:pink;}
   #back{left:0;}
   #next{right:0;}
  </style>
  <script type="text/javascript">
   window.onload=function(){
   //循环切换
   var oNext=document.getElementById("next");
   var oBack=document.getElementById("back");
   var oImg=document.getElementById("img");
   var oText=document.getElementById("text");
   var oSpan=document.getElementById("span");
   var oLoop=document.getElementById("loop");
   var Oorder=document.getElementById('order');
   var oText1=document.getElementById("text1");
   var aImg=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
   var aText=["图片1","图片2","图片3","图片4"];
 
   var num=0;
   //点击下一张事件
   function next(){
    num=num+1; //每次加一
    //进行判断,如果num大于最后一张时,图片返回第一张
    //// 1 2 3 4
    if(num>aImg.length-1){
      
     num=0;
    }
    oImg.src=aImg[num];
    oText.innerHTML=aText[num];//图片信息变化,与数组关联
    oSpan.innerHTML=(num+1)+"/"+aImg.length;//数量变化,与数组关联
    //alert(num);
    
   }
    function back(){
    num=num-1;
    //进行判断,如果图片小于第一张时,图片返回最后一张
    if(num<0){
     num=aImg.length-1;
    }
    oImg.src=aImg[num];
    oText.innerHTML=aText[num];//图片信息变化,与数组关联
    oSpan.innerHTML=(num+1)+"/"+aImg.length;//数量变化,与数组关联
   }
   function next1(){
    num=num+1; //每次加一
    //进行判断,如果num大于最后一张时,弹出警告并把图片定在最后一张
    //// 1 2 3 4
    if(num>aImg.length-1){
      
     num=aImg.length-1;
     alert("最后一张了");
    }
    oImg.src=aImg[num];
    oText.innerHTML=aText[num];
    oSpan.innerHTML=num+1+"/"+aImg.length;
    //alert(num);
    
   }
   function back1(){
    num=num-1;
    //进行判断,如果图片小于第一张时,弹出警告并把图片定在第一张
    if(num<0){
     num=0;
     alert("已经是第一张了");
    }
    oImg.src=aImg[num];
    oText.innerHTML=aText[num];
    oSpan.innerHTML=num+1+"/"+aImg.length;
   }
 
   oNext.onclick=next;
   oBack.onclick=back;
   oLoop.onclick=function(){
     oText1.innerHTML="图片可以从第一张到最后一张循环切换";
     oNext.onclick=next;
     oBack.onclick=back;
   }
   Oorder.onclick=function(){
     oText1.innerHTML="图片只能从第一张到最后一张顺序切换";
    oNext.onclick=next1;
    oBack.onclick=back1;
 
   }
 
 
   }
  
  </script>
 </head>
 <body>
  <input id="loop" type="button" name="" value="循环切换"/>
  <input id="order"type="button" name="" value="顺序切换"/>
  <p id="text1">图片可以从第一张到最后一张循环切换</p>
  <div>
  <input id="back" type="button" name="" value="上一张"/>
  <input id="next" type="button" name="" value="下一张"/>
   
   <img id="img" src="img/1.jpg"/>
   <span id="span">1/4</span>
   <p id="text">图片1</p>
  </div>
 
   
 </body>
</html>

图片切换即两张图片轮流切换代码:

<html lang="en">
 <head>
  <meta charset="utf-8">
  <style>
   #text{width:200px;height:200px;font-size:40px;line-height:40px;text-align: center;}
   img{width:200px;height:200px;}
  </style>
  <script type="text/javascript">
   window.onload=function(){
   var oBtn=document.getElementById("btn");
   var oImg=document.getElementById("img");
   var oText=document.getElementById("text");
   var onOff=true;
   oBtn.onclick=function(){
    if(onOff){
     oImg.src="img/7.jpg";
     oText.innerHTML="图片2";
     onOff=false;
    }
    else{
     oImg.src="img/5.jpg";
     oText.innerHTML="图片1";
     onOff=true;
    }
   }
 
  }
  </script>
 </head>
 <body>
  <input id="btn" type="button" name="" value="切换图片"/>
  <img id="img" src="img/5.jpg"/>
  <p id="text">图片1</p>
 
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习javascript程序设计有所帮助。

Javascript 相关文章推荐
浅谈javascript的数据类型检测
Jul 10 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
jquery悬浮提示框完整实例
Jan 13 #Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 #Javascript
jQuery简单操作cookie的插件实例
Jan 13 #Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 #Javascript
javascript中的作用域和闭包详解
Jan 13 #Javascript
JSON+Jquery省市区三级联动
Jan 13 #Javascript
Easyui form combobox省市区三级联动
Jan 13 #Javascript
You might like
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
php session 检测和注销
2009/03/16 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
图片完美缩放
2006/09/07 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
仿京东快报向上滚动的实例
2017/12/13 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
SQL SERVER面试资料
2013/03/30 面试题
进口业务员岗位职责
2014/04/06 职场文书
留学推荐信范文
2014/05/10 职场文书
施工工地安全标语
2014/06/07 职场文书
优秀应届生求职信
2014/06/16 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
2019学生会干事辞职信
2019/06/27 职场文书