当前位置：Gxlcms > JavaScript > 轮播的简单实现方法

轮播的简单实现方法

时间：2021-07-01 10:21:17 帮助过：5人阅读

1.闪现方式的轮播

不论述，实现比较简单，效果也比较好

2.滑动轮播

以下面的html代码为例（向左滑动）

  1. <div class="example" style="overflow: hidden; width: 266px;">   
  2.  <ul style="width: 798px; float: left; height: 216px; margin-left: 0px;">
  3.   <li style="width: 266px; float: left; height: 216px;"></li>
  4.   <li style="width: 266px; float: left; height: 216px;"></li>
  5.   <li style="width: 266px; float: left; height: 216px;"></li>
  6.  </ul>
  7. </div>

插件源码：实现向左和向上轮播，手动切换也是向左和向上切换（手动切换关键源码）

  1. var all = $panel.find('>li'),
  2.   prevAll = new Array();
  3. prevAll[0] = all.eq(0);
  4. //将目标节点前的所有节点都保存到prevAll中，动画结束后将这些节点一一按顺序加到容器的后面
  5. for(var i = 1; i < len; i++){
  6.   all.eq(i).css({display: 'none'});
  7.   prevAll[i] = all.eq(i);
  8. }
  9. ...
  10. $panel.animate({ 'marginLeft': -options.width + 'px' }, options.duration, function() {
  11.   for(var i = 0; i < prevAll.length; i++){
  12.     $panel.append($(prevAll[i]).css({display: 'block'})); //将当前展示节点前的所有节点都加载到最后
  13.   }
  14.   $panel.css({ marginLeft: 0 });
  15. })

滑动轮播的实现方式主要有两种

1)切换父元素margin-left,将第一个子元素不断添加到父容器结尾

简单实现

  1. var $panel = $('example');
  2. var scrollTimer = setInterval(function() {
  3.       scrollNews($panel);
  4.     }, 3000);
  5. function $scrollNews(){
  6.  $panel.animate({ 'marginLeft': '-266px' }, 500, function() {
  7.   $panel.css({ marginLeft: 0 }).find('>li:first').appendTo($panel);
  8.  })
  9. }

这种方式有一个问题就是在老IE上可能存在兼容问题。

2) 累计方式设置父元素margin-left

不过在margin-left设置到最小的时候（滑动到最后一个元素），将第一个子元素的位置设置为最后一个子元素的后面，当最后一个元素滚动到第一个元素后，父元素margin-left置为0且第一个子元素的位置归位。举个简单代码例子

  1. var $panel = $('.example'),
  2.  index = 0;
  3. var scrollTimer = setInterval(function() {
  4.       scrollNews($panel);
  5.     }, 3000);
  6. function scrollNews(){
  7.  if(++index >= 2){
  8.   $panel.css({
  9.    'paddingLeft': 266 + 'px'
  10.   })
  11.   $panel.find('>li:first').css({
  12.    'position': 'absolute', 
  13.    'left': 266*index + 'px'
  14.   });
  15.  }
  16.  $panel.animate({ 'marginLeft': -266*index + 'px' }, 500, function() {
  17.   if(++index > 3){
  18.    $panel.css({ marginLeft: 0 });
  19.   }
  20.   if(index >= 3){
  21.    index = 0;
  22.    $panel.css({ 
  23.     marginLeft: 0,
  24.     'paddingLeft': 0 
  25.    });
  26.    $panel.find('>li:first').css({
  27.     'position': 'static', 
  28.      'left': 'auto'
  29.     });
  30.    }
  31.  })
  32. }

更复杂的滚动插件需要支持水平和垂直方向的滚动（四个方向）、可以手动切换焦点、可以翻上一个下一个。附上本人写完整的插件源码

