电影网站带文字描述焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是电影网站带文字描述焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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=UTF-8">
<title>电影网站带文字描述焦点图</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="pgmiddle">
<div id="example">
<div id="ribbon_1"></div>
<div id="ribbon_2"></div>
<div id="slides">
<div class="scroimg" style="left:0px;">
<a href="#"><img src="images/1.jpg" width="950" height="330" alt="【高清首播】《倾城绝恋》全集观看-086中国影院"></a>
</div>
<div class="scrotext" style="bottom:0px;">
<h4><a href="#/">【高清首播】《倾城绝恋》全集观看</a></h4>
<p>碧瓦红墙，御花园中烟波满目，当她带着少女的执拗对他说出，『靖轩哥哥，我喜欢你！』 。靖轩冷漠地回绝，『可我不喜欢你！』，时光流转，经年更迭……</p>
</div>
<div class="scroimg" style="left: -950px;">
<a href="#/"><img width="950" height="330" alt="先结婚后恋爱-086中国影院" src="images/2.jpg"></a>
</div>
<div class="scrotext" style="bottom: -950px;">
<h4><a href="#">先结婚后恋爱</a></h4>
<p>老滕是婚庆界的名人，他的前妻刘丽在离异的五年后才认识到他的价值。刘丽表面上温润典雅，实际上是一个贪图享乐的女人，为了晚年有一个美满的人生，她做了一圈的选择之后，最后还想回到老滕身边。</p>
</div><div class="scroimg" style="left: -950px;">
<a href="#/"><img width="950" height="330" alt="野王-086中国影院" src="images/3.jpg"></a>
</div>
<div class="scrotext" style="bottom:-950px;">
<h4><a href="#">野王</a></h4>
<p>韩剧《夜王》野王讲述了男主人公为供女友在名门大学读书，拼命打工甚至不惜去做夜店牛郎，却遭到女友背叛后，随后向女友进行报复的故事。允浩在剧中将饰演出身豪门，各方面都非常优秀的“白道勋”一角，与秀爱权相宇上演三角恋。郑允浩将饰演的‘白道勋’是剧</p>
</div><div class="scroimg" style="left:-950px;">
<a href="#"><img width="950" height="330" alt="老严有女不愁嫁-086中国影院" src="images/4.jpg"></a>
</div>
<div class="scrotext" style="bottom:-950px;">
<h4><a href="#">老严有女不愁嫁</a></h4>
<p>退休保卫处长严查令对自己的女儿严小灿爱如珍宝,却不想小灿和老严仇人的儿子温文刚相恋。老严和文刚这对准翁婿之间，以及这两个有矛盾的家庭之间爆发了激烈但又令人忍俊不止的冲突，严小灿和温文刚二人则坚守着自己的爱情，不久严小灿的前男友归亚洲和喜欢温</p>
</div><div class="scroimg" style="left:-950px;">
<a href="#/"><img width="950" height="330" alt="唐朝浪漫英雄-086中国影院" src="images/5.jpg"></a>
</div>
<div class="scrotext" style="bottom: -950px;">
<h4><a href="#/">唐朝浪漫英雄</a></h4>
<p>唐朝一支除暴安良的队伍，忠心护卫，为了天下百姓的安居乐业和国泰民安，最终粉碎了王爷的叛乱阴谋，队员们也在历练中成长。唐朝某年，凤翔府郊外驿站危机四伏。驿站官吏杂役悉数被害，一支神秘队伍将矛头指向了当今皇上。在大内侍卫飞鹰的奋勇护卫下，皇帝脱</p>
</div>
</div>
<span id="prev"></span>
<span id="next"></span>
<div id="pagination">
<span onclick="gopaly(0)" onfocus="this.blur();" class="current"></span>
<span onclick="gopaly(1)" onfocus="this.blur();"></span>
<span onclick="gopaly(2)" onfocus="this.blur();"></span>
<span onclick="gopaly(3)" onfocus="this.blur();"></span>
<span onclick="gopaly(4)" onfocus="this.blur();"></span>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="js/slides.js"></script>
</body>
</html>

JS代码(slides.js):

