以下是 电影站jQuery带缩略图幻灯片轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}" />
<script type="text/javascript" src="js/jQuery.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css">
<link href="css/css.css" rel="stylesheet" type="text/css">
<title>jQuery有缩微图和介绍的图片切换</title>
</head>
<body>
<!-- 代码 开始 -->
<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="#">马上观看</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="#/movie/tongquetai.shtml">马上观看</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="#/movie/xiaqianchuan3heianqishiqi.shtml" title="蝙蝠侠前传3黑暗骑士崛起">马上观看</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://quabc.com/movie/tingfengzhe.shtml">马上观看</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="#/movie/puluomixiusi.shtml">马上观看</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="#/movie/gansidui2.shtml">马上观看</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="#/movie/bianjingfengyun.shtml">马上观看</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://quabc.com/movie/tingfengzhe.shtml">马上观看</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>
<script src="js/jquery.slides.js" type="text/javascript"></script>
<!-- 代码 结束 -->
</body>
</html>JS代码(jquery.slides.js):
$(function(){
var sWidth = $("#slider_name").width();
var len = $("#slider_name .silder_panel").length;
var index = 0;
var picTimer;
var btn = "<a class='prev'>Prev</a><a class='next'>Next</a>";
$("#slider_name").append(btn);
$("#slider_name .silder_nav li").css({
"opacity":"0.6","filter":"alpha(opacity=60)"}
).mouseenter(function(){
index = $("#slider_name .silder_nav li").index(this);
showPics(index);
}
).eq(0).trigger("mouseenter");
$("#slider_name .prev,#slider_name .next").css({
"opacity":"0.2","filter":"alpha(opacity=20)"}
).hover(function(){
$(this).stop(true,false).animate({
"opacity":"0.6","filter":"alpha(opacity=60)"}
,300);
}
,function(){
$(this).stop(true,false).animate({
"opacity":"0.2","filter":"alpha(opacity=20)"}
,300);
}
);
// Prev$("#slider_name .prev").click(function(){
index -= 1;
if(index == -1){
index = len - 1;
}
showPics(index);
}
);
// Next$("#slider_name .next").click(function(){
index += 1;
if(index == len){
index = 0;
}
showPics(index);
}
);
//$("#slider_name .silder_con").css("width",sWidth * (len));
// mouse$("#slider_name").hover(function(){
clearInterval(picTimer);
}
,function(){
picTimer = setInterval(function(){
showPics(index);
index++;
if(index == len){
index = 0;
}
}
,3000);
}
).trigger("mouseleave");
// showPicsfunction showPics(index){
var nowLeft = -index*sWidth;
$("#slider_name .silder_con").stop(true,false).animate({
"left":nowLeft}
,300);
$("#slider_name .silder_nav li").removeClass("current").eq(index).addClass("current");
$("#slider_name .silder_nav li").stop(true,false).animate({
"opacity":"0.5"}
,300).eq(index).stop(true,false).animate({
"opacity":"1"}
,300);
}
}
);
CSS代码(css.css):
@charset "gb2312";body,div,hr,blockquote,ul,ol,li,table,th,td,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,input,button,select,textarea,fieldset,legend{margin:0;padding:0}
body{font-size:12px;color:#333;background-color:#f4f4f4;font-family:Tahoma,Geneva,sans-serif,'����';}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
.clearfix{*zoom:1}
.clearfix:after{display:block;clear:both;content:".";visibility:hidden;height:0}
*+html img{-ms-interpolation-mode:bicubic}
.clearboth{clear:both;}
ul,ol{list-style:none}
fieldset,img{border:0}
address,cite,dfn,em,var{font-style:normal}
strong,.fcu{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
button,.fhand{cursor:pointer}
button,input,select,textarea{font-size:100%;}
html{zoom:expression(function(ele){ele.style.zoom="1";document.execCommand("BackgroundImageCache",false,true)}
(this))}
/*ͨ��*/
.navbox_{width:960px;margin:0 auto;overflow:hidden;zoom:1}
.navbox{width:960px;margin:0 auto;overflow:hidden;zoom:1;margin-top:8px;}
.f_l{float:left;}
.f_r{float:right;}
.margintop{margin-top:8px;}
.paddingtop{padding-top:8px;}
a{color:#383838;text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
CSS代码(slider.css):
/*slider*/
#slider{width:100%;background-color:#000;padding-top:8px;}
.slider_box{width:960px;margin:0 auto;height:338px;overflow:hidden;position:relative;}
.silder_tip{width:92px;height:92px;overflow:hidden;position:absolute;top:0;right:0;z-index:1;text-indent:-999px;background:url(../images/tip-tt.gif) no-repeat;}
#movie_tip{background-position:-93px 0;}
.silder_con{height:270px;overflow:hidden;position:absolute;}
.silder_panel{width:960px;height:270px;overflow:hidden;float:left;position:relative;background:#111;}
.silder_panel img{width:690px;height:270px;display:block;overflow:hidden;}
.silder_intro{width:210px;height:270px;line-height:20px;overflow:hidden;color:#999;padding:0 40px 0 0;}
.silder_intro h3{padding:10px 0;height:50px;color:#7acf39;line-height:30px;overflow:hidden;}
.silder_intro h3 strong{font-family:"����";font-size:24px;height:30px;overflow:hidden;font-weight:normal;display:block;}
.silder_intro h3 strong a{color:#fff;font-weight:bold;}
.silder_intro ul{height:60px;overflow:hidden;}
.silder_intro li{height:20px;overflow:hidden;color:#787878;}
.silder_intro li a{color:#787878;margin:0 6px;}
.silder_intro span{margin:0 10px 0 0;}
.silder_intro p{height:72px;overflow:hidden;color:#787878;margin-top:10px;line-height:18px;}
.silder_play{display:block;width:136px;height:30px;overflow:hidden;text-indent:-999px;position:absolute;bottom:13px;right:45px;background:url(../images/silder-play.png) 0 -30px no-repeat;}
.silder_play:hover{background-position:0 0;}
.silder_nav{width:960px;height:58px;margin:0 auto;bottom:0;position:absolute;overflow:hidden;}
.silder_nav li{float:left;padding:0px;border:1px solid #fff;margin:2px;}
.silder_nav li.current{border:3px solid #7acf39;margin:0 4px;}
.silder_nav li,.silder_nav img{display:block;width:112px;height:48px;overflow:hidden;}
.slider_box a.prev,.slider_box a.next{display:block;width:45px;height:100px;overflow:hidden;text-indent:-999px;position:absolute;cursor:pointer;margin:85px 0 0 0;background:url(../images/silder_btn.gif) no-repeat;}
.slider_box a.prev{left:0;background-position:left 0;}
.slider_box a.next{right:0;background-position:right 0;}
.silderBox{height:8px;line-height:8px;}
分享到QQ
分享到微博
微信扫一扫
