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手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
iOS无限轮播图片的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 1 使用UIScrollview实现无限轮播原理在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动. 在 ...
无限轮播的实现，未加自动轮播效果（非原创）
最近一直在看视频,学到了一个无限轮播,今天把它给写下来保存,方便日后自己查阅. html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 ...
iOS 自定义图片无限轮播控件
一:简介图片轮播功能在App中是一个非常常见的功能,即允许定时滚动,也允许拖拽滚动,也可以点击每张图片触发事件. 二:实现方式图片轮播功能的实现方式有很多中, UIScrollView + N个U ...
html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
jquery带缩略图轮播_带有jQuery和PHP的新鲜滑动缩略图库
jquery带缩略图轮播 View demo 查看演示Download Source 下载源 In this tutorial we are going to create another full ...
html5carousel图片轮播,jquery 3d Carousel轮播图插件
jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件.该jquery Carousel轮播图插件兼容ie8浏览器,提供丰富的参数和API方法由于控制 ...
iOS开发之ImageView复用实现图片无限轮播
在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案.今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageVi ...

jquery 垂直无限轮播

1.HTML节点

2.CSS样式

3.JQuery准备

4.JavaScript代码

jquery 垂直无限轮播相关推荐

最新文章

热门文章