首页
所有分类
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 相关文章推荐
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
详谈Angular 2+ 的表单（一）之模板驱动型表单
Apr 25 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
关于Vue Router的10条高级技巧总结
May 06 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
线程池(1) ForkJoin(1) Springboot-cli(1) JAVA(88) 主题(1) FutureTask(3) Spring Data JPA(4) Repository接口(3) Android(19) 池化技术(1)
You might like
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
详解vue-Resource（与后端数据交互）
2017/01/16 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
Node.js+ELK日志规范的实现
2019/05/23 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队！”
2015/12/27 DOTA
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
python实现石头剪刀布程序
2021/01/20 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Django实现文件上传和下载功能
2019/10/06 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
医学专业应届生的自我评价
2014/02/28 职场文书
春季防火方案
2014/05/10 职场文书
计划生育证明格式范本
2014/09/12 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
党员评议个人总结
2014/10/20 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
Python打包为exe详细教程
2021/05/18 Python
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers