经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JSJS库框架 » JavaScript » 查看文章
纯JS实现轮播图特效——详解
来源：cnblogs　　作者：littleboyck　　时间：2018/10/21 20:20:59　　对本文有异议 
  1.    <div id="slider">
  2.             
  3.             <div id="sliderImgs">
  4.                 <img src="img/mi04.jpg" width="1000px"/>
  5.                 
  6.                 <img src="img/mi01.jpg" width="1000px" title="oneImg"/>
  7.                 <img src="img/mi02.jpg" width="1000px" title="twoImg"/>
  8.                 <img src="img/mi03.jpg" width="1000px" title="threeImg"/>
  9.                 <img src="img/mi04.jpg" width="1000px" title="fourImg"/>
  10.                 
  11.                 <img src="img/mi01.jpg" width="1000px"/>
  12.                 
  13.                 <!--因为要做无缝滚动，所以要克隆第一张和最后一张，放到最后一张后面和最前面-->
  14.             </div>
  15.             
  16.             <div id="buttons">
  17.                 <ul>
  18.                     <li class="active"></li>
  19.                     <li></li>
  20.                     <li></li>
  21.                     <li></li>
  22.                 </ul>
  23.             </div>
  24.             <div>
  25.                 <span id="prev">&lt;</span>
  26.                 <span id="next">&gt;</span>
  27.             </div>
  28.         </div>
  29.

CSS部分

  1. <style type="text/css">
  2.             *{
  3.                 margin: 0;
  4.                 padding: 0;
  5.             }
  6.             /*禁止html元素别被鼠标选中,必须要写不然会有bug,--start*/
  7.             *{
  8.                 moz-user-select: -moz-none;
  9.                 -moz-user-select: none;
  10.                 -o-user-select:none;
  11.                 -khtml-user-select:none;
  12.                 -webkit-user-select:none;
  13.                 -ms-user-select:none;
  14.                 user-select:none;
  15.             }    
  16.             /*禁止html元素别被鼠标选中--end*/
  17.             
  18.             #slider{
  19.                 width: 1000px;                /*设置为图片宽度*/
  20.                 height: 376px;                /*设置为图片高度*/
  21.                 margin: 0 auto;
  22.                 margin-top: 100px;
  23.                 overflow: hidden;
  24.                 position: relative;
  25.                 /*border: 2px solid palegreen;*/
  26.             }
  27.             #sliderImgs{
  28.                 width: 600%;                /*几张图片就是  6*100%  */
  29.                 position: absolute;            /*必须设置绝对定位，才能使用left属性*/
  30.                 left: -1000px;                /*把第一张假图偏移出去*/                    
  31.                 /*border: 1px solid blue;*/
  32.             }
  33.             #sliderImgs img{
  34.                 float: left;
  35.             }
  36.             
  37.             
  38.             #buttons{
  39.                 width: 70px;
  40.                 position: absolute;
  41.                 z-index: 1;                /*设置图片堆叠属性，仅限于定位的元素使用。默认值为0，值越大，优先级越高*/
  42.                 bottom: 10px;
  43.                 left: 45%;
  44.                 background-color: rgba(255,255,255,0.4);
  45.                 
  46.                 padding-top: 4px;
  47.                 padding-bottom: 4px;
  48.                 border-radius: 9px;                    /*高度一半 = 8px + 10px (li的height) */
  49.                 /*border: 2px solid red;*/
  50.             }
  51.             #buttons ul{
  52.                 list-style-type: none;
  53.             }
  54.             #buttons ul li{
  55.                 float: left;
  56.                 margin-left: 6px;
  57.                 width: 10px;
  58.                 height: 10px;
  59.                 line-height: 10px;
  60.                 border-radius: 100%;
  61.                 background-color: #FFFFFF;
  62.             }
  63.             #buttons ul li:hover{
  64.                 cursor: pointer; /*手型光标*/
  65.                 background-color:#FF5000;
  66.             }
  67.             #buttons .active{
  68.                 background-color: #FF5000;
  69.             }
  70.             #next , #prev{
  71.                 position: absolute;
  72.                 z-index: 1;
  73.                 top: 43%;
  74.                 color: rgba(255,255,255,.9);
  75.                 font-family: "微软雅黑";
  76.                 font-size: 25px;
  77.                 text-align: center;
  78.                 display: block;
  79.                 width: 40px ;
  80.                 height: 40px;
  81.                 line-height: 40px;
  82.                 border-radius: 100%;
  83.                 background-color: rgba(0,0,0,.4);
  84.                 transition: width 0.3s ,height 0.3s ,line-height 0.3s ,border-radius 0.3s, text-align 0.3s ,ease 0.3s ;
  85.             }
  86.             #prev{
  87.                 left: 5%;
  88.             }
  89.             #next{
  90.                 right: 5%;
  91.             }
  92.             #next:hover{
  93.                 cursor: pointer; /*手型光标*/
  94.                 
  95.                 width: 44px;
  96.                 height: 44px;
  97.                 line-height: 44px;
  98.                 border-radius:100%;
  99.                 text-align: center;
  100.             }
  101.             #prev:hover{
  102.                 cursor: pointer; /*手型光标*/
  103.                 
  104.                 width: 44px;
  105.                 height: 44px;
  106.                 line-height: 44px;
  107.                 border-radius:100% ;
  108.                 text-align: center;
  109.             }
  110.         </style>

布局效果图：

 

 

