html5手机幻灯片制作手指滑动触屏手机幻灯片代码



72 285 96



特效描述:html5手机幻灯片 手指滑动触屏 手机幻灯片代码,手指滑动

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css">

2. 引入JS

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

3. HTML代码

<div class="hdp-box">
	<div class="title">明3:45尤文蓝军生死战</div>
	<div id="slider" class="swipe">
		<ul class="piclist">
			<li><p>明3:45尤文蓝军生死战</p><img src="images/img05.jpg"></li>
			<li><p>赛季巡礼福建:王哲林领衔青年军</p><img src="images/img06.jpg"></li>
			<li><p>《现代战争4 零爆点》新视频放出 热血满点</p><img src="images/img07.jpg"></li>
			<li><p>曼联拟5000万购德国双星</p><img src="images/img08.jpg"></li>
		</ul>
	</div>
	<div class="count">
		<b class="bi">1</b>/<b class="bcount"></b>
	</div>
	<span class="s_intro">
		<b class="b_btn">查看更多>></b>
		<div class="intro">本场比赛麦蒂(微博)在上半场比赛仅仅出场1分38秒的时间,在出场2投2中得到5分之后,麦蒂就一直未有登场。由于比赛场馆暖气供应不足过冷,麦蒂为避免受伤之后一直坐在板凳席上,加上上午的时候麦蒂因为肠胃不舒服缺席了训练</div>
	</span>
</div>
<script type="text/javascript">
$(function(){
	var num=$('#slider').find('li').size();
	$('.bcount').text(num);	
	$('.b_btn').click(function(){
		$(this).toggleClass('b_btn_active');
		$('.intro').toggle();
	})
})
var tt=new TouchSlider({id:'slider','auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){
	var es=document.getElementById('slider').getElementsByTagName('li');
	var it=$(es[index]).index()+1;	
	$('.bi').text(it);	
	var tx=$(es[index]).find('p').text();	
	$('.title').text(tx);
}});
</script>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 拖动 拖拽 拖动插件 拖拽插件 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 焦点图 幻灯片 轮播图 bar焦点图 图片拖动 图片拖拽 带简介的焦点图 图片切换 图片选项卡 图标选项卡

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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