今天给大家介绍下怎么用 JS 实现图片轮播效果。

原理描述：

使用JS实现轮播的原理是这样的：

假设初始的情况，下图一个网格代表一个图，初始时，显示1 ：

代码实现：
1 JS 代码：

<script type="text/javascript">
    window.οnlοad=function(){
        //获得ul的元素
        var imgList=document.getElementById("imgList");
        //获得图片的数组
        var imgArr=document.getElementsByTagName("img");
        var navId=document.getElementById("navId");
        var outer=document.getElementById("outer");
        imgList.style.width=520*imgArr.length+"px";
        //设置navId的位置 使其居中
        navId.style.left=(outer.offsetWidth-navId.offsetWidth)/2+"px";
        //得到所有的a 标签 如果有其他的A的话  这里需要注意要使用navId子元素的a 
        var allA=document.getElementsByTagName("a");
        var index=0;
        allA[index].style.backgroundColor='black';//设置默认的a为黑色
        for(var i=0;i<allA.length;i++){
            allA[i].num=i;
            //alert(allA[i].num);
            allA[i].οnclick=function(){
                clearInterval(timer);
                index=this.num;
                /* imgList.style.left= -520*index+"px"; */
                setA();
                move(imgList,"left",-520*index,50,function(){
                    autoChange();
                });
            };
        }
        
        function setA(){
            //alert(index);
            //当indcx值比图片的数目多的时候 就归0
            if(index>=imgArr.length-1){
                index=0;
                imgList.style.left=0;
            } 
            for(var i=0;i<allA.length;i++){
                //去掉未点击的颜色  仍然保留a : hover有用
                allA[i].style.backgroundColor="";
            }
            allA[index].style.backgroundColor="black";
        }
        var timer;
        function autoChange(){
            
            timer=setInterval(function(){
                index++;
                index%=imgArr.length;
                move(imgList,"left",-520*index,20,function(){
                        setA();
                    });
            },2000); 
        }
        autoChange();

//可以根据 target 参数进行判断 向哪个方向移动
      function move(obj,attr,target,speed,callback){
          var current=parseInt(getStyle(obj,attr));
          //alert(current);
          //根据目标的位置来判定 speed的值是正是负
          if(current>target){
              speed=-speed;
          }
          //自定义对象定时器 防止对象之间的混乱操作 
          clearInterval(obj.timer);
          //alert(oldValue);
          obj.timer=setInterval(function(){
              var oldValue=parseInt(getStyle(obj,attr));
              var newVal=oldValue+speed;
              //如果移动的越界 进行重置
              if((speed<0 && newVal<=target) || (speed>0 && newVal>=target)){
                  newVal=target;
              }
              obj.style[attr]=newVal+"px";
              if(newVal==target){
                  clearInterval(obj.timer);
                  callback && callback();//回掉函数 先判断 有就执行 没有不执行
              }  
          },30);
      }
      
      //obj:获取样式元素
       //name:获取样式名
       function getStyle(obj,name){
           if(window.getComputedStyle){
               return getComputedStyle(obj,null)[name];
           }else{
               return obj.currentStyle[name];
           }
       }
    }
</script>

2  HTML 代码：

<div id="outer">
    <ul id="imgList">
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/1.jpg"></li><!-- 增加这个为了实现轮播无缝切换 -->
    </ul>
    <div id="navId">
        <a href="javascript:0"></a>
        <a href="javascript:0"></a>
       <a href="javascript:0"></a>

</div>
</div>

3 CSS代码：

<style type="text/css">
   *{
      margin:0px;
      padding:0px;
   }
   #outer{
      width:520px;
      height:500px;
      margin:50px auto;
      background-color:greenyellow;
      padding:10px 0;
      /* 开启相对定位*/ 
      position:relative;
      overflow:hidden;/* 将超出的部分隐藏 */
      /* border:3px solid greenyellow */
   }
   #imgList{
      /*去除li的点*/
      list-style:none;
      /*开启绝对定位 */
      position:absolute;
      /*设置ul的宽度*/
     /*  width:1560px; */
   }
   #imgList li{
       /*为图片设置浮动*/
       float:left;
       margin:0 10px;/*设置左右外边距*/
   }
   #navId{
      /* 开启绝对定位 */
     position:absolute;
     /*设置位置*/
     bottom:15px;
     /*设置该块的左偏移量，使其可以居中
     由于outer 宽 520 每个链接宽15+2*5=25 目前共三张图，则共宽75*/
     /* left:212px; */
   }
   #navId a{
     width:15px;
     height:15px;
     float:left;/* 设置超链接浮动 */
     margin:0 5px;
     background-color:red;
     opacity:0.5;
     /*兼容 IE8 设置透明度*/
     filter:alpha(opacity=50);
   }
   /*设置鼠标移入效果*/
   #navId a:hover{
       background-color:black;
   }
 
