jquery自适应全屏图片幻灯片轮播和鼠标滑过图标导航向上滑动展示菜单



216 860 287



特效描述:jquery 适应全屏 图片幻灯片 轮播 鼠标滑过 图标导航 向上滑动展示菜单,鼠标滑过图标导航向上滑动展示菜单

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/banner.js"></script>

3. HTML代码

<div class="index-banner">
	<div class="index_banner_cont">
		<div class="index_banner_scroll">
			<div><img src="images/2013080315151043.jpg" width="1900" height="421" alt="Banner001" /></div>
			<div><img src="images/2013080315152056.jpg" width="1900" height="421" alt="Banner002" /></div>
			<div><img src="images/2013080315153420.jpg" width="1900" height="421" alt="Banner003" /></div>
		</div>
	</div>
	<div class="banner_btn">
		<div class="banner_list">
			<span></span>
			<span></span>
			<span></span>
		</div>
		<div class="banner_span">
			<a href="javascript:void(0)"><img src="images/2013072519022574.jpg" width="49" height="42" alt="" /></a>
			<a href="javascript:void(0)"><img src="images/2013072519024313.jpg" width="49" height="42" alt="" /></a>
			<a href="javascript:void(0)"><img src="images/2013072519025292.jpg" width="49" height="42" alt="" /></a>
		</div>
	</div>
	<div class="index-btn browser">
		<span class="btn1" title="深圳网站建设沙漠风-成功案例" onclick="location.href='http://www.dijiuzhanzhang.com'">成功案例</span>
		<span class="btn2" title="深圳网站建设沙漠风-网站推广" onclick="location.href='http://www.dijiuzhanzhang.com'">网站推广</span>
		<span class="btn3" title="深圳网站建设沙漠风-手机网站" onclick="location.href='http://www.dijiuzhanzhang.com'">手机网站</span>
		<span class="btn4" title="深圳网站建设沙漠风-我们的实力" onclick="location.href='http://www.dijiuzhanzhang.com'">我们的实力</span>
	</div>
	<div class="index_menu">
		<div class="index_menu_item menuItem1"><img src="images/menu_pic1.jpg" width="258" height="112" alt="" />
			<div class="clearfix">
				<a href="http://www.dijiuzhanzhang.com">知名客户</a>
				<a href="http://www.dijiuzhanzhang.com">网站案例</a>
				<a href="http://www.dijiuzhanzhang.com">客户评价</a>
				<a href="http://www.dijiuzhanzhang.com">客户列表</a>
			</div>
		</div>
		<div class="index_menu_item menuItem2"><img src="images/menu_pic2.jpg" width="258" height="112" alt="" />
			<div class="clearfix">
				<a href="http://www.dijiuzhanzhang.com" title="网站优化" >网站优化</a>
				<a href="http://www.dijiuzhanzhang.com" title="网站云推广" >网站云推广</a>
				<a href="http://www.dijiuzhanzhang.com" title="网站软文推广" >网站软文推广</a>
			</div>
		</div>
		<div class="index_menu_item menuItem3"><img src="images/menu_pic3.jpg" width="258" height="112" alt="" />
			<div class="clearfix">
				<a href="http://www.dijiuzhanzhang.com">手机网站案例</a>
				<a href="http://www.dijiuzhanzhang.com">手机网站建设</a>
				<a href="http://www.dijiuzhanzhang.com">苹果手机应用 </a>
				<a href="http://www.dijiuzhanzhang.com">安卓手机应用</a>
				<a href="http://www.dijiuzhanzhang.com">手机解决方案</a>
			</div>
		</div>
		<div class="index_menu_item menuItem4"><img src="images/menu_pic4.jpg" width="258" height="112" alt="" />
			<div class="clearfix">
				<a href="http://www.dijiuzhanzhang.com" title="关于沙漠风">关于沙漠风</a>
				<a href="http://www.dijiuzhanzhang.com" title="实力认可">实力认可</a>
				<a href="http://www.dijiuzhanzhang.com" title="沙漠风与众不同">沙漠风与众不同</a>
				<a href="http://www.dijiuzhanzhang.com" title="理念与信仰">理念与信仰</a>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> 
<script type="text/javascript" src="js/banner.js"></script> 



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动选项卡 滑动切换 滚动切换 滚动条切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 滑动手风琴 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 全屏焦点图 收缩展开 展开收缩 收缩 展开 渐隐切换 全屏切换 淡出淡进 淡出 淡进 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 焦点图 幻灯片 轮播图 bar焦点图 收缩菜单 收缩导航 图片淡出淡进 图片淡出 图片淡进 图片全屏 滑动选项卡 滑动切换 图片切换 图片选项卡 图标选项卡 纯图片轮播 图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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