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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
js微信分享接口调用详解
Jul 23 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
vue数据字典取键值项目的字典问题
Apr 12 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
You might like
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
smarty自定义函数用法示例
2016/05/20 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
python列表与元组详解实例
2013/11/01 Python
Python实现单词翻译功能
2017/06/06 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
django云端留言板实例详解
2019/07/22 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python循环输出三角形图案的例子
2019/11/22 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
指针和引用有什么区别
2013/01/13 面试题
酒店总经理职务说明书
2014/02/26 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
八年级历史教学反思
2016/02/19 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL