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图片点击切换轮播实现代码

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

Javascript 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
在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
You might like
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
Laravel 5 学习笔记
2015/03/06 PHP
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
JS实现拼图游戏
2021/01/29 Javascript
js实现随机抽奖
2020/03/19 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python类和继承用法实例
2015/07/07 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Python API len函数操作过程解析
2020/03/05 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
美德好少年事迹材料
2014/01/19 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
小学教师培训感言
2014/02/11 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python