首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

轮播的简单实现方法

Posted in Javascript onJuly 28, 2016

1.闪现方式的轮播

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

2.滑动轮播

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

<div class="example" style="overflow: hidden; width: 266px;">   
 <ul style="width: 798px; float: left; height: 216px; margin-left: 0px;">
  <li style="width: 266px; float: left; height: 216px;"></li>
  <li style="width: 266px; float: left; height: 216px;"></li>
  <li style="width: 266px; float: left; height: 216px;"></li>
 </ul>
</div>

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

var all = $panel.find('>li'),
  prevAll = new Array();
prevAll[0] = all.eq(0);
//将目标节点前的所有节点都保存到prevAll中，动画结束后将这些节点一一按顺序加到容器的后面
for(var i = 1; i < len; i++){
  all.eq(i).css({display: 'none'});
  prevAll[i] = all.eq(i);
}
...

$panel.animate({ 'marginLeft': -options.width + 'px' }, options.duration, function() {
  for(var i = 0; i < prevAll.length; i++){
    $panel.append($(prevAll[i]).css({display: 'block'})); //将当前展示节点前的所有节点都加载到最后
  }
  $panel.css({ marginLeft: 0 });

})

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

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

简单实现

var $panel = $('example');
var scrollTimer = setInterval(function() {
      scrollNews($panel);
    }, 3000);
function $scrollNews(){
 $panel.animate({ 'marginLeft': '-266px' }, 500, function() {
  $panel.css({ marginLeft: 0 }).find('>li:first').appendTo($panel);
 })
}

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

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

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

var $panel = $('.example'),
 index = 0;
var scrollTimer = setInterval(function() {
      scrollNews($panel);
    }, 3000);

function scrollNews(){
 if(++index >= 2){
  $panel.css({
   'paddingLeft': 266 + 'px'
  })
  $panel.find('>li:first').css({
   'position': 'absolute', 
   'left': 266*index + 'px'
  });
 }
 $panel.animate({ 'marginLeft': -266*index + 'px' }, 500, function() {
  if(++index > 3){
   $panel.css({ marginLeft: 0 });
  }
  if(index >= 3){
   index = 0;
   $panel.css({ 
    marginLeft: 0,
    'paddingLeft': 0 
   });
   $panel.find('>li:first').css({
    'position': 'static', 
     'left': 'auto'
    });
   }
 })
}

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

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

