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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

30 116 39



特效描述:焦点图片 滚动切换。原生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="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>  



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 导航切换 图片头像上传 带标题的焦点图 滚动切换 文件上传 带缩略图的幻灯片 带简介的焦点图 图片滚动 图片切换 文本框 图片轮播 文字滚动 文字切换 下拉框 自动滚动图片轮播 背景切换 复选 图片文字滚动 马赛克幻灯片 手风琴 单选 全屏滚动 全屏焦点图 选项卡自动切换 登录框 页面滚动 视频切换 注册框 列表切换 搜索框 验证码 渐隐切换 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动流动 滚动切换 滑动选项卡切换 flash焦点图 自动滚动图片轮播 选项卡切换 滑动手风琴 切换按钮 form表单 焦点图幻灯片

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到