jquery banner焦點圖小圖標提示全屏滑動輪播



240 957 320



特效描述:jquery banner焦點圖 小圖標提示 全屏滑動輪播,jquery圖片特效制作一個全屏自動向左滾動輪播的banner焦點圖幻燈片,帶3個小圖標導航,鼠標滑過圖標提示詳細文字信息,點擊切換焦點圖全屏滾動輪播。

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tool.js"></script>
<script type="text/javascript" src="js/focus.js"></script>

2. HTML代碼

<script type="text/javascript" src="js/jquery.tool.js"></script> 
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋體";}
/* p-top */
#p-top{margin:0 auto;padding:0 10px;width:930px;text-align:left;}
#p-top{background:none;width:auto;min-width:990px;padding:0;}
#p-banner-1{background: #EDEDED url(images/p-banner1.jpg) repeat-x 50% 0px;}
#p-top-banner .p-banner-small-1{background: url(images/p-banner1-small.png) no-repeat 0 80%;}
#p-banner-2{background: #EDEDED url(images/p-banner2.jpg) repeat-x 50% 0px ;}
#p-top-banner .p-banner-small-2{background: url(images/p-banner2-small.png) no-repeat 0px 80%;}
#p-banner-3{background: #EDEDED url(images/p-banner3.jpg) repeat-x 50% 0px;}
#p-top-banner .p-banner-small-3{background: url(images/p-banner3-small.png) no-repeat 0px 50%;}
.p-home-banner{width:990px;padding:0;margin:0 auto;clear:both;}
.p-home-banner:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#p-top-banner img,#p-top-banner h1,#p-top-banner h2,#p-top-banner h3{padding:0;margin:0;}
#p-top-banner h1,#p-top-banner h2,#p-top-banner h3{position:relative;}
#p-top-banner{background:#EFEFEF;border-bottom:1px solid #C0C0AE;}
#p-top-banner.p-container{margin:0;}
#p-top-banner.p-top-qh .p-container-body{clear:both;position:relative;height:400px;border:0 none;background:none;margin:0;}
#p-top-banner .p-top-qh-pane{position:relative;height:400px;overflow:hidden;clear:both;}
#p-top-banner .p-top-qh-pane h1 img,#p-top-banner .p-top-qh-pane h2 img{margin-top:80px;}
#p-top-banner .p-bannerqh{position:absolute;overflow:hidden;}
#p-top-banner .p-bannerqh .p-home-banner{clear:none;height:400px;overflow:hidden;width:100%;margin:0;float:left;}
#p-top-banner .p-bannerqh .p-home-banner .p-banner1-1-1{width:990px;margin:0 auto;text-align:left}
#p-top-banner .p-top-qh-nav{margin:-15px 100px 0 0;width:200px;height:20px;float:right;display:inline;}
#p-top-banner .p-top-qh-nav a{width:45px;height:30px;position:relative;z-index:2100;display:inline-block;text-decoration:none;padding:0;margin:3px 5px;font-size:1px;outline:0;border:3px solid #EEE;border:3px solid rgba(255,255,255,0.6);box-shadow:0 1px 3px rgba(0,0,0,0.6);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.6);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.6);}
#p-top-banner .p-top-qh-nav a .p-top-qh-view{width:45px;height:30px;}
#p-top-banner .p-top-qh-nav a.p-active{top:-5px;}
#p-top-banner .p-top-qh-nav a:hover,#p-top-banner .p-top-qh-nav a.p-active{border:3px solid #FFF;border:3px solid rgba(255,255,255,0.9);box-shadow:0 1px 3px rgba(0,0,0,0.85);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.85);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.85);}
#p-top-banner .p-top-qh-nav a .p-banner-small-alt{display:none;background:url(images/p-banner-small-bg.png) no-repeat 0 0;_background-image:url("images/p-banner-small-bg-ie6.png");cursor:pointer;position:absolute;text-align:left;width:328px;height:113px;top:-115px;left:-237px;}
#p-top-banner .p-top-qh-nav a.p-active .p-banner-small-alt{top:-110px;}
#p-top-banner .p-top-qh-nav a .p-banner-small-alt span.p-banner-small-1,#p-top-banner .p-top-qh-nav a .p-banner-small-alt span.p-banner-small-2,#p-top-banner .p-top-qh-nav a .p-banner-small-alt span.p-banner-small-3{display:block;border:1px solid #FFF;width:60px;height:60px;margin:18px 10px 5px 20px;_margin:20px 6px 5px 12px;float:left;}
#p-top-banner .p-top-qh-nav a .p-banner-small-alt h2{font-weight:bold;color:#FFDF4E;text-shadow:0 1px 0 rgba(0,0,0,.5);font-size:12px;margin:0;padding:15px 20px 0 0;}
#p-top-banner .p-top-qh-nav a .p-banner-small-alt p{font-size:11px;color:#999;text-shadow:0 1px 0 rgba(0,0,0,.5);margin:0;padding:0 20px 5px 0;line-height:14px;}
#p-top-banner .p-top-qh-nav a .p-banner-small-alt:hover h2{color:#FFC;}
#p-top-banner .p-top-qh-nav a .p-banner-small-alt:hover p{color:#CCC;}
#p-top-banner a.p-top-qh-next,#p-top-banner a.p-top-qh-prev{display:none;}
.p-container{margin:0 0 1.2em;width:100%;}
.p-container .p-container-body h2,.p-container.p-alternate-two h2,.p-container.p-alternate-six h2{background:none;border:none;}
.p-subtittle{position:absolute;left:-3000px;width:500px;}
.banner-buttom{position:absolute;bottom:0px;width:100%;height:30px;cursor:pointer;z-index:40;border-top:1px solid rgba(0, 0, 0, 0.1);
margin:0 auto;min-width:990px;text-align:center;}
.news-border{border-top:1px solid rgba(255, 255, 255, 0.3)!important;border-top:1px solid #C0C0AE;}
</style>
	<div id="p-top">
		<div id="p-top-banner" class="p-container p-top-qh">
			<div id="p-top-main" class="p-container-body">
				<div class="p-top-qh-pane">
					<div class="p-bannerqh">
						<div class="p-home-banner p-selected-view" id="p-banner-1">
							<div class="p-banner1-1-1">
								<h1><a href="http://www.dijiuzhanzhang.com/"><img src="images/p-banner2-wenzi.png" alt="巔峰體驗,震撼視界" class="p-banner-wenzi" ></a></h1>
								<p class="p-subtittle"><em>旗瀚ISP創新技術提供新一代經濟、低功耗、高效的HD-SDI視頻監控解決方案</em></p>
							</div>
						</div>
						<div class="p-home-banner p-alternate" id="p-banner-2">
							<div class="p-banner1-1-1">
								<h2><a href="http://www.dijiuzhanzhang.com/"><img src="images/p-banner3-wenzi.png" alt="穩定系統架構 高速網絡體驗" class="p-banner-wenzi" /></a></h2>
								<p class="p-subtittle"><em>全高清1080P分辨率輸出<br />16路D1 H.264實時記錄和回放</em></p>
							</div>    
						</div>
						<div class="p-home-banner" id="p-banner-3">
							<div class="p-banner1-1-1">
								<h2><a href="http://www.dijiuzhanzhang.com/"><img src="images/p-banner1-wenzi.png" alt="快速響應 無懈可擊" class="p-banner-wenzi"></a></h2>
								<p class="p-subtittle"><em>32位ARM處理器, 多國語言,工作溫度-40℃~+60℃,IP67防水等級<span></span></em></p>
							</div>    
						</div>
					</div>
				</div>
				<div class="banner-buttom">   
					<div class="news-border">
						<div class="p-top-qh-nav">
							<a class="p-active" href="#0"></a>  
							<a href="#1"></a>  
							<a href="#2"></a>
						</div>
					</div>
				</div>  
			</div>
		</div>
	</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動選項卡 滑動切換 滾動切換 滾動條切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 全屏焦點圖 全屏切換 寬屏全屏 寬屏 全屏 頁面全屏 頁面寬屏 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片全屏 帶縮略圖的幻燈片 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子