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 相关文章推荐
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
JS继承 笔记
Jul 13 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 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基础学习之变量的使用
2011/06/09 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
javascript实现数独解法
2015/03/14 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
python flask安装和命令详解
2019/04/02 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
2014年中秋寄语
2014/08/11 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python