jquery轮播的实现方式 附完整实例


Posted in Javascript onJuly 28, 2016

本文实例为大家分享了jquery轮播实现代码,供大家参考,具体内容如下

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>

实现效果:

jquery轮播的实现方式 附完整实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
AngularJS转换响应内容
Jan 27 Javascript
js解决movebox移动问题
Mar 29 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
js实现随机点名
Jan 19 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 #Javascript
AngularJS入门教程之表格实例详解
Jul 27 #Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 #Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 #Javascript
关于JS中的方法是否加括号的问题
Jul 27 #Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 #Javascript
AngularJS入门教程之服务(Service)
Jul 27 #Javascript
You might like
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
Python编写简单的HTML页面合并脚本
2016/07/11 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python装饰器使用实例详解
2019/12/14 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Django models文件模型变更错误解决
2020/05/11 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
专家推荐信模板
2014/05/09 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书