`

iscroll实现图片的循环滑动

 
阅读更多
<div class="gexian"></div>
<div style="margin:0 auto;">
<div class="bgfont"><div>
<span class="meihong size20">99特惠</span>超低价 无限购</div></div></div>
<div id="index-splash-block1" class="index-splash-block" 
style="position:relative;width:320px;overflow:hidden;">
<div id="scroller_99ii">
<div id="pullDown_99" style="display:none;">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
</div>
<ul id="feature-slide-block1" class="feature-slide-block" style="width:1600px;">
<li class="feature-slide-preview1"><div class="dtk-list"><div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M0212060101&appCode=prop&type=990002&merchantType=sale99" >
<div class="dazhe"><span style="font-size:18px;">4.5</span><span style="font-size:12px;">折</span></div><div class="sp_bg"><img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0212060101_1_micro.png" alt="商品图片" class="sp01"/></div></a></div><div class="dtk-item"><a href="/wap/queryPromotionDetail.do?id=M1312051801&appCode=prop&type=990002&merchantType=sale99" ><div class="dazhe"><span style="font-size:18px;">3.3</span><span style="font-size:12px;">折</span></div><div class="sp_bg"><img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312051801_1_micro.png" alt="商品图片" class="sp01"/></div></a></div></div></li>
<li class="feature-slide-preview1"><div class="dtk-list">
<div  class="dtk-item"><a href="/wap/queryPromotionDetail.do?id=M0112041201&appCode=prop&type=990002&merchantType=sale99" ><div class="dazhe"><span style="font-size:18px;">0.9</span><span style="font-size:12px;">折</span></div><div class="sp_bg"><img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0112041201_1_micro.png" alt="商品图片" class="sp01"/></div></a></div><div class="dtk-item"><a href="/wap/queryPromotionDetail.do?id=M1112061502&appCode=prop&type=990002&merchantType=sale99" ><div class="dazhe"><span style="font-size:18px;">4.0</span><span style="font-size:12px;">折</span></div><div class="sp_bg"><img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1112061502_1_micro.png" alt="商品图片" class="sp01"/></div></a></div></div></li>
<li class="feature-slide-preview1"><div class="dtk-list"><div class="dtk-item"><a href="/wap/queryPromotionDetail.do?id=M1112070301&appCode=prop&type=990002&merchantType=sale99" ><div class="dazhe"><span style="font-size:18px;">2.3</span><span style="font-size:12px;">折</span></div><div class="sp_bg"><img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1112070301_1_micro.png" alt="商品图片" class="sp01"/></div></a></div><div class="dtk-item"><a href="/wap/queryPromotionDetail.do?id=M1312060101&appCode=prop&type=990002&merchantType=sale99" ><div class="dazhe"><span style="font-size:18px;">3.9</span><span style="font-size:12px;">折</span></div><div class="sp_bg"><img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312060101_1_micro.png" alt="商品图片" class="sp01"/></div></a></div></div></li><li class="feature-slide-preview1"><div class="dtk-list"><div class="dtk-item"><a href="/wap/queryPromotionDetail.do?id=M1012051802&appCode=prop&type=990002&merchantType=sale99" ><div class="dazhe"><span style="font-size:18px;">4.0</span><span style="font-size:12px;">折</span></div><div class="sp_bg"><img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1012051802_1_micro.png" alt="商品图片" class="sp01"/></div></a></div><div class="dtk-item"><a href="/wap/queryPromotionDetail.do?id=M1212042601&appCode=prop&type=990002&merchantType=sale99" ><div class="dazhe"><span style="font-size:18px;">3.2</span><span style="font-size:12px;">折</span></div><div class="sp_bg"><img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1212042601_1_micro.png" alt="商品图片" class="sp01"/></div></a></div></div></li><li class="feature-slide-preview1"><div class="dtk-list"><div class="dtk-item"><a href="/wap/queryPromotionDetail.do?id=M0812060801&appCode=prop&type=990002&merchantType=sale99" ><div class="dazhe"><span style="font-size:18px;">6.1</span><span style="font-size:12px;">折</span></div><div class="sp_bg"><img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0812060801_1_micro.png" alt="商品图片" class="sp01"/></div></a></div><div class="dtk-item"><a href="/wap/queryPromotionDetail.do?id=M1312060102&appCode=prop&type=990002&merchantType=sale99" ><div class="dazhe"><span style="font-size:18px;">6.6</span><span style="font-size:12px;">折</span></div><div class="sp_bg"><img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312060102_1_micro.png" alt="商品图片" class="sp01"/></div></a></div></div></li></ul><div id="pullUp_99" style="display:none;"><span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span></div></div><div id="feature-slide-list1" class="feature-slide-list" style="top:160px;position: absolute;"><a href="javascript:void(0)" onclick="directionRoll(myScroll_99TeHui,'prev',5,0)" id="feature-slide-list-previous1" class="feature-slide-list-previous i_com"></a><div id="feature-slide-list-items1" class="feature-slide-list-items"><a href="javascript:void(0)" class="current"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a></div><a href="javascript:void(0)" onclick="directionRoll(myScroll_99TeHui,'next',5,0)" id="feature-slide-list-next1" class="feature-slide-list-next i_com"></a></div><div class="cp_more"><a href="/wap/sale99OrTopicList.do?appCode=prop&type=sale99&cateCode=990002&pager.offset=1&pageSize=18">更多&gt;</a></div></div>
<div style="clear: both; position: relative; overflow: hidden; width: 300px;margin:0px 0px 0px 5px;"><div class="lantern_slide" id="lantern_slide"><div class="ls_pic" id="bimg" style="width:300px;"><div id="pullDown_Topic" style="display:none;"><span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span></div><ul style="height:60px;"><li class="dis" name="f"><a href="/wap/sale99OrTopicList.do?appCode=prop&type=topic&cateCode=9900003&pager.offset=1&pageSize=18"><img src="http://pic.99wuxian.com/mall/hpdownload/web/20120815181815183.jpg" /></a></li></ul><div id="pullUp_Topic" style="display:none;"><span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span></div></div></div></div>

 

 

 

function loadedFor99TeHui(){

	if(null!=document.getElementById("index-splash-block1")){
		pullDownEl_99 = document.getElementById('pullDown_99');
		pullUpEl_99 = document.getElementById('pullUp_99');
		pullDownOffset_99 = pullDownEl_99.offsetHeight;
		pullUpOffset_99 = pullUpEl_99.offsetHeight;
		myScroll_99TeHui = new iScroll('index-splash-block1', {
					snap: true,
					momentum: false,
					hScrollbar: false,					
					checkDOMChanges:true,
					onRefresh: function () {
						if (pullDownEl_99.className.match('loading')) {
							pullDownEl_99.className = '';
						} else if (pullUpEl_99.className.match('loading')) {
							pullUpEl_99.className = '';
						}
					},
					onScrollMove: function () {
						if (this.x > 5 && !pullDownEl_99.className.match('flip')) {
							pullDownEl_99.className = 'flip';
							this.minScrollX = 0;
						} else if (this.x < 5 && pullDownEl_99.className.match('flip')) {
							pullDownEl_99.className = '';
							this.minScrollX = -pullDownOffset_99;
						} else if (this.x < (this.maxScrollX - 5) && !pullUpEl_99.className.match('flip')) {
							pullUpEl_99.className = 'flip';
							this.maxScrollX = this.maxScrollX;
						} else if (this.x > (this.maxScrollX + 5) && pullUpEl_99.className.match('flip')) {
							pullUpEl_99.className = '';
							this.maxScrollX = pullUpOffset_99;
						}
					},
					onScrollEnd: function () {
						document.querySelector('#feature-slide-list-items1 > a.current').className = '';
						document.querySelector('#feature-slide-list-items1 > a:nth-child(' + (this.currPageX+1) + ')').className = 'current';
						var	count=document.querySelectorAll("#feature-slide-list-items1 > a").length;
						if (pullDownEl_99.className.match('flip')) {
							pullDownEl_99.className = 'loading';
							scrollDirection(this,'next',count);		
						} else if (pullUpEl_99.className.match('flip')) {
							pullUpEl_99.className = 'loading';							
							scrollDirection(this,'prev',count);							
						}
					}
				 });
				 }
		
}

document.addEventListener('DOMContentLoaded',setTimeout(loadedFor99TeHui,100),false);
分享到:
评论

相关推荐

    基于iScroll的jQuery可滑动手机日期选择插件

    "基于iScroll的jQuery可滑动手机日期选择插件"就是为了满足这一需求而设计的。iScroll是一款强大的JavaScript滚动库,它允许开发者在Web应用中实现平滑、高性能的滚动效果,特别是在触屏设备上。结合jQuery的易用性...

    jQuery上下滑动加载刷新插件iscroll.js

    在Web开发中,用户界面的流畅性和交互性至关重要,iscroll.js就是这样一款强大的JavaScript插件,它使得开发者能够轻松实现页面内容的上下滑动加载和刷新功能,极大地提升了用户体验。本文将深入探讨iscroll.js的...

    iScroll滑动插件的使用示例

    在"iScroll滑动插件的使用示例"中,主要涉及以下几个关键知识点: 1. **取消默认滑动**:在HTML中,`&lt;ul&gt;`元素通常有自己的滚动行为,但这种默认行为可能不符合开发者的需求,尤其是在需要自定义滚动效果时。通过...

    iscroll+flipsnap实现左右上下滑动

    `iscroll`和`flipsnap`是两个非常有用的JavaScript库,它们可以帮助开发者实现高级的滚动和切换效果,提升网页的用户体验。下面将详细阐述这两个库的功能、原理以及如何在实际项目中结合使用。 `iscroll`是一个轻量...

    zepto+iscroll实现的仿JQM日期滑动插件

    按照zepto插件的形式编写的用于移动端的日期选择插件,参照了JQM提供的...使用iscroll插件来支持滑动。代码结构通俗易懂,方便编写zepto插件的初学者学习参考。在这里分享资源也只是抛砖引玉,希望能帮到需要的朋友!

    iscroll5 滑动 滚动

    在iscroll5中,开发者可以实现自定义滚动条、无限滚动、触摸滑动等多种功能,极大地优化了用户的交互体验。 **一、iscroll5的核心特性** 1. **高性能滚动**:iscroll5采用了硬件加速技术,通过CSS3属性如`...

    vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果

    【Vue + Any-Touch 实现IScroll:拖拽与滑动动画详解】 在现代Web开发中,实现流畅的触摸交互是提升用户体验的关键因素之一。Vue.js作为一款流行的前端框架,结合Any-Touch手势库,我们可以轻松创建类似IScroll的...

    iscroll滑动效果

    在这个简化版的demo中,我们将探讨iscroll如何实现横向滑动效果,并学习如何将其应用到实际项目中。 首先,iscroll的核心功能是提供流畅的滚动效果。在网页设计中,尤其是在移动设备上,原生的滚动行为可能无法满足...

    jquery iscroll下拉插件

    为了实现更加流畅、响应式的滚动体验,开发者常常会使用到jQuery iScroll这个强大的库。本文将深入探讨jQuery iScroll下拉刷新插件的使用方法、原理及其实现细节。 首先,我们要理解jQuery iScroll是什么。iScroll...

    H5基于iScroll实现下拉刷新,上拉加载更多

    本文将深入探讨如何利用iScroll来实现下拉刷新和上拉加载更多的功能,这两种功能在数据流应用、社交媒体和新闻聚合类网站中非常常见。 首先,我们需要理解下拉刷新和上拉加载的概念。下拉刷新通常用于更新页面内容...

    jquery-iscroll.js鼠标控制ul左右滑动

    在网页开发中,jQuery是一...通过以上步骤,你就能创建一个使用jQuery和iScroll.js实现的鼠标控制`&lt;ul&gt;`左右滑动的功能。在实际项目中,你可能需要根据需求调整参数,如滚动速度、弹性反弹效果等,以达到最佳用户体验。

    iscroll5上拉下拉实例完整demo

    **iscroll5上拉下拉实例完整demo**是基于iscroll5库的一个示例项目,主要针对移动Web环境,展示了如何实现平滑的滚动效果,包括上拉加载更多和下拉刷新的功能。iscroll5是Jacob Gohmann开发的一个轻量级的JavaScript...

    iscroll.js手机触屏滑动上拉加载和下拉刷新代码.zip

    《iscroll.js手机触屏滑动上拉加载与下拉刷新技术详解》 在移动互联网时代,优化用户体验是开发者必须面对的重要课题。iscroll.js是一个轻量级的JavaScript库,专为解决移动设备上的滚动问题而设计,尤其适用于...

    iscroll插件

    iscroll实现了这个功能,当用户滚动到内容区域的底部时,可以调用特定的API来更新数据,并显示刷新动画,待新数据加载完成后,自动恢复滚动状态。 2. **下拉加载(Infinite-Scrolling)**:下拉加载通常用于处理...

    iscroll5 demo

    3. **图片画廊**:在图片展示场景下,iscroll5可以用于实现图片的滑动浏览,尤其在移动端效果显著。 4. **地图应用**:iscroll5的平滑滚动和手势支持,使其在地图应用中也有广泛应用,例如进行地图的缩放和平移。 ...

    iscroll demo

    - **可滑动选项卡**:iscroll与选项卡结合,实现平滑切换。 - **自定义滚动条**:如何定义滚动条样式,使其融入页面设计。 - **无限滚动**:实现数据动态加载,模拟无限滚动列表。 - **轮播组件**:iscroll如何用于...

    iscroll4

    **iscroll4** 是一个轻量级的JavaScript库,由Matteo Spinelli开发,用于在Web页面上实现平滑的滚动效果。iscroll主要用于处理触摸设备和鼠标滚轮事件,提供高性能的滚动功能,特别是在移动端,它可以替代浏览器原生...

    iscroll.js下载 5.1.3最新版本

    2. **iscroll-zoom.js**(如果包含):这个文件扩展了iscroll的基本功能,允许用户在iscroll区域内实现缩放操作,适用于需要图片或内容放大查看的场景。 3. **iscroll-probe.js**(如果包含):这个版本的iscroll...

    iscroll5 不改动官方源码下拉刷新

    这个项目“iscroll5 不改动官方源码下拉刷新”提供了一种方法,使得开发者能够在不修改iscroll5核心源码的前提下实现下拉刷新功能。这在维护性和更新兼容性方面具有显著优势,因为直接修改开源库的源码可能导致未来...

Global site tag (gtag.js) - Google Analytics