原生js圖片滾動插件仿新浪電影大片首頁焦點圖片滾動切換效果代碼



106 421 141



特效描述:原生js 圖片滾動 首頁焦點圖 滾動切換效果,原生js圖片滾動插件仿新浪電影大片首頁焦點圖片滾動切換效果代碼

代碼結構

1. 引入JS

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

2. HTML代碼

<div class="focus">
	<div class="focus_body">
		<div class="scroll">
			<a href="javascript:void(0);" class="arr_left" id="FS_arr_left_01">左移動</a>
			<a href="javascript:void(0);" class="arr_right" id="FS_arr_right_01">右移動</a>
			<div class="scroll_cont" id="FS_Cont_01">
				<div class="box"><a href="http://www.dijiuzhanzhang.com/"><img alt="《隋唐英雄4》" src="images/U6764P167T518D1F20340DT20140307122230.jpg" /></a></div>
				<div class="box"><a href="http://www.dijiuzhanzhang.com/"><img alt="《藍可兒之旅》" src="images/U6764P167T518D1F20406DT20140320100516.jpg" /></a></div>
				<div class="box"><a href="http://www.dijiuzhanzhang.com/"><img alt="《功夫兔與菜包狗》" src="images/U6764P167T518D1F20339DT20140327104730.jpg" /></a></div>
				<div class="box"><a href="http://www.dijiuzhanzhang.com/"><img alt="電視劇《鋼的琴》" src="images/U6764P167T518D1F20391DT20140220073510.jpg" /></a></div>
				<div class="box"><a href="http://www.dijiuzhanzhang.com/"><img alt="《隋唐英雄3》" src="images/U6764P167T518D1F20396DT20140127163842.jpg" /></a></div>
				<div class="box"><a href="http://www.dijiuzhanzhang.com/"><img alt="《新閨蜜時代》" src="images/U6764P167T518D1F20341DT20140201000916.jpg" /></a></div>
				<div class="box"><a href="http://www.dijiuzhanzhang.com/"><img alt="《甜心巧克力》" src="images/U6764P167T518D1F20338DT20140307113222.jpg" /></a></div>
				<div class="box"><a href="http://www.dijiuzhanzhang.com/"><img alt="《一城一味》" src="images/U6764P167T518D1F20401DT20140121175610.jpg" /></a></div>
			</div>
			<div id="FS_numList_01" class="numList"></div>
			<div class="scroll_txt">
				<div id="txt01" class="scroll_info" style="display:block">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="http://www.dijiuzhanzhang.com/">《隋唐英雄4》</a></h2>
						<p>原班人馬再續古裝傳奇大戲 </p>
						<p class="des">貞觀年間,西涼叛亂,薛仁貴奉旨平亂,不幸中了敵帥蘇寶同的奸計,被困鎖陽城。柳金花攜女薛金蓮上山尋薛丁山救父,在長安路遇被太子調戲的樊梨花,薛丁山出手相助,兩人暗生情愫,樊梨花向柳金花提親被拒,與薛丁山依依惜別。樊梨花回到西涼勸蘇寶同不成……<a href="http://www.dijiuzhanzhang.com/">[詳細]</a></p>
						<div class="btn"><a href="http://www.dijiuzhanzhang.com/">播放</a></div>
					</div>
				</div>
				<div id="txt02" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="http://www.dijiuzhanzhang.com/">《藍可兒之旅》</a></h2>
						<p>藍可兒事件紀實驚悚微電影 </p>
						<p class="des">影片講述李漫荻飾演的旅社女老板Mandy為拉攏客源,策劃了一場以入住藍可兒案發的Cecil酒店,感受驚悚之旅為噱頭的招攬客戶的策劃案,而Mandy在提前入住Cecil酒店進行場地勘察時,“如愿”遭遇了種種恐怖事件……<a href="http://www.dijiuzhanzhang.com/">[詳細]</a></p>
						<div class="btn"><a href="http://www.dijiuzhanzhang.com/">播放</a></div>
					</div>
				</div>
				<div id="txt03" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="http://www.dijiuzhanzhang.com/">《功夫兔與菜包狗》</a></h2>
						<p>第2集 菜包狗大反擊 </p>
						<p class="des">故事發生在一個年輕人家中,他畫出了一只聰明卻叛逆的兔子,和一只忠誠卻自負的狗。從此,抓住兔子就成了主人和狗的精神理想和肉體夢魘,他們屢戰屢敗,屢敗屢戰。穿越到書中追兔子,鉆進大腦打怪獸,與外星人聯手,操縱巨人去戰斗。<a href="http://www.dijiuzhanzhang.com/">[詳細]</a></p>
						<div class="btn"><a href="http://www.dijiuzhanzhang.com/">播放</a></div>
					</div>
				</div>
				<div id="txt04" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="http://www.dijiuzhanzhang.com/">電視劇《鋼的琴》</a></h2>
						<p>電影《鋼的琴》完整版本 </p>
						<p class="des">陳桂林是東北某鋼鐵廠的一名工人子弟,滿身文藝細胞的他一心想考大學,然而連考三年卻都以毫厘之差名落孫山,最終接了父親的班到鋼鐵廠的鑄造車間當了一名工人。陳桂林的獨特氣質同時吸引了廠里的一對姐妹花淑嫻和小菊……<a href="http://www.dijiuzhanzhang.com/">[詳細]</a></p>
						<div class="btn"><a href="http://www.dijiuzhanzhang.com/">播放</a></div>
					</div>
				</div>
				<div id="txt05" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="http://www.dijiuzhanzhang.com/">《隋唐英雄3》</a></h2>
						<p>劉曉慶扮嫩演公主引熱議 </p>
						<p class="des">玄武門之變后,李世民登上皇位,但隋朝的殘余勢力和十八反王留下來的軍隊仍在北漠興風作浪,危害百姓。羅通、程鐵牛、秦懷玉等一批小將已長大成人,羅通奪得帥位,率領唐軍出征,掃平了北漠。此時渤遼國又興兵攻唐,程咬金掛帥,在龍門縣招兵,薛仁貴淚別柳金花去當兵……<a href="http://www.dijiuzhanzhang.com/">[詳細]</a></p>
						<div class="btn"><a href="http://www.dijiuzhanzhang.com/">播放</a></div>
					</div>
				</div>
				<div id="txt06" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="http://www.dijiuzhanzhang.com/">《新閨蜜時代》</a></h2>
						<p>2B苦逼文藝青年的故事 </p>
						<p class="des">周小北、王媛、韓文靜三人是大學同學兼閨蜜,畢業后同在一個城市工作、生活。生于傳統家庭的周小北,在與相戀多年的男友樊斌結婚后,發現婚后生活并沒有想象中的那么如意,經歷了一系列的變故二人離婚。最終她與暗戀自己多年的李理走到了一起……<a href="http://www.dijiuzhanzhang.com/">[詳細]</a></p>
						<div class="btn"><a href="http://www.dijiuzhanzhang.com/">播放</a></div>
					</div>
				</div>
				<div id="txt07" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="http://www.dijiuzhanzhang.com/">《甜心巧克力》</a></h2>
						<p>林志玲攜手日本男星浪漫談情 </p>
						<p class="des">十年前,留學日本的女大學生林月愛上了當地滑雪場的救護隊員星野守,然而一次意外中,星野守為救林月喪生,將自己的心臟移植給了患有心臟病的林月。十年后,林月在上海開了一家巧克力店,這是星野守一生的心愿。而星野守的哥哥木場總一郎一直深愛林月……<a href="http://www.dijiuzhanzhang.com/">[詳細]</a></p>
						<div class="btn"><a href="http://www.dijiuzhanzhang.com/">播放</a></div>
					</div>
				</div>
				<div id="txt08" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="http://www.dijiuzhanzhang.com/">《一城一味》</a></h2>
						<p>《舌尖2》姐妹篇 </p>
						<p class="des">每座城市都有自己獨特的味道。《一城一味》圍繞城市與美食的關系展開故事,每集請到一位頂級大廚作為“美食尋訪者”,前往一個陌生城市去品嘗與學習當地最有特色的美食。通過尋訪過程中的發生的種種故事,全面展現一個城市獨特的味道與人文氣質。尋味民間,品鑒城市。<a href="http://www.dijiuzhanzhang.com/">[詳細]</a></p>
						<div class="btn"><a href="http://www.dijiuzhanzhang.com/">播放</a></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