</style>
好的轮播图就到这里，希望对大家有用

JavaScript 实现图片轮播相关推荐

  1. javascript实现图片轮播_第2章 第9节 JavaScript(四)

    ● 知道哪些ES6,ES7的语法 参考回答: promise,await/async,let.const.块级作用域.箭头函数 ● promise和await/async的关系 参考回答: 都是异步编 ...

  2. Javascript实现图片轮播效果。

    用js做一个简单的图片轮播效果. 思路如下:用JavaScript来控制轮播的图片的样式(margin-left).用计时器来控制图片的自动播放.鼠标点击控制图片的翻页. 效果图如下.具有以下功能:1 ...

  3. javascript实现图片轮播（一次显示多图片）

    一 主要逻辑 //--------图片轮播设计--------- //让box和window相对滑动 //超出部分不显示 //让图像宽度等于window的百分之xx //上传图片 //根据图片个数创建 ...

  4. javascript实现图片轮播_手撸一个简易版轮播图(上)

    手撸一个简易版轮播图 实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局 简易版轮播图 < > 页面样式 .container{width: 60 ...

  5. 原生javascript实现图片轮播

    这里是css样式 * {margin: 0;padding: 0;}ul,li {list-style: none;}img {display: block;/*vertical-align: mid ...

  6. 使用JavaScript实现图片轮播，上一张后一张，循环播放

    轮播图在前端页面中经常用到,包括PC端和移动端. 我所写的轮播图的方法是在页面中设计好一张图片的位置,并且加上按钮"上一张","下一张","循环播放& ...

  7. 原生Javascript实现图片轮播效果

    首先引入js运动框架 1 function getStyle(obj,name){ 2 if(obj.currentStyle){ 3 return obj.currentStyle[name]; 4 ...

  8. JavaScript【图片轮播】

    JavaScript代码: <script type="text/javascript"> var arr= new Array; arr[0] = "ima ...

  9. Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)

    详情请查看http://aehyok.com/Blog/Detail/32.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

最新文章

  1. Array 数组去重 总结10方法（7）
  2. SAP R/3系统的R和3分别代表什么含义，负载均衡的实现原理
  3. 玩转GridView
  4. 从Proxy到Vue3数据绑定
  5. java set第n位_数据结构与算法——常用数据结构及其Java实现
  6. STL中的序列式容器——priority_queue（优先队列）
  7. 成为java高级工程师需要什么
  8. Excel大家来找茬，两列数据对比找出不同数据
  9. php 微信公众号超链接,微信公众帐号开发教程第8篇-文本消息中使用网页超链接_PHP教程...
  10. 打印机无法打印测试页
  11. python子图加标题_python – matplotlib的子图中的行和列标题
  12. 解剖点击量过亿的软文牛人是怎样炼成的？
  13. 分段三次埃尔米特插值
  14. 随机生成一个1 到100之间的整数，从键盘输入数字进行猜数，一共可以猜5次
  15. Google Earth Engine（GEE）——海洋总测深图数据集（GEBCO）
  16. android root 蓝牙,真正免root的蓝牙一键发送详细使用教程
  17. C语言-switch-case语句与多分支结构
  18. 帝国CMS和PHPCMS对比随谈
  19. Java中是值传递和引用传递
  20. iOS 实现背景颜色渐变的方式

热门文章

  1. 鸿合hiteboard驱动_【做您贴心伴侣-鸿合HiteBoard电子白板问世】PjTime.COM传统电子白板 新品快讯...
  2. 严格执行四项监督制度提高选人用人公信度
  3. 观看慕课老师milanlover视频JSP内置对象+getpost+request+response+请求转发与请求重定向
  4. Android中类ListPreference使用介绍
  5. 九阴真经 正在获取服务器列表信息,九阴真经生活心得高效获取指南
  6. 给学计算机男生起外号,学生时代，如果有人给你取这几个“外号”，说明关系真的很不错...
  7. 用Matlab生成歌曲,MATLAB制作歌曲
  8. 跟java有关的搞笑句子,搞笑又不失可爱的句子50句
  9. java动态分配数组大小_关于java：如何动态增加2D数组的大小
  10. 服务器放在机柜_一个标准服务器机柜能放多少台服务器