首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Js图片点击切换轮播实现代码

Posted in Javascript onJuly 27, 2020

图片点击切换

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
      window.onload=function(){
        var btn1=document.getElementById("pre");
        var btn2=document.getElementById("next");
        var img=document.getElementById("img1");
        var imgarr=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg"];
        var index=0;
        var info=document.getElementById("pd");
          info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";        
        btn1.onclick=function(){  
          index--;
          if(index<0){
            index=imgarr.length-1;
          }
          img.src=imgarr[index];
            info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";
        };
        btn2.onclick=function(){  
          index++;
          if(index>imgarr.length-1){
            index=0;
          }
          img.src=imgarr[in000dex];
          info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";
        };
      };
    </script>
    <style type="text/css">
      *{
        padding: 0;
        margin:0;
      }
      .outer{
        width:640px;
        height:453px;
        margin:100px auto;
        
        text-align: center;
      }
      
    </style>
  </head>
  <body>
    <div class="outer">
      <p id="pd"></p>
      <img src="images/1.jpg" id="img1" />
      <button id="pre">上一张</button>
      <button id="next">下一张</button>
       
    </div>
  </body>
</html>

实现效果

Js图片点击切换轮播实现代码

轮播

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{
        padding:0px;
        margin: 0px;
      }
      
      #outer{
        position: relative;
        width:660px;
        height:425px;
        margin:50px auto ;
        background:yellow;
        padding:10px 0;
        overflow: hidden;
      }
      #imglist{
        position: absolute;
        list-style: none;
        /*
         * 设置偏移量
         * 
         * 
         */
        left:0px;
       
      }
      #imglist li{
        margin: 0 10px;
        float:left;
      }
      
      #navDiv{
        position: absolute;
        bottom: 15px;
        /*
         * 设置left值
         * outer宽度 640
         * navDiv宽度 30*5=125
         * 640-125=515
         * 515/2=257.5
         * left:257.5px;
         */
        left:0;
        
      }
      #navDiv a{
        float:left;
        width:20px;
        height:20px;
        background:#ff1;
        opacity: 0.5;
        /*兼容IE8的透明*/
        filter:alpha(opacity=50);
        margin: 0 5px;
      }
      #navDiv a:hover{
        background:red;
      }
    </style>
    <script type="text/javascript" src="tools.js"></script>
    <script type="text/javascript">
    
      window.onload=function(){
        var imglist=document.getElementById("imglist");
        var navDiv=document.getElementById("navDiv");
        var outer=document.getElementById("outer");
        //获取页面所有的img标签
        var imgarr=document.getElementsByTagName("img");
        //获取页面所有的A标签
        var allA=document.getElementsByTagName("a");
        //默认显示图片的索引
        var index=0; 
        //设置
        allA[index].style.background="black";
        //设置ul的长度
        imglist.style.width=660*imgarr.length+"px";
        //设置navDiv的left值
        navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
       
        //定义一个定时器标识
        var timer;
        
        //点击超链接切换到指定的图片
        //为所有的超链接绑定单击响应函数
        for(var i=0;i<allA.length;i++){
          //为每一个超链接都添加一个NUM属性
          allA[i].num=i;
          //为超链接绑定单击响应函数
          allA[i].onclick=function(){
            //关闭自动切换
            clearInterval(timer);
          //获取点击超链接的索引，并将其设置为index
          index=this.num;
          //切换图片
          
          //imglist.style.left=index*-660+"px";
          
          setA();
          move(imglist,20,-660*index,"left",function(){
            //动画执行完后，再执行自动切换
             autoChange();
          }); 
          
          };
        }
        //自动切换图片
        autoChange();
        
        //创建一个方法来设置选中的A
        function setA(){
          
          //判断是不是最后一张照片
          if(index>=imgarr.length-1){
            index=0;
            
          //如果是最后一张，就把imglist移到0
          imglist.style.left=0+"px";
          }
          for(var j=0;j<allA.length;j++){
            //去掉内联样式，只剩下样式表的样式
            allA[j].style.background="";
          }
          
          allA[index].style.background="black";
          
        }; 
        
        function autoChange(){
          timer=setInterval(function(){
            index++;
            index%=imgarr.length;
            move(imglist,20,-660*index,"left",function(){
            setA();
            });
          },3000);
        };
 
      };
      
    </script>
  </head>
  <body>
   <!--创建一个外部的div，来作为大的容器-->
    <div id="outer">
      <!--创建一个ul，用来放置图片-->
      <ul id="imglist">
        <li>
          <img src="images/1.jpg" />
        </li>
        <li>
          <img src="images/2.jpg" />
        </li>
        <li>
          <img src="images/3.jpg" />
        </li>
        <li>
          <img src="images/4.jpg" />
        </li>
        <li>
          <img src="images/5.jpg" />
        </li>
        <li>
          <img src="images/1.jpg" />
        </li>
      </ul>
      <div id="navDiv">
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        
      </div>
    </div>
  </body>
</html>

tools.js

//动画函数
        /*参数
         * -1.obj 对象
         * -2.speed 速度
         * -3.target 执行动画的目标
         * -4.arrt 要变化的样式
         * -5.callback:回调函数 将会在动画执行完后执行
         */
      
        function move(obj,speed,target,arrt,callback){
          //关闭上一次定时器
            clearTimeout(obj.timer);
            //判断速度的正负值
            //如果从0向800移动则为正
            //如果从800向0移动则为负
            var current=parseInt(getStyle(obj,arrt));
            if(current>target){
              speed=-speed;
            }
            //开启一个定时器
            //为obj添加一个timer属性，用来保存它1自己的定时器的标识
            obj.timer=setInterval(function(){
              
            //获取原来的left值
            var oldvalue=parseInt(getStyle(obj,arrt));
            //在旧值的基础上增加
            var newvalue=oldvalue+speed;
            if(speed<0&&newvalue<target||speed>0&&newvalue>target)
            {
              newvalue=target;
            }
            obj.style[arrt]=newvalue+"px";
            //当元素到达target关闭定时器
            if(newvalue===target||newvalue===target){
            clearTimeout(obj.timer);
            //动画执行完 执行函数
            callback&&callback();
          }
          
        },30);
        };

实现效果

Js图片点击切换轮播实现代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Js图片点击切换轮播实现代码

- Author -

-零

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
在vue中实现echarts随窗体变化
Jul 27 #Javascript
Vue组件跨层级获取组件操作
Jul 27 #Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 #Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 #Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 #Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 #Javascript
vue键盘事件点击事件加native操作
Jul 27 #Javascript
Sentry(1) svg(1) xps(1) 403(1) macos(1) 404(1) sout(1) 输入法(2) Sunmao(1) CAD(1)
You might like
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP学习笔记（二）：变量详解
2015/04/17 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
Python中的pprint折腾记
2015/01/21 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python远程方法调用实现过程解析
2020/07/28 Python
酒店执行总经理岗位职责
2013/12/15 职场文书
简单租房协议书
2014/10/21 职场文书
综合办公室岗位职责
2015/04/11 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python