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



59 232 78



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



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


热门标签: 导航切换 图片淡出淡进 带标题的焦点图 缩略图 文字淡出淡进 带缩略图的幻灯片 图片相册 带简介的焦点图 图片切换 图片轮播 图片墙 文字切换 自动滚动图片轮播 百叶窗 背景切换 图片网格 马赛克幻灯片 手风琴 图片九宫格 全屏焦点图 选项卡自动切换 视频切换 图片高亮 列表切换 图片对比 图片文字 渐隐切换 单排图片 全屏切换 响应式图片 切换按钮 图片列表 缩放切换 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 滚动切换 滑动选项卡切换 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 flash焦点图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 自动滚动图片轮播 图标导航菜单 选项卡切换 滑动手风琴 背景切换 手风琴 渐隐切换 淡出淡入淡进 图表 焦点图幻灯片 图片 头像截图

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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