/**
 * @author '陈桦'
 * @date '2016-5-10'
 * @description 滑动轮播插件，支持水平和垂直方向滑动轮播
 *
 * @example 
  html:
  <div class="nfdnews_topnews example">
    <!-- 滚动内容ul -->
    <ul>
      <li><a href="xxx" target="_blank" title="xxx"></a></li>
      <li><a href="xxx" target="_blank" title="xxx"></a></li>
      <li><a href="xxx" target="_blank" title="xxx"></a></li>
      <li><a href="xxx" target="_blank" title="xxx"></a></li>
    </ul>   
    <!-- 焦点列表，可选 -->       
    <ol>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li>
    </ol>
    <!-- 上一个和下一个，可选 -->
    <div>
      <a class="nfdscroll-prev" href="javascript:void(0);"></a>
      <a class="nfdscroll-next" href="javascript:void(0);"></a>
    </div>
  </div>

  js:
  $('.example').nfdscroll({
    startIndex:0,
    width:'266',
    height:'216',
    interval:2000,
    selected:'circle',
    prevText:'',
    nextText:'',
    deriction:'left',
    callback: function(index,$currentNode){
      console.log(index)
    }
  });
 * @param startIndex {Number} 默认从第几个滚动体开始滚动,可选（0-n,0表示第一个，默认为0）
 * @param width {Number} 滚动体宽度,可选（当宽度为0时表示不设置宽度）
 * @param height {Number} 滚动体高度,可选（当高度为0时表示不设置高度）
 * @param interval {Number} 间隔时间，单位毫秒, 当值为负时表示不进行自动滚动
 * @param duration {Number} 动画持续时间
 * @param selected {String} 滚动切换小图标（焦点列表）当前class
 * @param deriction {String} 滚动方向，支持left/right和top/bottom
 * @param callback {Function} 滑动动画结束时触发的回调，参数(index,$currentNode),index:轮播结束后展示的节点的索引；currentNode：轮播结束后当前展示的节点的jquery对象
 * @param prevText {String} 上一个按钮的文本，默认是"上一个"
 * @param nextText {String} 下一个按钮的文本，默认是"下一个"
 */
 jQuery.fn.extend({nfdscroll: function(options) {
  var defaultOpt = {
    startIndex: 0,
    width: 0,//滚动体宽度,可选（当宽度为0时表示不设置宽度）
    height: 0,//滚动体高度,可选（当高度为0时表示不设置高度度）
    interval: 1000,//间隔时间毫秒
    duration: 400,//动画持续时间
    selected:'selected',//滚动切换小图标当前class
    prevText:'上一个',
    nextText:'下一个',
    deriction:'left',//滚动方向
    callback: function(index,$currentNode){//每次滚动到新节点后马上触发，currentNode是当前展示的节点的jquery对象
    }
  },
  $this = this,
  $panel = $this.find('>ul'),//滚动容器
  $panelList = $panel.find('>li'),
  $selectList = $this.find('>ol>li'),//选择容器
  options = jQuery.extend(defaultOpt,options),
  animateFn,//滚动动画
  max = $panel.find(">li").length,//要滚动的节点的数量
  focusIndex = 0,//当前展示的节点的索引
  nfdscrollTimer = 0,//计时器
  inAnimation = false,//动画过程中不再响应其他动画
  isWaitting = false,//是否有未执行的等待动画
  waittingIndex;//未执行的等待动画的目标index

  $('.nfdscroll-prev').text(options.prevText);
  $('.nfdscroll-next').text(options.nextText);

  //只有一个展示，不需要轮播
  if($panelList.length <= 1){
    return;
  }
  //当前动画没有做完但是焦点已经切换到下一个地方，这个函数就是用来执行保障当前显示的页面和鼠标指定的目标一致的处理
  function doWaitting(){
    if(isWaitting){
      startScroll(waittingIndex);
    }
  }
  //开始轮播
  function startScroll(toIndex){
    stopScroll();
    if(inAnimation) {
      isWaitting = true;
      waittingIndex = toIndex;
      return;//动画过程中不再响应其他动画
    }else{
      isWaitting = false;
    }

    if(toIndex == undefined){
      if(options.interval > 0){        
        nfdscrollTimer = setInterval(function(){
          animateFn(toIndex);
        },options.interval);
      }        
    //跳到指定index后再计时
    }else{
      animateFn(toIndex);
      if(options.interval > 0){
        nfdscrollTimer = setInterval(function(){
          animateFn();
        },options.interval);
      }
    }
  }
  //停止轮播
  function stopScroll(){
    clearInterval(nfdscrollTimer);
  }
  //向左向右滚动动画
  //参数toIndex: number,滚动到指定index
  function leftRightAnimate(toIndex){
    //默认滚动方式
    if(toIndex == undefined){
      if(options.deriction == 'left'){
        toIndex = focusIndex + 1;
      }else{
        toIndex = focusIndex - 1;
      }      
      
    }
    if(toIndex != focusIndex){
      inAnimation = true;

      //当前为最后一个轮播体时的处理
      var tInd = 0;
      if(toIndex >= max){//最后一张图片继续滚动时
        $panel.css({
          'paddingLeft': options.width + 'px'
        })
        $panelList.eq(0).css({
          'position': 'absolute', 
          'left': options.width*toIndex + 'px'
        });
        tInd = 0;
      }else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
        //当前为最后一个轮播体时的处理
        $panelList.eq(max - 1).css({
          'position': 'absolute', 
          'left': -options.width + 'px'
        });
        tInd = max - 1;
      }else{
        tInd = toIndex;
      }
      
      //先将焦点切换过去
      $selectList.filter('.' + options.selected).removeClass(options.selected)
        .end().eq(tInd).addClass(options.selected); 

      $panel.animate({ 'marginLeft': -options.width*toIndex + 'px' }, options.duration, function() {
        focusIndex = tInd;

        if(toIndex >= max){//最后一张图片继续滚动时
          $panel.css({ 
            'marginLeft': 0,
            'paddingLeft': 0 
          });
          $panelList.eq(0).css({
            'position': 'static', 
            'left': 'auto'
          });
        }else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
          $panel.css({ 
            'marginLeft': -options.width*focusIndex + 'px',
            'paddingLeft': 0 
          });
          $panelList.eq(max - 1).css({
            'position': 'static', 
            'left': 'auto'
          });
        }
        
        options.callback(focusIndex,$panelList.eq(focusIndex));
        inAnimation = false;

        doWaitting();
      })
    }
  }

  //向上向下滚动动画
  function topBottomAnimate(toIndex){
    //默认滚动方式
    if(toIndex == undefined){
      if(options.deriction == 'top'){
        toIndex = focusIndex + 1;
      }else{
        toIndex = focusIndex - 1;
      }       
    }
    if(toIndex != focusIndex){
      inAnimation = true;

      //当前为最后一个轮播体时的处理
      var tInd = 0;
      if(toIndex >= max){
        $panel.css({
          'paddingTop': options.height + 'px'
        })
        $panelList.eq(0).css({
          'position': 'absolute', 
          'top': options.height*toIndex + 'px'
        });
        tInd = 0;
      }else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
        //当前为最后一个轮播体时的处理
        $panelList.eq(max - 1).css({
          'position': 'absolute', 
          'top': -options.height + 'px'
        });
        tInd = max - 1;
      }else{
        tInd = toIndex;
      }

      //先将焦点切换过去
      $selectList.filter('.' + options.selected).removeClass(options.selected)
        .end().eq(tInd).addClass(options.selected);

      $panel.animate({ 'marginTop': -options.height*toIndex + 'px' }, options.duration, function() {
        focusIndex = tInd;

        if(toIndex >= max){
          $panel.css({ 
            marginTop: 0,
            'paddingTop': 0 
          });
          $panelList.eq(0).css({
            'position': 'static', 
            'top': 'auto'
          });
        }else if(toIndex < 0){//仅仅在当前图片是第一个图片，然后点击上一个图片的时候出现
          $panel.css({ 
            'marginTop': -options.height*focusIndex + 'px',
            'paddingTop': 0 
          });
          $panelList.eq(max - 1).css({
            'position': 'static', 
            'top': 'auto'
          });
        }

        options.callback(focusIndex,$panelList.eq(focusIndex));
        inAnimation = false;

        doWaitting();
      })
    }
  }
  function bindEvent(){
    //绑定事件
    $this.on('mouseover',function(){
      stopScroll();
           
    }).on('mouseout',function(){
      startScroll();
    }).on('click', '.nfdscroll-prev', function(){
      stopScroll();
      startScroll(focusIndex - 1);
    }).on('click', '.nfdscroll-next', function(){
      stopScroll();
      startScroll(focusIndex + 1);
    })
    $selectList.on('mouseover',function(){
      stopScroll();
      if(!$(this).is('.' + options.selected)){
        startScroll($(this).index());
      } 
    });
  }
  function init(){
    $this.css({
      position: 'relative',
      overflow: 'hidden'
    });
    $panel.css({
      position: 'relative'
    })
    focusIndex = options.startIndex;//默认从startIndex开始滚动
    $selectList.eq(focusIndex).addClass(options.selected);//先将焦点切换过去
    if(options.deriction == 'left' || options.deriction == 'right'){
      //初始化样式,实际上不应该插件里面来做样式，应该使用者自己就保证样式没有问题
      var cssO = {
        width: options.width,
        'float': 'left'
      }
      $this.css({
        width: options.width
      });//只需要管宽度即可
      if(options.height){
        cssO.height = options.height;
      }
      var leng = $panel.find('>li').css(cssO).length;
      $panel.css({
        width: options.width * leng + 'px',
        'marginLeft': -options.width*focusIndex + 'px'
      });
      
      animateFn = leftRightAnimate;
    }else if(options.deriction == 'top' || options.deriction == 'bottom'){
      var cssO = {
        height: options.height
      }
      $this.css({
        height: options.height
      });//只需要管高度度即可
      if(options.width){
        cssO.width = options.width;
      }
      var leng = $panel.find('>li').css(cssO).length;
      $panel.css({
        height: options.height * leng + 'px',
        'marginTop': -options.height*focusIndex + 'px'
      });

      animateFn = topBottomAnimate;
    }else{
      alert('插件只支持left/right/top/bottom四种方向上的滚动');
      return;
    }
    
    startScroll();
  }
  
  bindEvent();
  init();

  return {
    'stopScroll': stopScroll,
    'startScroll': startScroll
  }
}
});

