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 相关文章推荐
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
PHP的可变变量名的使用方法分享
2012/02/05 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
详解python分布式进程
2018/10/08 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
迅雷Cued工作心得体会
2014/01/27 职场文书
会议邀请函
2015/01/30 职场文书
廉洁自律证明
2015/06/24 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
Python如何识别银行卡卡号?
2021/06/10 Python
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis