jQuery电影网站和视频网站首页大屏焦点图片切换滚动



101 403 135



特效描述:jQuery 首页大屏焦点图 图片切换滚动,电影站jQuery带缩略图幻灯片

代码结构

1. 引入CSS

<link href="css/slider.css" rel="stylesheet" type="text/css">

2. 引入JS

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

3. HTML代码

<div id="slider">
	<div class="slider_box" id="slider_name">
		<div class="silder_tip" id="movie_tip">电影</div>
		<ul class="silder_con">		
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012101623050497.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">太极之从零开始</a></strong><span>最新:TS版</span></h3>
					<ul>
						<li><label>类型:</label><span><a href="#">动作</a><a href="#">古装</a><a href="#">预告片</a></span></li>
						<li><label>导演:</label><span><a href="#">冯德伦</a></span></li>
						<li><label>主演:</label><span><a href="#">梁家辉</a><a href="#">杨颖</a><a href="#">彭于晏</a><a href="#">冯绍峰</a></span></li>
					</ul>
					<p>[<strong>影片介绍</strong>]《太极之从零开始》是由华谊兄弟出品,王中磊担任制片人、陈国富监制、冯德伦导演的电影《太极》三部曲中的第一部。该片已入围第69届威尼斯电影节非..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">马上观看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012101623074142.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">铜雀台</a></strong> <span>最新:TC</span></h3>
					<ul>
						<li><label>类型:</label><span><a href="#">爱情</a><a href="#">古装</a><a href="#">预告片</a></span></li>
						<li><label>导演:</label><span><a href="#">赵林山</a></span></li>
						<li><label>主演:</label><span><a href="#">周润发</a><a href="#">刘亦菲</a><a href="#">玉木宏</a></span></li>
					</ul>
					<p>[<strong>影片介绍</strong>]庚子年,恰逢天象“四星合一”,预示改朝换代之征兆。曹操(周润发饰)的部属、尤其他的公子曹丕(邱心志饰),希望借此良机推献帝禅位、曹操登..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">马上观看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l" title="蝙蝠侠前传3黑暗骑士崛起"><img src="images/2012092600425434.jpg" title="蝙蝠侠前传3黑暗骑士崛起" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#" title="蝙蝠侠前传3黑暗骑士崛起">蝙蝠侠前传3黑暗骑士崛起</a></strong><span>最新:BD国语全集</span></h3>
					<ul>
						<li><label>类型:</label><span><a href="#">动作</a><a href="#">惊悚</a><a href="#">魔幻</a></span></li>
						<li><label>导演:</label><span><a href="#">克里斯托弗·诺兰</a></span></li>
						<li><label>主演:</label><span><a href="#">克里斯蒂安·贝尔</a><a href="#">汤姆·哈迪</a><a href="#">安妮·海瑟薇</a></span></li>
					</ul>
					<p>[<strong>影片介绍</strong>]本片是克里斯托弗·诺兰执导的“蝙蝠侠”系列三部曲的最终章。前两部分别是2005年的《蝙蝠侠:开战时刻》和2008年的《蝙蝠侠:黑暗骑士》。此片为20..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">马上观看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012092600451002.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">生化危机5</a></strong> <span>最新:TC</span></h3>
					<ul>
						<li><label>类型:</label><span><a href="#">科幻</a><a href="#">惊悚</a><a href="#">悬疑</a></span></li>
						<li><label>导演:</label><span><a href="#">保罗·安德森</a></span></li>
						<li><label>主演:</label><span><a href="#">米拉·乔沃维奇</a><a href="#">西耶娜·盖尔利</a><a href="#">李冰冰</a><a href="#">米歇尔·罗德里格兹</a></span></li>
					</ul>
					<p>[<strong>影片介绍</strong>]影片设定在1998年,影片不再是只把焦点集中在爱丽丝这个角色身上,吉尔将在由安布雷拉(Umbrella)制造的僵尸潮的爆发中扮演重要角色。里昂·肯尼迪..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">马上观看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012092600432575.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">普罗米修斯</a></strong> <span>最新:BD版</span></h3>
					<ul>
						<li><label>类型:</label><span><a href="#">科幻</a><a href="#">惊悚</a></span></li>
						<li><label>导演:</label><span><a href="#">雷德利·斯科特</a></span></li>
						<li><label>主演:</label><span><a href="#">劳米·拉佩斯</a><a href="#">迈克尔·法斯宾德</a></span></li>
					</ul>
					<p>[<strong>影片介绍</strong>]2058年,考古学家在非洲挖掘出的古迹发现,人类是由一个进化程度更高的外星生物种族创造的。于是人们派出飞船“普罗米修斯号”前去外星“上帝”的星..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">马上观看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012092600431140.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">敢死队2</a></strong> <span>最新:BD英语上集</span></h3>
					<ul>
						<li><label>类型:</label><span><a href="#">动作</a><a href="/class/movie-cid-13-area-0-time-0-p-1.shtml" target="_blank">冒险</a></span></li>
						<li><label>导演:</label><span><a href="#">西蒙·韦斯特</a></span></li>
						<li><label>主演:</label><span><a href="#">西尔维斯特·史泰龙</a><a href="#">杰森·斯坦森</a><a href="#">布鲁斯·威利斯</a><a href="#">米基·洛克</a><a href="#">李连杰</a></span></li>
					</ul>
					<p>[<strong>影片介绍</strong>]敢死队2,由西蒙·韦斯特执导,主要讲述的是图尔“Tool”(米基·洛克饰演)在执行一项任务时被残忍杀害,以史泰龙为首的“敢死队”发誓为他报仇。与..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">马上观看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012092600423387.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">边境风云</a></strong> <span>最新:DVD版</span></h3>
					<ul>
						<li><label>类型:</label><span><a href="#">剧情</a><a href="#">冒险</a></span></li>
						<li><label>导演:</label><span><a href="#">程耳</a></span></li>
						<li><label>主演:</label><span><a href="#">孙红雷</a><a href="#">王珞丹</a><a href="#">张默</a><a href="/zhuyan/sid-24389.shtml">倪大红</a><a href="/zhuyan/sid-25763.shtml">杨坤</a></span></li>
					</ul>
					<p>[<strong>影片介绍</strong>]中缅两国边境毒品交易肆虐,云南小镇的缉毒警察(张默饰)无意中由杀手(杨坤饰)查到一条重大贩毒罪案线索,而一切迹象皆指向黑帮老大(孙红雷饰)..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">马上观看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012092600435337.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">听风者</a></strong> <span>最新:BD下集</span></h3>
					<ul>
						<li><label>类型:</label><span><a href="#">剧情</a><a href="#">悬疑</a></span></li>
						<li><label>导演:</label><span><a href="#">麦兆辉</a><a href="#">庄文强</a></span></li>
						<li><label>主演:</label><span><a href="#">梁朝伟</a><a href="#">周迅</a><a href="#">范晓萱</a><a href="#">王学兵</a><a href="#">董勇</a></span></li>
					</ul>
					<p>[<strong>影片介绍</strong>]《听风者》改编自麦家小说《暗算》,而锁定男主角为梁朝伟。《暗算》原著讲述《听风》《看风》《捕风》三个故事。该片选取第一个故事,基本框架不变..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">马上观看</a>
				</div>
			</li>
		</ul>
		<ul class="silder_nav clearfix">            
			<li><a href="#"><img src="images/2012101623050497.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012101623074142.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012092600425434.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012092600451002.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012092600432575.jpg" /></a></li>    
			<li><a href="#"><img src="images/2012092600431140.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012092600423387.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012092600435337.jpg"/></a></li>    
		</ul>
	</div>
	<div class="silderBox"></div>
</div>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 焦点图 幻灯片 轮播图 bar焦点图 带缩略图的幻灯片 带简介的焦点图 图片切换 图片选项卡 图标选项卡 纯图片轮播 图片轮播 选项卡自动切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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