原生js圖片淡出淡進底部帶縮略圖的圖片切換代碼



99 395 132



特效描述:原生js 圖片淡出淡進 底部帶縮略圖 圖片切換代碼,圖片淡出淡進底部帶縮略圖的圖片切換

代碼結構

1. 引入CSS

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

2. 引入JS

<script src="js/script.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>

3. HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>十屏帶縮略圖和標題顯示的js幻燈片輪播代碼</title>
</HEAD>
<BODY>
<div class="box">
	<div class="scrollimg2">
		<div id="SwitchBigPic">
			<div class="scrollimg2_bigimg" id="showDiv_0" style="display:block">
				<div><a href="#"><img id="bigpic_0" src="images/img01.jpg" /></a></div>
				<div class="scrollimg2_bg" id="title_bg_0"></div>
				<a class="scrollimg2_txt" id="title_0" href="#">《倩女幽魂》經典魔幻武俠改編 古天樂、劉亦菲、余少群人鬼三角戀</a>
			</div>
			<div class="scrollimg2_bigimg" id="showDiv_1">
				<div><a href="#"><img id="bigpic_1" src="images/img02.jpg" /></a></div>
				<div class="scrollimg2_bg" id="title_bg_1"></div>
				<a class="scrollimg2_txt" id="title_1" href="#">《奪帥》港產動作三級片 洪金寶、任達華、吳京血腥殺戮,萬劫不復 </a>
			</div>
			<div class="scrollimg2_bigimg" id="showDiv_2">
				<div><a href="#"><img id="bigpic_2" src="images/img03.jpg" /></a></div>
				<div class="scrollimg2_bg" id="title_bg_2"></div>
				<a class="scrollimg2_txt" id="title_2" href="#">北條司經典同名漫畫作品改編 韓版&ldquo;道明寺&rdquo;打破冷酷形象搞笑出演</a>
			</div>
			<div class="scrollimg2_bigimg" id="showDiv_3">
				<div><a href="#"><img id="bigpic_3" src="images/img04.jpg" /></a></div>
				<div class="scrollimg2_bg" id="title_bg_3"></div>
				<a class="scrollimg2_txt" id="title_3" href="#">《家,N次方》80后視角看重組家庭 趙寶剛攜手宋丹丹進入第3次婚姻 </a>
			</div>
			<div class="scrollimg2_bigimg" id="showDiv_4">
				<div><a href="#"><img id="bigpic_4" src="images/img05.jpg" /></a></div>
				<div class="scrollimg2_bg" id="title_bg_4"></div>
				<a class="scrollimg2_txt" id="title_4" href="#">動感夏日炫彩T恤全場29元</a>
			</div>
			<div class="scrollimg2_bigimg" id="showDiv_5">
				<div><a href="#"><img id="bigpic_5" src="images/img06.jpg" /></a></div>
				<div class="scrollimg2_bg" id="title_bg_5"></div>
				<a class="scrollimg2_txt" id="title_5" href="#">好樂買李寧特賣場全場99元</a>
			</div>
			<div class="scrollimg2_bigimg" id="showDiv_6">
				<div><a href="#"><img id="bigpic_6" src="images/img07.jpg" /></a></div>
				<div class="scrollimg2_bg" id="title_bg_6"></div>
				<a class="scrollimg2_txt" id="title_6" href="#">范冰冰:時尚網購 就上夢芭莎!注冊即送100元</a>
			</div>
			<div class="scrollimg2_bigimg" id="showDiv_7">
				<div><a href="#"><img id=bigpic_7  src="images/img08.jpg" /><span class="scrollimg2_hd">高清標識</span></a></div>
				<div class="scrollimg2_bg" id="title_bg_7"></div>
				<a class="scrollimg2_txt" id="title_7" href="#">經典電影《魔鬼總動員》阿諾施瓦辛格、莎朗斯通主演科幻動作片</a>
			</div>
			<div class="scrollimg2_bigimg" id="showDiv_8">
				<div><a href="#"><img id="bigpic_8" src="images/img09.jpg" /></a></div>
				<div class="scrollimg2_bg" id="title_bg_8"></div>
				<a class="scrollimg2_txt" id="title_8" href="#">《關云長》迅雷獨家首發,高清大片至尊專享,看甄子丹姜文雙雄交鋒!</a>
			</div>
			<div class="scrollimg2_bigimg" id="showDiv_9">
				<div><a href="#"><img id=bigpic_9 src="images/img10.jpg" /></a></div>
				<div class="scrollimg2_bg" id="title_bg_9"></div>
				<a class="scrollimg2_txt" id="title_9" href="#">凱迪拉克SRX微電影II《66號公路》全版獻映 </a>
			</div>
		</div>
		<div class="scrollimg2_tigger">
			<div class="scrollimg2_tigger_hoverbg" id="bigHover"></div>
			<ul>
				<li><a href="#"><img id="big_pic_nav_on_0" src="images/img01s.jpg" /></a> </li>
				<li><a href="#"><img id="big_pic_nav_on_1" src="images/img02s.jpg" /></a> </li>
				<li><a href="#"><img id="big_pic_nav_on_2" src="images/img03s.jpg" /></a> </li>
				<li><a href="#"><img id="big_pic_nav_on_3" src="images/img04s.jpg" /></a> </li>
				<li><a href="#"><img id="big_pic_nav_on_4" src="images/img05s.jpg" /></a> </li>
				<li><a href="#"><img id="big_pic_nav_on_5" src="images/img06s.jpg" /></a> </li>
				<li><a href="#"><img id="big_pic_nav_on_6" src="images/img07s.jpg" /></a> </li>
				<li><a href="#"><img id="big_pic_nav_on_7" src="images/img08s.jpg" /></a> </li>
				<li><a href="#"><img id="big_pic_nav_on_8" src="images/img09s.jpg" /></a> </li>
				<li><a href="#"><img id="big_pic_nav_on_9" src="images/img10s.jpg" /></a> </li>
			</ul>
			<ul class="scrollimg2_tigger_link">
				<li><a id="big_pic_nav_0" href="#"><img src="images/img_default.gif" /></a> </li>
				<li><a id="big_pic_nav_1" href="#"><img src="images/img_default.gif" /></a> </li>
				<li><a id="big_pic_nav_2" href="#"><img src="images/img_default.gif" /></a> </li>
				<li><a id="big_pic_nav_3" href="#"><img src="images/img_default.gif" /></a> </li>
				<li><a id="big_pic_nav_4" href="#"><img src="images/img_default.gif" /></a> </li>
				<li><a id="big_pic_nav_5" href="#"><img src="images/img_default.gif" /></a> </li>
				<li><a id="big_pic_nav_6" href="#"><img src="images/img_default.gif" /></a> </li>
				<li><a id="big_pic_nav_7" href="#"><img src="images/img_default.gif" /></a> </li>
				<li><a id="big_pic_nav_8" href="#"><img src="images/img_default.gif" /></a> </li>
				<li><a id="big_pic_nav_9" href="#"><img src="images/img_default.gif" /></a></li>
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript">
var MovieRecom={	
	step:(62+6),
	hover:"bigHover",       //hover
	bigpic:"SwitchBigPic",	//大圖div之ID通用部分
	smallpic:"big_pic_nav",//小圖之ID通用部分
	selectstyle:"currA",	//小圖被選中之后的CSS
	pictxt:"",	//配套圖片文字
	totalcount:10,				//圖片數量
	autotimeintval:5000,
	objname:"MovieRecom",	//對象名稱
	css:"display:none;position:absolute;left:0;top:0;width:694px;height:261px;overflow:hidden;" //css
};
BigNews.init(MovieRecom);
</script>
</body>
</html>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子