jQuery帶縮略圖幻燈片輪播切換代碼



68 268 90



特效描述:jQuery 帶縮略圖 幻燈片輪播切換,jQuery帶縮略圖幻燈片輪播切換代碼

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代碼

<div class="ag7-main">
	<div class="ag7-bannerslide">
		<ul class="slidebox">
			<li><a href="http://www.cqetom.live//" target="_blank"><img alt="百元檔激斗" src="images/big1.jpg" ></a></li>
			<li><a href="http://www.cqetom.live//" target="_blank"><img alt="天生美顏" src="images/big2.jpg" ></a></li>
			<li><a href="http://www.cqetom.live//" target="_blank	"><img alt="4G全網通" src="images/big3.jpg" ></a></li>
			<li><a href="http://www.cqetom.live//" target="_blank	"><img alt="你彎了嗎?" src="images/big4.jpg" ></a></li>
		</ul>
		<div class="slideinfo">
			<div class="slidetitle">
				<h2></h2>
				<h3></h3>
			</div>
			<div class="slidelist">
				<ul>
					<li data-h1="百元檔激斗" data-h2="小米 /bong2 /37度手環對比評測視頻">
					<img width="50" height="22" src="images/s1.jpg" alt="">
					</li>
					<li data-h1="天生美顏" data-h2="美圖 M4 智能手機體驗視頻">
					<img width="50" height="22" src="images/s2.jpg" alt="">
					</li>
					<li data-h1="4G全網通" data-h2="三星Galaxy S6 edge零售版首發體驗視頻">
					<img width="50" height="22" src="images/s3.jpg" alt="">
					</li>
					<li data-h1="你彎了嗎?" data-h2="LG G Flex2上手體驗視頻">
					<img width="50" height="22" src="images/s4.jpg" alt="">
					</li>
				</ul>
				<span class="mask"></span>
			</div>
		</div>
	</div>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子