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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
jqgrid 简单学习笔记
May 03 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
div模拟选择框示例代码
Nov 03 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 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
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
php中final关键字用法分析
2016/12/07 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python实现哈希表
2014/02/07 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Django model反向关联名称的方法
2018/12/15 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
python小白切忌乱用表达式
2020/05/29 Python
大学生大二自我鉴定
2013/10/28 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
团队经理竞聘书
2014/03/31 职场文书
精神文明建设标语
2014/06/16 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
婚前保证书范文
2015/02/28 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015年招生工作总结
2015/05/04 职场文书
教师研修随笔感言
2015/11/18 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
我收到了德劲DE1107
2022/04/05 无线电