jQuery全屏焦点图片带图标导航按钮控制图片滑动切换



146 582 195



特效描述:jQuery 全屏焦点图 图标导航按钮控制 图片滑动切换,jquery全屏焦点图片切换制作图标导航按钮控制图片滑动切换,图片轮播依次上下滑动显示和左右滑动显示。

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

	<div class="banner">
		<div class="frame960 relative">
			<div class="banner-img absolute">
				<div class="relative">
					<div class="leftimg left1" moveInDerection="6" moveInSpeed="1000" moveInType="linear" fadeInSpeed="1000" fadeInType="linear" moveOutDerection="2" moveOutSpeed="1000" moveOutType="linear" fadeOutSpeed="1000" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="343" height="420" src="images/bannerindex-5/text.png" alt="盈峰资本网站建设上线"/></a>
					</div>
					<div class="rightimg right1" moveInDerection="2" moveInSpeed="1000" moveInType="linear" fadeInSpeed="1000" fadeInType="linear" moveOutDerection="2" moveOutSpeed="1000" moveOutType="linear" fadeOutSpeed="1000" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="742" height="386" src="images/bannerindex-5/pic.png" alt="盈峰资本网站建设上线"/></a>
					</div>
					<div class="leftimg left2" moveInDerection="7" moveInSpeed="1000" moveInType="linear" fadeInSpeed="1000" fadeInType="linear" moveOutDerection="7" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="700" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="343" height="420" src="images/bannerindex-2/text.png" alt="深中润投资控股网站改版"/></a>
					</div>
					<div class="rightimg right2" moveInDerection="3" moveInSpeed="700" moveInType="linear" fadeInSpeed="700" fadeInType="linear" moveOutDerection="3" moveOutSpeed="1500" moveOutType="linear" fadeOutSpeed="700" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="722" height="388" src="images/bannerindex-2/pic.png" alt="深中润投资控股网站改版"/></a>
					</div>
					<div class="leftimg left3" moveInDerection="8" moveInSpeed="700" moveInType="linear" fadeInSpeed="500" fadeInType="linear" moveOutDerection="4" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="700" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="343" height="420" src="images/bannerindex-1/text.png" alt="盐田港环球网站建设"/></a>
					</div>
					<div class="rightimg right3" moveInDerection="4" moveInSpeed="700" moveInType="linear" fadeInSpeed="500" fadeInType="linear" moveOutDerection="4" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="700" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="673" height="346" src="images/bannerindex-1/pic.png" alt="盐田港环球网站建设"/></a>
					</div>
					<div class="leftimg left4" moveInDerection="3" moveInSpeed="700" moveInType="linear" fadeInSpeed="500" fadeInType="linear" moveOutDerection="3" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="700" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="273" height="424" src="images/bannerindex-3/text.png" alt="兰开夏大学中文版改版"/></a>
					</div>
					<div class="rightimg right4" moveInDerection="7" moveInSpeed="700" moveInType="linear" fadeInSpeed="500" fadeInType="linear" moveOutDerection="7" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="700" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="687" height="424" src="images/bannerindex-3/pic.png" alt="兰开夏大学中文版改版"/></a>
					</div>
					<div class="leftimg left5" moveInDerection="3" moveInSpeed="700" moveInType="linear" fadeInSpeed="500" fadeInType="linear" moveOutDerection="7" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="500" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="289" height="420" src="images/bannerindex-4/text.png" alt="面点王品牌网站改版"/></a>
					</div>
					<div class="rightimg right5" moveInDerection="7" moveInSpeed="700" moveInType="linear" fadeInSpeed="500" fadeInType="linear" moveOutDerection="7" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="500" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="809" height="420" src="images/bannerindex-4/pic.png" alt="面点王品牌网站改版"/></a>
					</div>
					<div class="leftimg left6" moveInDerection="2" moveInSpeed="700" moveInType="linear" fadeInSpeed="500" fadeInType="linear" moveOutDerection="6" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="500" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="343" height="420" src="images/bannerindex-2/text.png" alt="联塑官网改版上线"/></a>
					</div>
					<div class="rightimg right6" moveInDerection="6" moveInSpeed="700" moveInType="linear" fadeInSpeed="500" fadeInType="linear" moveOutDerection="2" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="500" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="809" height="420" src="images/bannerindex-6/pic.png" alt="联塑官网改版上线"/></a>
					</div>
					<div class="leftimg left7" moveInDerection="8" moveInSpeed="700" moveInType="linear" fadeInSpeed="500" fadeInType="linear" moveOutDerection="4" moveOutSpeed="700" moveOutType="linear" fadeOutSpeed="500" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="273" height="424" src="images/bannerindex-3/text.png" alt="扬智科技品牌网站制作"/></a>
					</div>
					<div class="rightimg right7" moveInDerection="4" moveInSpeed="700" moveInType="linear" fadeInSpeed="500" fadeInType="linear" moveOutDerection="8" moveOutSpeed="1000" moveOutType="linear" fadeOutSpeed="500" fadeOutType="linear">
						<a href="http://www.dijiuzhanzhang.com"><img width="687" height="424" src="images/bannerindex-3/pic.png" alt="扬智科技品牌网站制作"/></a>
					</div>
				</div>
			</div>
			<ul class="banner-bt absolute">
				<li><a class="pointer" target="1"><span class="ico" style="background-image:url('images/bannerindex-5/icon.png')"></span></a></li>
				<li><a class="pointer" target="2"><span class="ico" style="background-image:url('images/bannerindex-2/icon.png')"></span></a></li>
				<li><a class="pointer" target="3"><span class="ico" style="background-image:url('images/bannerindex-1/icon.png')"></span></a></li>
				<li><a class="pointer" target="4"><span class="ico" style="background-image:url('images/bannerindex-3/icon.png')"></span></a></li>
				<li><a class="pointer" target="5"><span class="ico" style="background-image:url('images/bannerindex-4/icon.png')"></span></a></li>
				<li><a class="pointer" target="6"><span class="ico" style="background-image:url('images/bannerindex-6/icon.png')"></span></a></li>
				<li><a class="pointer" target="7"><span class="ico" style="background-image:url('images/bannerindex-7/icon.png')"></span></a></li>
			</ul>
		</div>
	</div>



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


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 切换按钮 表单 导航菜单 导航切换 图片滑动 图标导航菜单 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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