基于jQuery實現手機焦點圖拖動切換特效代碼



30 116 39



特效描述:基于jQuery實現 手機焦點圖 拖動切換,基于jQuery實現手機焦點圖拖動切換特效代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/jquery.jslides.css" media="screen" />
<link href="css/widget/slider/slider.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>

3. HTML代碼

<div class="wraper" style="width:640px;">
<header id="scroll_pic_view" class="scroll_pic_view" style="overflow: hidden; ">
	<div id="scroll_pic_view_div" style="width: 3840px; -webkit-transition: -webkit-transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px); ">
		<ul id="scroll_pic_view_ul">
						<li style="width: 640px; ">
								<a onclick="return false;">
									<img src="images/banner.jpg" width="640" height="300">
				</a>
			</li>
						<li style="width: 640px; ">
								<a onclick="return false;">
									<img src="images/banner.jpg" width="640" height="300">
				</a>
			</li>
						<li style="width: 640px; ">
									<a href="#">
						  <img src="images/banner.jpg" width="640" height="300"> </a>
			</li>
						<li style="width: 640px; ">
								<a onclick="return false;">
									<img src="images/banner.jpg" width="640" height="300">
				</a>
			</li>
						<li style="width: 640px; ">
								<a onclick="return false;">
									<img src="images/banner.jpg" width="640" height="300">
				</a>
			</li>
						<li style="width: 640px; ">
								<a onclick="return false;">
									<img src="images/banner.jpg" width="640" height="300">
				</a>
			</li>
		</ul>
	</div>
	<div>
		<ol id="scroll_pic_nav" class="scroll_pic_nav">
			<script>
				(function(d, $){
					var scrollPicView = d.getElementById("scroll_pic_view"),
					scrollPicViewDiv = d.getElementById("scroll_pic_view_div"),
					lis = scrollPicViewDiv.querySelectorAll("li"),
					w = scrollPicView.offsetWidth,
					len = lis.length;
					for(var i=0; i<len; i++){
						lis[i].style.width = w+"px";
						if(i == len-1){
							scrollPicViewDiv.style.width = w * len + "px";
						}
					}
					var scroll_pic_view = new iScroll('scroll_pic_view', { 
						snap: true,
						momentum: false,
						hScrollbar: false,
						useTransition: true,
						onScrollEnd: function() {
							$("#scroll_pic_nav li").removeClass("on").eq(this.currPageX).addClass("on");
							//$("#scroll_pic_nav li.on").prev().addClass("left");
							//$("#scroll_pic_nav li.on").next().removeClass("left");	
							var  list=$("#scroll_pic_nav li");
							for(var k=0;k<list.length;k++){
								if(k<this.currPageX)
									$(list[k]).addClass("left");
								else
									$(list[k]).removeClass("left");
							}												
						}
					});
					//
					var nav_lis = new Array(lis.length);
					d.write('<li class="on"><span>1</span></li>');
					for(var i=1; i<nav_lis.length; i++){										
						d.write("<li><span>"+(i+1)+"</span></li>");				
					}
				})(document, $);
			</script>
           <!-- <li class="on"><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li><li><span>5</span></li><li><span>6</span></li> -->
		</ol>
	</div>
</header>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 拖動 拖拽 拖動插件 拖拽插件 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 圖片拖動 圖片拖拽 圖片切換 圖片選項卡 圖標選項卡
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子