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

本文实例讲述了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程序设计有所帮助。