jquery实现垂直无限轮播的方法分析


Posted in jQuery onJuly 16, 2019

本文实例讲述了jquery实现垂直无限轮播的方法。分享给大家供大家参考,具体如下:

javascript垂直轮播,依赖于jquery实现的,并且首尾无缝衔接。原理很简单,就不讲述了,直接贴源码。

1.HTML节点

<div class="banner_group">
    <ul id="banner">
      <!-- 缓存末项,实现滑动到最开始后,无限轮播 -->
      <li style="background-color: chartreuse">第四页</li>
      <li style="background-color: #f6894d">第一页</li>
      <li style="background-color: royalblue">第二页</li>
      <li style="background-color: red">第三页</li>
      <li style="background-color: chartreuse">第四页</li>
      <!-- 缓存首项,实现滑动到最后过后,无限轮播 -->
      <li style="background-color: #f6894d">第一页</li>
    </ul>
    <div class="scrollPageBtn">
      <div style="width: 100%;height: 100%;position: relative;">
        <label id="last" style="width:100%;position: absolute;top: 0;text-align: center">↑</label>
        <label id="next" style="width:100%;position: absolute;bottom: 0;text-align: center">↓</label>
      </div>
    </div>
</div>

2.CSS样式

<style>
    body{
      margin:0;
      padding: 0;
    }
    .banner_group{
      width: 300px;
      height: 500px;
      overflow: hidden;
      position: relative;
    }
    .scrollPageBtn{
      width: 30px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 40%;
      background-color: #b2b2b2;
      opacity: 0.2;
    }
    ul{
      list-style: none;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      position: relative;
    }
    ul li{
      width: 100%;
      height: 100%;
      color: white;
      font-size: 25px;
    }
</style>

3.JQuery准备

<!-- 引入jquery -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

4.JavaScript代码

<script>
    var index = 0; // 保存当前所在项
    /* 是否允许点击滑动动画,如果正在执行动画的过程中,
    则禁止点击,如果动画完成后,则允许点击,
    避免由于连点,出现画面不正常问题. */
    var allowClick = true; //
    // 页面加载完成后调用
    $(function(){
      index = 1; // 初始显示第2项
  /* 注意:第一项是用来缓存末项的,实现无缝连接准备的,所以最开始显示的应该是第2项 */
      $("#banner").css("bottom", "500px"); // 准备初始显示项
  // 上一页
      $("#last").on("click", function(){
        if(allowClick){
          allowClick = false;
          index--; // 上一页,--
   // 如果已经到了最开始过后,动画完成后,定位到末项
          if(index == 0){
            $("#banner").animate({bottom: (index * 500) + 'px'}, "fast", "swing", function () {
              index = 4;
              $("#banner").css("bottom", "2000px"); // 定位到末项
              allowClick = true;
            });
          }else{
            $("#banner").animate({bottom: (index * 500) + 'px'}, "fast", "swing", function () {
              allowClick = true;
            });
          }
        }
      });
  // 下一页
      $("#next").on("click", function(){
        if(allowClick){
          allowClick = false;
          if(index <= 5){
            index ++; // 下一页++
            if(index == 5){
              $("#banner").animate({bottom: (index * 500) + 'px'}, "fast", "swing", function () {
                index = 1;
                $("#banner").css("bottom", "500px");
                allowClick = true;
              });
            }else{
              $("#banner").animate({bottom: (index * 500) + 'px'}, "fast", "swing", function () {
                allowClick = true;
              });
            }
          }
        }
      });
    });
</script>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
You might like
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
Python中使用Inotify监控文件实例
2015/02/14 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
Python LMDB库的使用示例
2021/02/14 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
幼儿园健康教育方案
2014/06/14 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
红色故事汇观后感
2015/06/18 职场文书
小学教育见习总结
2015/06/23 职场文书
学生会部长竞选稿
2015/11/19 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL