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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jquery自定义组件实例详解
Dec 31 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
COM in PHP (winows only)
2006/10/09 PHP
php文档更新介绍
2011/07/22 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
js控制框架刷新
2008/08/01 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
JavaScript实现原型封装轮播图
2020/12/27 Javascript
python执行等待程序直到第二天零点的方法
2015/04/23 Python
浅谈Python 对象内存占用
2016/07/15 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
Django数据库迁移常见使用方法
2020/11/12 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
Servlet的生命周期
2013/08/25 面试题
求职毕业生自荐书
2014/02/08 职场文书
计算机网络专业求职信
2014/06/05 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
创业计划书之网吧
2019/10/10 职场文书
手残删除python之后的补救方法
2021/06/26 Python