基于jQuery实现手机焦点图拖动切换特效代码



35 136 46



特效描述:基于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

加群请备注:从官网了解到