插件源码jquery.nfdscroll.js：支持水平和垂直方向（四个方向）滚动，手动切换会随切换方向滚动

  1. /**
  2.  * @author '陈桦'
  3.  * @date '2016-5-10'
  4.  * @description 滑动轮播插件，支持水平和垂直方向滑动轮播
  5.  *
  6.  * @example 
  7.   html:
  8.   <div class="nfdnews_topnews example">
  9.     <!-- 滚动内容ul -->
  10.     <ul>
  11.       <li><a href="xxx" target="_blank" title="xxx"></a></li>
  12.       <li><a href="xxx" target="_blank" title="xxx"></a></li>
  13.       <li><a href="xxx" target="_blank" title="xxx"></a></li>
  14.       <li><a href="xxx" target="_blank" title="xxx"></a></li>
  15.     </ul>   
  16.     <!-- 焦点列表，可选 -->       
  17.     <ol>
  18.       <li class=""></li>
  19.       <li class=""></li>
  20.       <li class=""></li>
  21.       <li class=""></li>
  22.     </ol>
  23.     <!-- 上一个和下一个，可选 -->
  24.     <div>
  25.       <a class="nfdscroll-prev" href="javascript:void(0);"></a>
  26.       <a class="nfdscroll-next" href="javascript:void(0);"></a>
  27.     </div>
  28.   </div>
  29.   js:
  30.   $('.example').nfdscroll({
  31.     startIndex:0,
  32.     width:'266',
  33.     height:'216',
  34.     interval:2000,
  35.     selected:'circle',
  36.     prevText:'',
  37.     nextText:'',
  38.     deriction:'left',
  39.     callback: function(index,$currentNode){
  40.       console.log(index)
  41.     }
  42.   });
  43.  * @param startIndex {Number} 默认从第几个滚动体开始滚动,可选（0-n,0表示第一个，默认为0）
  44.  * @param width {Number} 滚动体宽度,可选（当宽度为0时表示不设置宽度）
  45.  * @param height {Number} 滚动体高度,可选（当高度为0时表示不设置高度）
  46.  * @param interval {Number} 间隔时间，单位毫秒, 当值为负时表示不进行自动滚动
  47.  * @param duration {Number} 动画持续时间
  48.  * @param selected {String} 滚动切换小图标（焦点列表）当前class
  49.  * @param deriction {String} 滚动方向，支持left/right和top/bottom
  50.  * @param callback {Function} 滑动动画结束时触发的回调，参数(index,$currentNode),index:轮播结束后展示的节点的索引；currentNode：轮播结束后当前展示的节点的jquery对象
  51.  * @param prevText {String} 上一个按钮的文本，默认是"上一个"
  52.  * @param nextText {String} 下一个按钮的文本，默认是"下一个"
  53.  */
  54.  jQuery.fn.extend({nfdscroll: function(options) {
  55.   var defaultOpt = {
  56.     startIndex: 0,
  57.     width: 0,//滚动体宽度,可选（当宽度为0时表示不设置宽度）
  58.     height: 0,//滚动体高度,可选（当高度为0时表示不设置高度度）
  59.     interval: 1000,//间隔时间毫秒
  60.     duration: 400,//动画持续时间
  61.     selected:'selected',//滚动切换小图标当前class
  62.     prevText:'上一个',
  63.     nextText:'下一个',
  64.     deriction:'left',//滚动方向
  65.     callback: function(index,$currentNode){//每次滚动到新节点后马上触发，currentNode是当前展示的节点的jquery对象
  66.     }
  67.   },
  68.   $this = this,
  69.   $panel = $this.find('>ul'),//滚动容器
  70.   $panelList = $panel.find('>li'),
  71.   $selectList = $this.find('>ol>li'),//选择容器
  72.   options = jQuery.extend(defaultOpt,options),
  73.   animateFn,//滚动动画
  74.   max = $panel.find(">li").length,//要滚动的节点的数量
  75.   focusIndex = 0,//当前展示的节点的索引
  76.   nfdscrollTimer = 0,//计时器
  77.   inAnimation = false,//动画过程中不再响应其他动画
  78.   isWaitting = false,//是否有未执行的等待动画
  79.   waittingIndex;//未执行的等待动画的目标index
  80.   $('.nfdscroll-prev').text(options.prevText);
  81.   $('.nfdscroll-next').text(options.nextText);
  82.   //只有一个展示，不需要轮播
  83.   if($panelList.length <= 1){
  84.     return;
  85.   }
  86.   //当前动画没有做完但是焦点已经切换到下一个地方，这个函数就是用来执行保障当前显示的页面和鼠标指定的目标一致的处理
  87.   function doWaitting(){
  88.     if(isWaitting){
  89.       startScroll(waittingIndex);
  90.     }
  91.   }
  92.   //开始轮播
  93.   function startScroll(toIndex){
  94.     stopScroll();
  95.     if(inAnimation) {
  96.       isWaitting = true;
  97.       waittingIndex = toIndex;
  98.       return;//动画过程中不再响应其他动画
  99.     }else{
  100.       isWaitting = false;
  101.     }
  102.     if(toIndex == undefined){
  103.       if(options.interval > 0){        
  104.         nfdscrollTimer = setInterval(function(){
  105.           animateFn(toIndex);
  106.         },options.interval);
  107.       }        
  108.     //跳到指定index后再计时
  109.     }else{
  110.       animateFn(toIndex);
  111.       if(options.interval > 0){
  112.         nfdscrollTimer = setInterval(function(){
  113.           animateFn();
  114.         },options.interval);
  115.       }
  116.     }
  117.   }
  118.   //停止轮播
  119.   function stopScroll(){
  120.     clearInterval(nfdscrollTimer);
  121.   }
  122.   //向左向右滚动动画
  123.   //参数toIndex: number,滚动到指定index
  124.   function leftRightAnimate(toIndex){
  125.     //默认滚动方式
  126.     if(toIndex == undefined){
  127.       if(options.deriction == 'left'){
  128.         toIndex = focusIndex + 1;
  129.       }else{
  130.         toIndex = focusIndex - 1;
  131.       }      
  132.       
  133.     }
  134.     if(toIndex != focusIndex){
  135.       inAnimation = true;
  136.       //当前为最后一个轮播体时的处理
  137.       var tInd = 0;
  138.       if(toIndex >= max){//最后一张图片继续滚动时
  139.         $panel.css({
  140.           'paddingLeft': options.width + 'px'
  141.         })
  142.         $panelList.eq(0).css({
  143.           'position': 'absolute', 
  144.           'left': options.width*toIndex + 'px'
  145.         });
  146.         tInd = 0;
  147.       }else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
  148.         //当前为最后一个轮播体时的处理
  149.         $panelList.eq(max - 1).css({
  150.           'position': 'absolute', 
  151.           'left': -options.width + 'px'
  152.         });
  153.         tInd = max - 1;
  154.       }else{
  155.         tInd = toIndex;
  156.       }
  157.       
  158.       //先将焦点切换过去
  159.       $selectList.filter('.' + options.selected).removeClass(options.selected)
  160.         .end().eq(tInd).addClass(options.selected); 
  161.       $panel.animate({ 'marginLeft': -options.width*toIndex + 'px' }, options.duration, function() {
  162.         focusIndex = tInd;
  163.         if(toIndex >= max){//最后一张图片继续滚动时
  164.           $panel.css({ 
  165.             'marginLeft': 0,
  166.             'paddingLeft': 0 
  167.           });
  168.           $panelList.eq(0).css({
  169.             'position': 'static', 
  170.             'left': 'auto'
  171.           });
  172.         }else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
  173.           $panel.css({ 
  174.             'marginLeft': -options.width*focusIndex + 'px',
  175.             'paddingLeft': 0 
  176.           });
  177.           $panelList.eq(max - 1).css({
  178.             'position': 'static', 
  179.             'left': 'auto'
  180.           });
  181.         }
  182.         
  183.         options.callback(focusIndex,$panelList.eq(focusIndex));
  184.         inAnimation = false;
  185.         doWaitting();
  186.       })
  187.     }
  188.   }
  189.   //向上向下滚动动画
  190.   function topBottomAnimate(toIndex){
  191.     //默认滚动方式
  192.     if(toIndex == undefined){
  193.       if(options.deriction == 'top'){
  194.         toIndex = focusIndex + 1;
  195.       }else{
  196.         toIndex = focusIndex - 1;
  197.       }       
  198.     }
  199.     if(toIndex != focusIndex){
  200.       inAnimation = true;
  201.       //当前为最后一个轮播体时的处理
  202.       var tInd = 0;
  203.       if(toIndex >= max){
  204.         $panel.css({
  205.           'paddingTop': options.height + 'px'
  206.         })
  207.         $panelList.eq(0).css({
  208.           'position': 'absolute', 
  209.           'top': options.height*toIndex + 'px'
  210.         });
  211.         tInd = 0;
  212.       }else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
  213.         //当前为最后一个轮播体时的处理
  214.         $panelList.eq(max - 1).css({
  215.           'position': 'absolute', 
  216.           'top': -options.height + 'px'
  217.         });
  218.         tInd = max - 1;
  219.       }else{
  220.         tInd = toIndex;
  221.       }
  222.       //先将焦点切换过去
  223.       $selectList.filter('.' + options.selected).removeClass(options.selected)
  224.         .end().eq(tInd).addClass(options.selected);
  225.       $panel.animate({ 'marginTop': -options.height*toIndex + 'px' }, options.duration, function() {
  226.         focusIndex = tInd;
  227.         if(toIndex >= max){
  228.           $panel.css({ 
  229.             marginTop: 0,
  230.             'paddingTop': 0 
  231.           });
  232.           $panelList.eq(0).css({
  233.             'position': 'static', 
  234.             'top': 'auto'
  235.           });
  236.         }else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
  237.           $panel.css({ 
  238.             'marginTop': -options.height*focusIndex + 'px',
  239.             'paddingTop': 0 
  240.           });
  241.           $panelList.eq(max - 1).css({
  242.             'position': 'static', 
  243.             'top': 'auto'
  244.           });
  245.         }
  246.         options.callback(focusIndex,$panelList.eq(focusIndex));
  247.         inAnimation = false;
  248.         doWaitting();
  249.       })
  250.     }
  251.   }
  252.   function bindEvent(){
  253.     //绑定事件
  254.     $this.on('mouseover',function(){
  255.       stopScroll();
  256.            
  257.     }).on('mouseout',function(){
  258.       startScroll();
  259.     }).on('click', '.nfdscroll-prev', function(){
  260.       stopScroll();
  261.       startScroll(focusIndex - 1);
  262.     }).on('click', '.nfdscroll-next', function(){
  263.       stopScroll();
  264.       startScroll(focusIndex + 1);
  265.     })
  266.     $selectList.on('mouseover',function(){
  267.       stopScroll();
  268.       if(!$(this).is('.' + options.selected)){
  269.         startScroll($(this).index());
  270.       } 
  271.     });
  272.   }
  273.   function init(){
  274.     $this.css({
  275.       position: 'relative',
  276.       overflow: 'hidden'
  277.     });
  278.     $panel.css({
  279.       position: 'relative'
  280.     })
  281.     focusIndex = options.startIndex;//默认从startIndex开始滚动
  282.     $selectList.eq(focusIndex).addClass(options.selected);//先将焦点切换过去
  283.     if(options.deriction == 'left' || options.deriction == 'right'){
  284.       //初始化样式,实际上不应该插件里面来做样式，应该使用者自己就保证样式没有问题
  285.       var cssO = {
  286.         width: options.width,
  287.         'float': 'left'
  288.       }
  289.       $this.css({
  290.         width: options.width
  291.       });//只需要管宽度即可
  292.       if(options.height){
  293.         cssO.height = options.height;
  294.       }
  295.       var leng = $panel.find('>li').css(cssO).length;
  296.       $panel.css({
  297.         width: options.width * leng + 'px',
  298.         'marginLeft': -options.width*focusIndex + 'px'
  299.       });
  300.       
  301.       animateFn = leftRightAnimate;
  302.     }else if(options.deriction == 'top' || options.deriction == 'bottom'){
  303.       var cssO = {
  304.         height: options.height
  305.       }
  306.       $this.css({
  307.         height: options.height
  308.       });//只需要管高度度即可
  309.       if(options.width){
  310.         cssO.width = options.width;
  311.       }
  312.       var leng = $panel.find('>li').css(cssO).length;
  313.       $panel.css({
  314.         height: options.height * leng + 'px',
  315.         'marginTop': -options.height*focusIndex + 'px'
  316.       });
  317.       animateFn = topBottomAnimate;
  318.     }else{
  319.       alert('插件只支持left/right/top/bottom四种方向上的滚动');
  320.       return;
  321.     }
  322.     
  323.     startScroll();
  324.   }
  325.   
  326.   bindEvent();
  327.   init();
  328.   return {
  329.     'stopScroll': stopScroll,
  330.     'startScroll': startScroll
  331.   }
  332. }
  333. });