var focusScroll_01 = new ScrollPic();
focusScroll_01.scrollContId   = "FS_Cont_01"; //內容容器ID
focusScroll_01.arrLeftId      = "FS_arr_left_01";//左箭頭ID
focusScroll_01.arrRightId     = "FS_arr_right_01"; //右箭頭ID
focusScroll_01.dotListId      = "FS_numList_01";//點列表ID
focusScroll_01.dotClassName   = "";//點className
focusScroll_01.dotOnClassName	= "selected";//當前點className
focusScroll_01.listType		= "number";//列表類型(number:數字,其它為空)
focusScroll_01.listEvent      = "onmouseover"; //切換事件
focusScroll_01.frameWidth     = 944;//顯示框寬度
focusScroll_01.pageWidth      = 944; //翻頁寬度
focusScroll_01.upright        = false; //垂直滾動
focusScroll_01.speed          = 10; //移動速度(單位毫秒,越小越快)
focusScroll_01.space          = 50; //每次移動像素(單位px,越大越快)
focusScroll_01.autoPlay       = true; //自動播放
focusScroll_01.autoPlayTime   = 5; //自動播放間隔時間(秒)
focusScroll_01.circularly     = true;
focusScroll_01.initialize(); //初始化
focusScroll_01.onpagechange = function(){
	$(".scroll_info").hide();
	$("#txt0"+(focusScroll_01.pageIndex+1)).show();
};
</script>  



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 圖片放大鏡 圖片疊加 圖片層疊 圖片翻轉 圖片旋轉 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 頭像上傳 圖片上傳 二維碼 圖片拖動 圖片拖拽 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 滾動切換 滾動條切換 滑動選項卡 滑動切換 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 帶縮略圖的幻燈片 圖片廣告 地圖 中國地圖 世界地圖 純圖片輪播 圖片輪播 圖片切換 圖片選項卡 圖標選項卡 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 圖片收縮展開 圖片收縮 圖片展開 圖標導航 圖標菜單 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 背景切換 大圖切換 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖表 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片 圖片插件 頭像截圖 滾動切換 滾動條切換 帶簡介的焦點圖 純圖片輪播 圖片輪播 選項卡自動切換 圖片切換 切換圖片 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子