js代码iPhone手机触屏网页TouchScroll插件手机网页开发



102 406 136



特效描述:js代码 iPhone手机触屏 网页TouchScroll 手机网页开发,js代码触屏手机开发TouchScroll插件制作iPhone手机触屏效果。iPhone手机网页带幻灯片触屏鼠标或手指滑动幻灯片切换。触屏手机开发应用js代码。

代码结构

1. 引入JS

<script type="text/javascript" src="js/touchScroll.js"></script>
<script type="text/javascript" src="js/touchslider.dev.js"></script>

2. HTML代码

<div class="iphonebox">
	<div class="webbox">
		<div id="header"><a href="http://www.qiqiboy.com/2012/04/01/touchscroll-v1-0-publish.html">TouchScroll手机触屏打开网页</a></div>
		<div id="wrapper">
			<div class="swipe">
				<ul id="slider">
					<li style="display:block"><img width="326" height="235" src="images/1.jpg" alt="" /></li>
					<li><img width="326" height="235" src="images/2.jpg" alt="" /></li>
					<li><img width="326" height="235" src="images/3.jpg" alt="" /></li>
					<li><img width="326" height="235" src="images/4.jpg" alt="" /></li>
				</ul>
				<div id="pagenavi">
					<a href="javascript:void(0);" class="active">1</a>
					<a href="javascript:void(0);">2</a>
					<a href="javascript:void(0);">3</a>
					<a href="javascript:void(0);">4</a>
				</div>
			</div><!--swipe end-->
			<div id="scroller">
				<ul>
					<li><img src="images/img01.jpg" /><span>叙利亚战机轰炸叙土边境致6死</span></li>
					<li><img src="images/img02.jpg" /><span>寒冬!李宁匹克上千家门店倒闭</span></li>
					<li><img src="images/img03.jpg" /><span>梅西压C罗连续三年夺西甲MVP</span></li>
					<li><img src="images/img04.jpg" /><span>传姚晨曹郁完婚 宣传:会通知</span></li>
					<li><img src="images/img05.jpg" /><span>Nexus4开卖 22分钟抢购一空</span></li>
					<li><img src="images/img01.jpg" /><span>叙利亚战机轰炸叙土边境致6死</span></li>
					<li><img src="images/img02.jpg" /><span>寒冬!李宁匹克上千家门店倒闭</span></li>
					<li><img src="images/img03.jpg" /><span>梅西压C罗连续三年夺西甲MVP</span></li>
					<li><img src="images/img04.jpg" /><span>传姚晨曹郁完婚 宣传:会通知</span></li>
					<li><img src="images/img05.jpg" /><span>Nexus4开卖 22分钟抢购一空</span></li>
					<li><img src="images/img01.jpg" /><span>叙利亚战机轰炸叙土边境致6死</span></li>
					<li><img src="images/img02.jpg" /><span>寒冬!李宁匹克上千家门店倒闭</span></li>
					<li><img src="images/img03.jpg" /><span>梅西压C罗连续三年夺西甲MVP</span></li>
					<li><img src="images/img04.jpg" /><span>传姚晨曹郁完婚 宣传:会通知</span></li>
					<li><img src="images/img05.jpg" /><span>Nexus4开卖 22分钟抢购一空</span></li>
				</ul>
			</div><!--scroller end-->
		</div>
		<div id="footer"><a href="http://www.51qianduan.com/">不支持IE6、7、8</a></div>
	</div>
</div>
<script type="text/javascript">
var active=0,
	as=document.getElementById('pagenavi').getElementsByTagName('a');
for(var i=0;i<as.length;i++){
	(function(){
		var j=i;
		as[i].onclick=function(){
			t2.slide(j);
			return false;
		}
	})();
}
var t1=new TouchScroll({id:'wrapper','width':5,'opacity':0.7,color:'#555',minLength:20});
var t2=new TouchSlider({id:'slider', speed:600, timeout:6000, before:function(index){
		as[active].className='';
		active=index;
		as[active].className='active';
	}});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 导航切换 滑动选项卡切换 图片滑动 图片切换 文字滑动 文字切换 滑动手风琴 背景切换 滑动星星打分 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滑动滑过 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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