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 相关文章推荐
json简单介绍
Jun 10 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
js中跨域方法原理详解
Jul 19 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
escape unescape的php下的实现方法
2007/04/27 PHP
表单提交验证类
2006/07/14 Javascript
offsetParent 算法分析
2010/04/05 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 可爱的大小写
2008/09/06 Python
详细介绍Python语言中的按位运算符
2013/11/26 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
挂牌仪式策划方案
2014/05/18 职场文书
职务任命书范本
2014/06/05 职场文书
检察院起诉书
2015/05/20 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
2019教师的学习计划
2019/06/25 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
vue实现锚点定位功能
2021/06/29 Vue.js
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
Redis实现短信验证码登录的示例代码
2022/06/14 Redis