JS实现的图片选择顺序切换和循环切换功能示例【测试可用】


Posted in Javascript onDecember 28, 2018

本文实例讲述了JS实现的图片选择顺序切换和循环切换功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片切换</title>
<style type="text/css">
#box{width:400px;margin:0 auto;}
#box>div{text-align: center;margin:10px auto;display: block;}
#box div>input{margin-left: 5px;border-radius: 3px;border:1px solid #ccc;}
#box>p{text-align: center;}
#content{width:400px;height:400px;margin:0 auto;position: relative;border:10px solid #ccc;}
#content a{width:40px;height:40px;background:#000;border:5px solid #fff;position: absolute;top:175px;text-align: center;text-decoration: none;line-height: 40px;color:#ccc;font-weight: 900;filter: alpha(opacity:40);opacity: 0.4;}
#content a:hover{filter: alpha(opacity:90);opacity: 0.9;}
#prev{left:10px;}
#next{right:10px;}
#text,#span{position: absolute;bottom: 0;left:0;width:400px;height:30px;background:#000;line-height: 30px;text-align: center;color: #fff;filter: alpha(opacity:80);opacity: 0.8;}
#text{margin:0;bottom: 0;}
#span{top:0;}
#img{width:400px;height:400px;}
</style>
<script type="text/javascript">
   window.onload=function(){
   var oPrev=document.getElementById('prev');
   var oNext=document.getElementById('next');
   var oText=document.getElementById('text');
   var oSpan=document.getElementById('span');
   var oImg=document.getElementById('img');
   var oBtn1=document.getElementById('btn1');
   var oBtn2=document.getElementById('btn2');
   var oP1=document.getElementById('p1');
   var arrUrl=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
   var arrText=['baby','冰冰','唐嫣','杨幂'];
   var num=0;
   //初始化
   function fnTab(){
   oSpan.innerHTML=num+1+'/'+ arrText.length;
   oText.innerHTML=arrText[num];
   oImg.src=arrUrl[num];
      };
      fnTab();
   oBtn1.onclick=function(){
    oNext.onclick=function(){
    num++;
    if(num==arrText.length){
     num=0;
    }
     fnTab();
   };
    oPrev.onclick=function(){
    num--;
    if(num==-1){
     num=arrText.length-1;
    }
     fnTab();
   };
    /*oPrev.onclick=function(){
     if(0<num){
      num--;
      fnTab();
     }else{
      num=arrText.length;
      num--;
     }
    };*/
   };
    oBtn2.onclick=function(){
    oP1.innerHTML = '图片只能到最后一张或第一张切换';
    oNext.onclick=function(){
    if(num==arrText.length-1){
     alert('这是最后一张了。。');
    }else{
     num++;
    }
    /*if(num==arrText.length){
     alert('这是最后一张了。。');
    }*/
     fnTab();
   };
    oPrev.onclick=function(){
    if(num==0){
    alert('这已经是第一张了,不能再切换了。。');
    }else{
     num--;
    }
     fnTab();
   };
   };
   /* oNext.onclick=function(){
    num++;
    if(num==arrText.length){
    num=0;
    }
    fnTab();
   };
   oPrev.onclick=function(){
    num--;
    if(num==-1){
    num=arrText.length-1;
    }
    fnTab();
   };*/
   };
</script>
</head>
<body>
  <div id="box">
   <div>
    <input id="btn1" type="button" value="循环切换">
    <input id="btn2" type="button" value="顺序切换">
   </div>
   <p id="p1">图片可以从最后一张跳到第一张循环切换</p>
  </div>
  <div id="content">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev"><</a>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next">></a>
    <p id="text">图片文字加载中......</p>
    <span id="span">数量正在计算中......</span>
    <img id="img" />
  </div>
</body>
</html>

这是我使用js做的图片切换,可以选择顺序切换也可以选择循环切换顺序切换到最后一张会有提示。

本机测试运行效果如下:

JS实现的图片选择顺序切换和循环切换功能示例【测试可用】

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
Angular使用Restful的增删改
Dec 28 #Javascript
原生js实现公告滚动效果
Jan 10 #Javascript
微信小程序实现文字无限轮播效果
Dec 28 #Javascript
小程序实现左右来回滚动字幕效果
Dec 28 #Javascript
原生JS实现的自动轮播图功能详解
Dec 28 #Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
微信小程序实现简单跑马灯效果
May 26 #Javascript
You might like
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
pytorch实现线性拟合方式
2020/01/15 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
质检部部长职责
2013/12/16 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
酒鬼酒广告词
2014/03/21 职场文书
驾驶员培训方案
2014/05/01 职场文书
实习班主任自我评价
2015/03/11 职场文书
教师节主持词开场白
2015/05/29 职场文书
南京大屠杀观后感
2015/06/02 职场文书
企业年会祝酒词
2015/08/11 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript