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



104 412 138



特效描述:原生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

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