jQuery仿百度百家首頁新聞焦點圖切換效果代碼



123 490 164



特效描述:首頁焦點圖 新聞焦點圖 切換效果,兼容性好!

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div class="top_slide_wrap">
	<div class="bx-wrapper">
		<ul class="slide_box">
			<li><a href="http://www.dijiuzhanzhang.com/"><img src="images/s1.jpg" alt=""><p>周杰倫</p></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/"><img src="images/s2.jpg" alt=""><p>周杰倫</p></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/"><img src="images/s3.jpg" alt=""><p>周杰倫</p></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/"><img src="images/s4.jpg" alt=""><p>周杰倫</p></a></li>
		</ul>
		<ul class="bx-controls">
			<li>
				<a class="actives" href="http://www.dijiuzhanzhang.com/">
					<img src="images/ss1.jpg" alt="">
					<span></span>
					<p>周杰倫周杰倫周杰倫周杰倫周杰倫周杰倫周杰倫周</p>
				</a>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/">
					<img src="images/ss2.jpg" alt="">
					<span></span>
					<p>周杰倫周杰倫周杰倫周杰倫周杰倫周杰倫周杰倫周</p>
				</a>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/">
					<img src="images/ss3.jpg" alt="">
					<span></span>
					<p>周杰倫周杰倫周杰倫周杰倫周杰倫周杰倫周杰倫周</p>
				</a>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/">
					<img src="images/ss4.jpg" alt="">
					<span></span>
					<p>周杰倫周杰倫周杰倫周杰倫周杰倫周杰倫周杰倫周</p>
				</a>
			</li>
		</ul>
	</div>
	<a class="options pre" href="javascript:;" data-drec="pre"><i class="pre"></i></a>
	<a class="options next" href="javascript:;" data-drex="next"><i class="next"></i></a>
</div>



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


熱門標簽: flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 焦點圖 幻燈片 輪播圖 bar焦點圖 帶縮略圖的幻燈片 純圖片輪播 圖片輪播
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子