JS部分

  1. <script type="text/javascript">
  2.             var doc = document;
  3.             var sliderId = doc.getElementById('slider');
  4.             var sliderImgsId = doc.getElementById('sliderImgs');
  5.             var imgs = sliderImgsId.getElementsByTagName('img');
  6.             var btnLi = doc.getElementById('buttons').getElementsByTagName('li');
  7.             var btnPrev = doc.getElementById('prev');
  8.             var btnNext = doc.getElementById('next');
  9.             
  10.             var imgsLength = imgs.length-2;                    //减去2个假图
  11.             var btnLiLength = btnLi.length;
  12.             var imgWidth = sliderId.clientWidth;            //获取图片宽度
  13.             var imgAnimateTimer = null;                        //图片animate定时器
  14.             var aotuPlayTimer = null;                        //自动播放定时器
  15.             var index = 0;                                    //当前图片默认为第一张
  16.             var speed = 0;                                  //动画速度,这个数必须是能被图片宽度500整除的。正负表示偏移方向
  17.             
  18.             /*非常重要*/
  19.             var isAnimate = false;                            //图片是否在动画状态。若在动画状态，此时动画没结束， 则不执行下一个动画。
  21.             sliderImgsId.style.left = -imgWidth+"px";        //初始化为第一张真图
  22.             
  23.             btnPrev.onclick = function(){
  24.                 if(isAnimate == false){        //图片不在动画状态才执行
  25.                     imgAnimate(imgWidth);
  26.                     index--;
  27.                     if(index<0){
  28.                         index = imgsLength-1;
  29.                     }
  30.                     selectBtn();
  31.                 }
  32.             }
  33.             btnNext.onclick = function(){
  34.                 if(isAnimate == false){
  35.                     imgAnimate(-imgWidth);
  36.                     index++;
  37.                     if(index>imgsLength-1){
  38.                         index = 0;
  39.                     }
  40.                     selectBtn();
  41.                 }
  42.             }
  43.             
  44.             
  45.             
  46.             for(var i = 0 ; i<btnLiLength;i++){
  47.                 btnLi[i].index = i;
  48.                 btnLi[i].onclick = function(){
  49.                     var toTargetImgOffset = (index - this.index)*imgWidth;    //负数sliderimgsId向左偏转，反之，向右
  50.                     if(toTargetImgOffset == 0){return;}
  51.                     
  52.                     if(isAnimate == false){
  53.                         imgAnimate(toTargetImgOffset);                        //方法的参数是局部参数
  54.                         index = this.index;
  55.                         selectBtn();
  56.                     }                    
  57.                     
  58.                 }
  59.             }
  60.             
  61.             function selectBtn(){
  62.                 for(var i = 0; i < btnLiLength; i++){
  63.                     if(btnLi[i].className == "active"){
  64.                         btnLi[i].className = "";
  65.                         break;
  66.                     }
  67.                 }
  68.                 btnLi[index].className = 'active'; 
  69.             }
  70.             
  71.             
  72.             /*动画函数*/
  73.             function imgAnimate(offset){
  74.                 var newLeft = parseInt(sliderImgsId.style.left) + offset;            //sliderImgsId.style.left永远获取都是当前图片偏移量
  75.                 var allTime = 400;                                                    //完成offset偏移量，总共所用时间。offset路程一定，时间越短，速度越快。此时间必须小于autoPlay间隔时间，否则，图片运动还没结束，ImgAnimate()再次被调用
  76.                 var interval = 20;                                                    //定时器的间隔时间，值越小越好，因为越大，动画越卡
  77.                 var speed = offset/(allTime/interval);                                //speed正负由offset决定
  78.                 
  79.                 isAnimate = true;                                                    //图片动画开始
  80.                 clearInterval(imgAnimateTimer);
  81.                 imgAnimateTimer = setInterval(function(){
  82.                     sliderImgsId.style.left = parseInt(sliderImgsId.style.left)+speed +"px";
  83.                     /* 第一种情况：当speed<0时,(即图片向左运动时)
  84.                      * 如果当前图片left值 , left只会越来越小 , 当小于等于newLeft , 则停止图片运动
  85.                      * 第二种情况：当speed>0时,(即图片向右运动时)
  86.                      * 如果当前图片的left , left只会越来越大 , 大于等于newLeft , 则停止图片运动
  87.                      * */
  88.                     if( speed<0 && parseInt(sliderImgsId.style.left)<= newLeft || speed>0 && parseInt(sliderImgsId.style.left) >= newLeft){
  89.                         clearInterval(imgAnimateTimer);                    //到达指定newleft位置停止动画
  90.                         isAnimate = false;                                //动画执行结束
  91.                         
  92.                         /*重新定位-- 让图片无限循环 --start*/
  93.                         if(newLeft > -imgWidth){
  94.                             sliderImgsId.style.left = -imgsLength*imgWidth +"px" ;
  95.                             return;
  96.                         }
  97.                         if(newLeft < -imgsLength*imgWidth){                
  98.                             sliderImgsId.style.left = -imgWidth +"px" ;
  99.                             return;
  100.                         }
  101.                         sliderImgsId.style.left = newLeft+"px";
  102.                         /*重新定位--  让图片无限循环  --end*/
  103.                         
  104.                         /*图片运动结束后。清除上一次定时器时间*/
  105.                         window.onload();
  106.                     }
  107.                 },interval);
  108.             }
  109.             
  110.             
  111.             window.onload = function(){
  112.                 if(isAnimate==false){
  113.                     clearInterval(aotuPlayTimer);
  114.                     aotuPlayTimer = setInterval(function(){
  115.                         btnNext.onclick();
  116.                     },5000);                                //图片每格5s移动一次
  117.                 }
  118.             }
  119.             /*鼠标移入sliderId事件*/
  120.             sliderImgsId.onmouseover = function(){
  121.                 clearInterval(aotuPlayTimer);
  122.             }
  123.             /*鼠标移出sliderId事件*/
  124.             sliderImgsId.onmouseout =function(){
  125.                 window.onload();
  126.             }
  127.             
  128.  </script>
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号