原生js仿新浪电影大片首页焦点图片滚动切换插件


原生js仿新浪电影大片首页焦点图片滚动切换插件
原生js仿新浪电影大片首页焦点图片滚动切换插件以及焦点图片、滚动切换等js/jquery网页特效代码下载。

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="https://www.51qianduan.com/">51前端</a></div>
				<div class="box"><a href="https://www.51qianduan.com/">51前端</a></div>
				<div class="box"><a href="https://www.51qianduan.com/">51前端</a></div>
				<div class="box"><a href="https://www.51qianduan.com/">51前端</a></div>
				<div class="box"><a href="https://www.51qianduan.com/">51前端</a></div>
				<div class="box"><a href="https://www.51qianduan.com/">51前端</a></div>
				<div class="box"><a href="https://www.51qianduan.com/">51前端</a></div>
				<div class="box"><a href="https://www.51qianduan.com/">51前端</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="https://www.51qianduan.com/">51前端</a></h2>
						<p>原班人马再续古装传奇大戏 </p>
						<p class="des">贞观年间,西凉叛乱,薛仁贵奉旨平乱,不幸中了敌帅苏宝同的奸计,被困锁阳城。柳金花携女薛金莲上山寻薛丁山救父,在长安路遇被太子调戏的樊梨花,薛丁山出手相助,两人暗生情愫,樊梨花向柳金花提亲被拒,与薛丁山依依惜别。樊梨花回到西凉劝苏宝同不成……<a href="https://www.51qianduan.com/">51前端</a></p>
						<div class="btn"><a href="https://www.51qianduan.com/">51前端</a></div>
					</div>
				</div>
				<div id="txt02" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="https://www.51qianduan.com/">51前端</a></h2>
						<p>蓝可儿事件纪实惊悚微电影 </p>
						<p class="des">影片讲述李漫荻饰演的旅社女老板Mandy为拉拢客源,策划了一场以入住蓝可儿案发的Cecil酒店,感受惊悚之旅为噱头的招揽客户的策划案,而Mandy在提前入住Cecil酒店进行场地勘察时,“如愿”遭遇了种种恐怖事件……<a href="https://www.51qianduan.com/">51前端</a></p>
						<div class="btn"><a href="https://www.51qianduan.com/">51前端</a></div>
					</div>
				</div>
				<div id="txt03" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="https://www.51qianduan.com/">51前端</a></h2>
						<p>第2集 菜包狗大反击 </p>
						<p class="des">故事发生在一个年轻人家中,他画出了一只聪明却叛逆的兔子,和一只忠诚却自负的狗。从此,抓住兔子就成了主人和狗的精神理想和肉体梦魇,他们屡战屡败,屡败屡战。穿越到书中追兔子,钻进大脑打怪兽,与外星人联手,操纵巨人去战斗。<a href="https://www.51qianduan.com/">51前端</a></p>
						<div class="btn"><a href="https://www.51qianduan.com/">51前端</a></div>
					</div>
				</div>
				<div id="txt04" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="https://www.51qianduan.com/">51前端</a></h2>
						<p>电影《钢的琴》完整版本 </p>
						<p class="des">陈桂林是东北某钢铁厂的一名工人子弟,满身文艺细胞的他一心想考大学,然而连考三年却都以毫厘之差名落孙山,最终接了父亲的班到钢铁厂的铸造车间当了一名工人。陈桂林的独特气质同时吸引了厂里的一对姐妹花淑娴和小菊……<a href="https://www.51qianduan.com/">51前端</a></p>
						<div class="btn"><a href="https://www.51qianduan.com/">51前端</a></div>
					</div>
				</div>
				<div id="txt05" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="https://www.51qianduan.com/">51前端</a></h2>
						<p>刘晓庆扮嫩演公主引热议 </p>
						<p class="des">玄武门之变后,李世民登上皇位,但隋朝的残余势力和十八反王留下来的军队仍在北漠兴风作浪,危害百姓。罗通、程铁牛、秦怀玉等一批小将已长大成人,罗通夺得帅位,率领唐军出征,扫平了北漠。此时渤辽国又兴兵攻唐,程咬金挂帅,在龙门县招兵,薛仁贵泪别柳金花去当兵……<a href="https://www.51qianduan.com/">51前端</a></p>
						<div class="btn"><a href="https://www.51qianduan.com/">51前端</a></div>
					</div>
				</div>
				<div id="txt06" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="https://www.51qianduan.com/">51前端</a></h2>
						<p>2B苦逼文艺青年的故事 </p>
						<p class="des">周小北、王媛、韩文静三人是大学同学兼闺蜜,毕业后同在一个城市工作、生活。生于传统家庭的周小北,在与相恋多年的男友樊斌结婚后,发现婚后生活并没有想象中的那么如意,经历了一系列的变故二人离婚。最终她与暗恋自己多年的李理走到了一起……<a href="https://www.51qianduan.com/">51前端</a></p>
						<div class="btn"><a href="https://www.51qianduan.com/">51前端</a></div>
					</div>
				</div>
				<div id="txt07" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="https://www.51qianduan.com/">51前端</a></h2>
						<p>林志玲携手日本男星浪漫谈情 </p>
						<p class="des">十年前,留学日本的女大学生林月爱上了当地滑雪场的救护队员星野守,然而一次意外中,星野守为救林月丧生,将自己的心脏移植给了患有心脏病的林月。十年后,林月在上海开了一家巧克力店,这是星野守一生的心愿。而星野守的哥哥木场总一郎一直深爱林月……<a href="https://www.51qianduan.com/">51前端</a></p>
						<div class="btn"><a href="https://www.51qianduan.com/">51前端</a></div>
					</div>
				</div>
				<div id="txt08" class="scroll_info" style="display:none">
					<div class="txtbg"></div>
					<div class="txtcontent">
						<h2><a href="https://www.51qianduan.com/">51前端</a></h2>
						<p>《舌尖2》姐妹篇 </p>
						<p class="des">每座城市都有自己独特的味道。《一城一味》围绕城市与美食的关系展开故事,每集请到一位顶级大厨作为“美食寻访者”,前往一个陌生城市去品尝与学习当地最有特色的美食。通过寻访过程中的发生的种种故事,全面展现一个城市独特的味道与人文气质。寻味民间,品鉴城市。<a href="https://www.51qianduan.com/">51前端</a></p>
						<div class="btn"><a href="https://www.51qianduan.com/">51前端</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>  

相关推荐

发表评论

相关文章