html纵向轮播图,jquery实现垂直无限轮播的方法分析

ゞ浴缸里的玫瑰 2022-10-06 00:32 225阅读 0赞

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

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

1.HTML节点

*  第四页
 *  第一页
 *  第二页
 *  第三页
 *  第四页
 *  第一页

↑

↓

2.CSS样式

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;

3.JQuery准备

4.JavaScript代码

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;

\});

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

html纵向轮播图,jquery实现垂直无限轮播的方法分析

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery实现轮播图

相关 html vue轮播图,webpack+Vue实现轮播图

相关 HTML实现jquery实现轮播图,jquery+css实现简单的图片轮播效果

相关轮播图实现html,html、css、js实现轮播图

相关 html纵向轮播图,jquery实现垂直无限轮播的方法分析

相关 html中简单轮播图实现原理,jQuery实现一个简单的轮播图

相关 ViewPager 无限轮播自动轮播

相关 jquery 实现轮播图

相关 jQuery实现轮播图

相关 jQuery实现轮播图