一个完整的例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.  <title>轮播测试例子</title>
  6.  <style type="text/css">
  7.   body,ul,ol{margin: 0; padding: 0;}
  8.   ul,ol{list-style: none;}
  9.   .li1{background-color: #000;}
  10.   .li2{background-color: #333;}
  11.   .li3{background-color: #666;}
  12.   .li4{background-color: #999;}
  13.   .example{margin-left: 300px;}
  14.   .example ol {
  15.    position: absolute;
  16.    padding-left: 80px;
  17.    width: 186px;
  18.    height: 20px;
  19.    top: 186px;
  20.    left: 0px;
  21.    background: #fff;
  22.    cursor: pointer;
  23.   }
  24.   ol li{
  25.    float: left;
  26.    width: 10px;
  27.    height: 10px;
  28.    margin: 5px;
  29.    background: #ff0;
  30.    border-radius: 10px;
  31.   }
  32.   ol li.circle{
  33.    background: #f00;
  34.   }
  35.  </style>
  36. </head>
  37. <body>
  38.  <div class="example">
  39.   <!-- 滚动内容ul -->
  40.   <ul>
  41.     <li class="li1"><a href="xxx" target="_blank" title="xxx"></a></li>
  42.     <li class="li2"><a href="xxx" target="_blank" title="xxx"></a></li>
  43.     <li class="li3"><a href="xxx" target="_blank" title="xxx"></a></li>
  44.     <li class="li4"><a href="xxx" target="_blank" title="xxx"></a></li>
  45.   </ul>   
  46.   <!-- 焦点列表，可选 -->       
  47.   <ol>
  48.     <li class=""></li>
  49.     <li class=""></li>
  50.     <li class=""></li>
  51.     <li class=""></li>
  52.   </ol>
  53.   <!-- 上一个和下一个，可选 -->
  54.   <div>
  55.     <a class="nfdscroll-prev" href="javascript:void(0);"></a>
  56.     <a class="nfdscroll-next" href="javascript:void(0);"></a>
  57.   </div>
  58. </div>
  59.  <script type="text/javascript" src="common/jquery.js"></script>
  60.  <script type="text/javascript" src="common/jquery.nfdscroll.js"></script>
  61.  <script type="text/javascript">
  62.  $('.example').nfdscroll({
  63.    startIndex:0,
  64.    width:'266',
  65.    height:'216',
  66.    interval:-1,//2000,
  67.    selected:'circle',
  68.    prevText:'上一个',
  69.    nextText:'下一个',
  70.    deriction:'left',
  71.    callback: function(index,$currentNode){
  72.      console.log(index)
  73.    }
  74.  });
  75.  </script>
  76. </body>
  77. </html>

实现的效果

里面ol、nfdscroll-prev等的样式自己手动调整

以上这篇轮播的简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！