var zn=$("#slides .scroimg").length;
	var lw=950;
	var i=0;
	var autoplay=null,cplay=null;
	for(var k=1;
	k<zn;
	k++){
	$("#pagination").append("<span onclick='gopaly("+k+")' onfocus='this.blur();
	'> </span>");
	$("#slides img").eq(k).attr("src",$("#slides img").eq(k).attr("lazy"));
	$("#slides img").eq(k).removeAttr("lazy");
}
function scro(dir){
	if(dir!==i){
	lw-=95;
	if(lw<=3){
	lw=0;
}
;
	var v=(dir=='n')?1:(dir=='p')?-1:(dir>i)?1:-1;
	var j=(dir=='n')?((i==zn-1)?0:1+i):(dir=='p')?((i==0)?zn-1:i-1):dir;
	$("#slides .scroimg").eq(i).css("left",(lw-950)*v);
	$("#slides .scroimg").eq(j).css("left",lw*v);
	$("#slides .scrotext").eq(i).css("bottom",lw-950);
	$("#slides .scrotext").eq(j).css("bottom",-lw);
	$("#pagination span").eq(i).removeAttr("class")$("#pagination span").eq(j).attr("class","current");
	if(lw==0){
	i=j;
	lw=950;
	clearInterval(autoplay);
	cplay=setTimeout("gopaly('n')",5000);
}
}
}
function gopaly(dir){
	if(lw==950){
	clearTimeout(cplay);
	clearInterval(autoplay);
	if(dir=="n"){
	autoplay=setInterval("scro('n')",17)}
else if(dir=="p"){
	autoplay=setInterval("scro('p')",17)}
else{
	autoplay=setInterval("scro("+dir+")",17)}
}
}
;
	cplay=setTimeout("gopaly('n')",5000);
	$("#prev").click(function(){
	gopaly("p");
}
);
	$("#next").click(function(){
	gopaly("n");
}
);
	function check(a,b){
	$('#'+a+' p').removeAttr("class");
	$('#'+a+' p').eq(b).attr("class","check");
	$('#'+a+' ul').css("display","none");
	$('#'+a+' ul').eq(b).css("display","block");
	if($('#'+a+' ul:eq('+b+') img:eq(0)').attr("lazy")){
	for(var i=0;
	i<8;
	i++){
	$('#'+a+' ul:eq('+b+') img:eq('+i+')').attr("src",$('#'+a+' ul:eq('+b+') img:eq('+i+')').attr("lazy"))$('#'+a+' ul:eq('+b+') img:eq('+i+')').removeAttr("lazy");
}
}
}
;
	$("#slides").mouseover(function(){
	if(lw%950==0||lw==0){
	clearTimeout(cplay);
	clearInterval(autoplay);
}
}
);
	$("#slides").mouseout(function(){
	if(lw%950==0||lw==0){
	cplay=setTimeout("gopaly('n')",5000);
}
}
)

CSS代码(style.css):

body{color:#888;font:12px/22px sans-serif,"宋体";}
body,ul,li,h1,h2,h3,h4,form,dl{list-style:none outside none;margin:0;padding:0;}
img{border:medium none;}
a{color:#222;outline:medium none;text-decoration:none;}
a:hover{color:#8c4600;}
.index_mov_list a:hover img,.top_list a:hover img{border-color:#8c4600;}
.pgmiddle{background:#333;color:#fff;margin-bottom:8px;}
.pages a,.pages em,.pages span,.more,.submit,.face_bat{background:#448000;border-radius:2px 2px 2px 2px;color:#fff;font-size:12px;line-height:12px;padding:2px 3px;}
.pages a:hover,.pages span,.more:hover,#msg a:hover{background:#8c4600;color:#fff;}
#example{background:url(images/slidesbg.png) no-repeat -49px 0;height:330px;margin:0 auto;padding:20px 26px;position:relative;width:950px;}
#ribbon_1,#ribbon_2{background:url(../images/main.png) repeat -140px -50px;height:90px;left:auto;position:absolute;right:22px;top:17px;width:93px;z-index:3;}
#ribbon_2{background:url(../images/main.png) no-repeat -140px 0;height:33px;top:297px;width:120px;}
#slides{height:100%;overflow:hidden;position:relative;}
#next,#prev{background:url(../images/main.png) no-repeat -140px -150px;cursor:pointer;display:block;height:57px;left:3px;position:absolute;top:157px;width:22px;z-index:2;}
#next{background-position:-162px -150px;left:977px;}
#next:hover{background-position:-212px -150px;}
#prev:hover{background-position:-190px -150px;}
#slides .scroimg{background:url("images/loading.gif") no-repeat center center;height:330px;left:950px;margin:0;position:absolute;width:950px;}
.scrotext{background:#000;bottom:-70px;height:70px;left:0;opacity:.7;filter:alpha(opacity=70);padding:0 150px 0 20px;position:absolute;top:auto;width:780px;z-index:1;}
.scrotext a{color:#87ff00;font-size:16px;line-height:25px;}
.scrotext a:hover{color:#fff;}
.scrotext p{line-height:20px;margin:0;}
#pagination{height:12px;left:50%;margin-left:-45px;overflow:hidden;position:absolute;text-align:center;top:287px;width:100px;z-index:5;}
#pagination span{background:url(../images/main.png) no-repeat -250px -50px;cursor:pointer;float:left;font-size:0;line-height:0;margin:0 3px;overflow:hidden;padding:6px;}
#pagination span.current{background-position:-250px -62px;}

附件:下载该文件资源,减少时间成本(增值服务)