一个完整的例子

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>轮播测试例子</title>
 <style type="text/css">
  body,ul,ol{margin: 0; padding: 0;}
  ul,ol{list-style: none;}
  .li1{background-color: #000;}
  .li2{background-color: #333;}
  .li3{background-color: #666;}
  .li4{background-color: #999;}
  .example{margin-left: 300px;}
  .example ol {
   position: absolute;
   padding-left: 80px;
   width: 186px;
   height: 20px;
   top: 186px;
   left: 0px;
   background: #fff;
   cursor: pointer;
  }
  ol li{
   float: left;
   width: 10px;
   height: 10px;
   margin: 5px;
   background: #ff0;
   border-radius: 10px;
  }
  ol li.circle{
   background: #f00;
  }
 </style>
</head>

<body>
 <div class="example">
  <!-- 滚动内容ul -->
  <ul>
    <li class="li1"><a href="xxx" target="_blank" title="xxx"></a></li>
    <li class="li2"><a href="xxx" target="_blank" title="xxx"></a></li>
    <li class="li3"><a href="xxx" target="_blank" title="xxx"></a></li>
    <li class="li4"><a href="xxx" target="_blank" title="xxx"></a></li>
  </ul>   
  <!-- 焦点列表，可选 -->       
  <ol>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
  </ol>
  <!-- 上一个和下一个，可选 -->
  <div>
    <a class="nfdscroll-prev" href="javascript:void(0);"></a>
    <a class="nfdscroll-next" href="javascript:void(0);"></a>
  </div>
</div>
 <script type="text/javascript" src="common/jquery.js"></script>
 <script type="text/javascript" src="common/jquery.nfdscroll.js"></script>
 <script type="text/javascript">
 $('.example').nfdscroll({
   startIndex:0,
   width:'266',
   height:'216',
   interval:-1,//2000,
   selected:'circle',
   prevText:'上一个',
   nextText:'下一个',
   deriction:'left',
   callback: function(index,$currentNode){
     console.log(index)
   }
 });
 </script>
</body>
</html>

实现的效果

轮播的简单实现方法

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

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

轮播的简单实现方法

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
载入进度条 效果
Jul 08 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
Vue实现日历小插件
Jun 26 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
关于JS变量和作用域详解
Jul 28 #Javascript
jquery轮播的实现方式 附完整实例
Jul 28 #Javascript
AngularJS入门教程中SQL实例详解
Jul 27 #Javascript
AngularJS入门教程之表格实例详解
Jul 27 #Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 #Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 #Javascript
关于JS中的方法是否加括号的问题
Jul 27 #Javascript
matplotlib(7) 可视化动图(1) 数据同步(1) redis shake(1) ipyvizzu(1) 窗口函数(3) 排名(1) 分析统计(1) 阿里云(6) 条形图(1)
You might like
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python使用RNN实现文本分类
2018/05/24 Python
python实现自动发送邮件
2018/06/20 Python
举例讲解Python常用模块
2019/03/08 Python
python之mock模块基本使用方法详解
2019/06/27 Python
浅谈python出错时traceback的解读
2020/07/15 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
adidas美国官网：adidas US
2016/09/21 全球购物
Omio波兰：全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
在职人员函授期间自我评价分享
2013/11/08 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
组织生活会发言材料
2014/12/15 职场文书
写给医生的感谢信
2015/01/22 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
小学作文指导之如何写人？
2019/07/08 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
Golang ort 中的sortInts 方法
2022/04/24 Golang
Redis基本数据类型List常用操作命令
2022/06/01 Redis