基于jQuery实现TAB箭头标签幻灯片切换



26 103 35



特效描述:基于jQuery实现 TAB箭头标签 幻灯片切换,基于jQuery实现TAB箭头标签幻灯片切换

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>

3. HTML代码

<!-- Banner -->
<div class="slide" id="PicSlide">
	<ul class="img">
		<li style="display: list-item;">
		<a href="http://51qianduan.com" target="_blank" title=" 中国“和平方舟”号医院船抵达亚丁湾">
		<img src="images/thumb_640_360_1349779141347.jpg" width="640" height="360" alt="当地时间9月15日,执行“和谐使命—2010”任务的中国“和平方舟”号医院船航行5300余海里驶抵亚丁湾。2天后,医院船将与正在亚丁湾海域执行护航任务的中国海军第六批舰艇编队会合,展开全方位的医疗服务。" data-pinit="registered"></a></li>
		<li class="hidden" style="display: none;">
		<a href="http://51qianduan.com" target="_blank" title="美国自然历史博物馆幕后鲜为人知的工作">
		<img src="images/thumb_640_360_1349779282588.jpg" width="640" height="360" alt="美国自然历史博物馆幕后鲜为人知的工作- 51qianduan.com" data-pinit="registered"></a></li>
		<li class="hidden" style="display: none;">
		<a href="http://51qianduan.com" target="_blank" title="张召忠:解决南海争端时擦枪走火很正常">
		<img src="images/thumb_640_360_1349776343282.jpg" width="640" height="360" alt="越南19日连续第三个周末发生反华抗议,一些示威者喊出“打倒中国”之类的激烈口号。在对示威管控严密的越南,这种连续公开抗议被认为非常罕见。与中国 关系紧张之际,越南又向美国靠了一步,两国17日发表共同声明,呼吁南海“航行自由”,并探讨把双方关系提升到“战略级”。" data-pinit="registered"></a></li>
		<li class="hidden" style="display: none;">
		<a href="http://51qianduan.com" target="_blank" title=" 北京市区17日拥堵路段峰值超140条创纪录">
		<img src="images/thumb_640_360_1349778701818.jpg" width="640" height="360" alt="9月17日,北京市区晚高峰拥堵路段峰值超140条,已经超过今年年初因大雪造成90余条拥堵路段峰值的纪录。" data-pinit="registered"></a></li>
		<li class="hidden" style="display: none;">
		<a href="http://51qianduan.com" target="_blank" title=" 全国141万人参加国考争1.6万岗位">
		<img src="images/thumb_640_360_1349778567239.jpg" width="640" height="360" alt="国家公务员招录公共科目笔试开考,今年考生超过140万,将竞争137个招考单位的1.6万余岗位,平均竞争比达到88比1。据统计,今年是笔试资格审核考生人数连续第3年突破百万人,而2003年这一数字仅为8.7万。" data-pinit="registered"></a></li>
	</ul>
	<!-- 标题区 -->
	<div class="title">
		<p class="h3 pos-a"><a title href="http://51qianduan.com">当地时间9月15日,执行“和谐使命—2010”任务的中国“和平方舟”号医院船航行5300余海里驶抵亚丁湾。2天后,医院船将与正在亚丁湾海域执行护航任务的中国海军第六批舰艇编队会合,展开全方位的医疗服务。</a></p>
		<div class="shadow">
		</div>
	</div>
	<!-- 缩略图 -->
	<div class="thumb">
		<ul>
			<li>
			<a href="http://51qianduan.com" target="_blank" title=" 中国“和平方舟”号医院船抵达亚丁湾">
			<img src="images/thumb_120_60_1349779141347.jpg" width="120" height="60" alt=" 中国“和平方舟”号医院船抵达亚丁湾"></a></li>
			<li>
			<a href="http://51qianduan.com" target="_blank" title="美国自然历史博物馆幕后鲜为人知的工作">
			<img src="images/thumb_120_60_1349779282588.jpg" width="120" height="60" alt="美国自然历史博物馆幕后鲜为人知的工作"></a></li>
			<li>
			<a href="http://51qianduan.com" target="_blank" title="张召忠:解决南海争端时擦枪走火很正常">
			<img src="images/thumb_120_60_1349776343282.jpg" width="120" height="60" alt="张召忠:解决南海争端时擦枪走火很正常"></a></li>
			<li>
			<a href="http://51qianduan.com" target="_blank" title=" 北京市区17日拥堵路段峰值超140条创纪录">
			<img src="images/thumb_120_60_1349778701818.jpg" width="120" height="60" alt=" 北京市区17日拥堵路段峰值超140条创纪录"></a></li>
			<li>
			<a href="http://51qianduan.com" target="_blank" title=" 全国141万人参加国考争1.6万岗位">
			<img src="images/thumb_120_60_1349778567239.jpg" width="120" height="60" alt=" 全国141万人参加国考争1.6万岗位"></a></li>
		</ul>
		<div class="now-status" style="left: 0px;">
		</div>
	</div>
</div>
<!-- @end Banner -->
<script type="text/javascript">
    $(document).ready(function(){
        //幻灯片调用
        slider.init({'id': $('#PicSlide'), way:'left', interval: 4000});
    });
</script>
<div style="text-align:center;clear:both"><br>
</div>



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


热门标签: 图片叠加 图片层叠 图片翻转 图片旋转 图片拖动 图片拖拽 图片延迟加载 图片延迟 图片加载 图片淡出淡进 图片淡出 图片淡进 图片全屏 头像上传 图片上传 二维码 图片放大镜 h5图片动画 h5图标动画 html5图片动画 html5图标动画 带缩略图的幻灯片 地图 中国地图 世界地图 flash焦点图 flash幻灯片 flashbanner flash图片轮播 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 滚动切换 滚动条切换 图片广告 滑动选项卡 滑动切换 纯图片轮播 图片轮播 图片收缩展开 图片收缩 图片展开 图片滚动 图片滚动条 图片滑动 图片滑块 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片切换 图片选项卡 图标选项卡 图标导航 图标菜单 自动滚动图片轮播 滑动手风琴 背景切换 大图切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 渐隐切换 淡出淡进 淡出 淡进 图表 焦点图 幻灯片 轮播图 bar焦点图 图片 图片插件 头像截图 图片淡出淡进 图片淡出 图片淡进 缩略图 带简介的焦点图 图片切换 图片选项卡 图标选项卡 选项卡自动切换 图片切换 切换图片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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