`

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);
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics