jQuery电影网站大图幻灯片轮播滑动滚动特效代码

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

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

以下是 jQuery电影网站大图幻灯片轮播滑动滚动特效代码的示例演示效果:

当前平台(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" />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/carousel1.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>jQuery电影网站大图幻灯片轮播代码</title>
</head>
<body>

<div id="carousel1" name="0">
	<div class="car_bigp">
		<img style="display:block" src="images/121331121.jpg"/>
		<img src="images/i1435043226_1.jpg"/>
		<img src="images/i1435050784_1.jpg"/>
		<img src="images/i1435111990_1.jpg"/>
		<img src="images/i1435112117_1.jpg"/>
		<img src="images/i1435149808_1.jpg"/>
	</div>
	<div class="car_click">
		<div class="car_c_title">
			<p></p>
		</div>
		<div class="car_c_smallpic">
			<input class="car_c_inpt1" type="button"/>
			<img style="border:solid 2px Darkorange" src="images/120643738.jpg"/>
			<img src="images/i1435043284_1.jpg"/>
			<img src="images/i1435050943_1.jpg"/>
			<img src="images/121323984.jpg"/>
			<img src="images/i1435112475_1.jpg"/>
			<img src="images/i1435149844_1.jpg"/>
			<input class="car_c_inpt2" type="button"/>
		</div>
	</div>
</div>
</body>
</html>

JS代码(carousel1.js):

$(function(){
	//默认值$("#carousel1").css("background-color","rgb(198,198,198)");
	//第一张图的背景$(".car_c_title p").html("<花千骨>霍建华教古琴迷倒赵丽颖订单订单");
	//第一张图的标题//以下数组中的颜色与主图两边颜色同步的背景色(不同用户用脑分辨率不同导致图片无法铺满时,通过背景色的补充,起到铺满的作用)var rgb_arr = new Array("rgb(198,198,198)","rgb(238,238,238)","rgb(224,232,219)","rgb(33,27,123)","rgb(46,167,220)","rgb(0,0,0)");
	//所有标题var title_arr = new Array("<花千骨>霍建华教古琴迷倒赵丽颖订单订单","赵薇的银幕进化史从票房毒药到人生赢家","全球电影侦察36岁还清纯你信么？","《大牌驾到》佟大为：邓超不怕妻子但我怕","《怪物史瑞克》颠覆王子公主童话","中国电影新力量红毯秀《捉妖记》《栀子花开》等亮相");
	//自动轮播方法function roll(rgb_arr,title_arr){
	setTimeout(function(){
	for(var i=0;
	i<=5;
	i++){
	var nowpic = $("#carousel1 .car_bigp img").eq(i);
	if(nowpic.css("display") == "block"){
	var showpicnum = i*1+1*1;
	$("#carousel1 .car_bigp img").css("display","none");
	//先隐藏所有主图$(".car_c_smallpic img").css("border","");
	//先隐藏所有小图边框if(showpicnum == 6){
	//最后一张时,跳转到第一张$("#carousel1 .car_bigp img").eq(0).css("display","block");
	$("#carousel1").css("background-color",rgb_arr[0]);
	$("#carousel1").attr("name",0);
	$(".car_c_smallpic img").eq(0).css("border","solid 2px Darkorange");
	$(".car_c_title p").html(title_arr[0]);
}
else{
	$("#carousel1 .car_bigp img").eq(showpicnum).css("display","block");
	//主图$("#carousel1").css("background-color",rgb_arr[showpicnum]);
	//主图背景$("#carousel1").attr("name",showpicnum);
	//给div一个name值,代表当前自动轮到到哪张图,鼠标轮播时会用到这个值$(".car_c_smallpic img").eq(showpicnum).css("border","solid 2px Darkorange");
	//小图边框$(".car_c_title p").html(title_arr[showpicnum]);
	//标题}
break;
}
}
roll(rgb_arr,title_arr);
}
,5000);
}
roll(rgb_arr,title_arr);
	//点击左箭头$(".car_c_inpt1").click(function(){
	var showpicnum = $("#carousel1").attr("name");
	//当前选中的图片eq编号if(showpicnum <= 0){
	var eqnum = 5;
}
else{
	var eqnum = showpicnum-1;
}
mouseRoll(rgb_arr,title_arr,eqnum);
}
);
	//点击右箭头$(".car_c_inpt2").click(function(){
	var showpicnum = $("#carousel1").attr("name");
	//当前选中的图片eq编号if(showpicnum >= 5){
	var eqnum = 0;
}
else{
	var eqnum = showpicnum*1+1*1;
}
mouseRoll(rgb_arr,title_arr,eqnum);
}
);
	//鼠标滑过小图$(".car_c_smallpic img").mouseover(function(){
	var eqnum = $(this).index()-1;
	mouseRoll(rgb_arr,title_arr,eqnum);
}
);
	//鼠标事件轮播方法function mouseRoll(rgb_arr,title_arr,eqnum){
	$(".car_c_smallpic img").css("border","");
	//隐藏所有小图边框$(".car_c_smallpic img").eq(eqnum).css("border","solid 2px Darkorange");
	//显示当前选中的小图边框$("#carousel1 .car_bigp img").css("display","none");
	//隐藏所有主图$("#carousel1 .car_bigp img").eq(eqnum).css("display","block");
	//显示当前选中的主图$("#carousel1").css("background-color",rgb_arr[eqnum]);
	//显示当前选中的主图背景$(".car_c_title p").html(title_arr[eqnum]);
	//标题$("#carousel1").attr("name",eqnum);
	//最新的name值}
}
)

CSS代码(style.css):

/* CSS Document */
/*css reset*/
body,h1,h2,h3,p,li,ul,img{padding:0px;margin:0px;}
img{border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
body{font-family:微软雅黑;}
#carousel1{width:100%;height:504px;text-align:center;overflow:hidden;}
#carousel1 .car_bigp img{display:none;margin:auto;}
#carousel1 .car_click{width:1010px;height:65px;background:url(../images/background1.png);position:absolute;z-index:2;top:400px;left:22%;}
#carousel1 .car_click .car_c_title{width:265px;height:55px;margin-top:5px;float:left;}
#carousel1 .car_click .car_c_title p{font-size:18px;color:white;margin:5px 5px}
#carousel1 .car_click .car_c_smallpic{width:740px;height:55px;margin-top:5px;float:left;}
#carousel1 .car_click .car_c_smallpic input{float:left;}
#carousel1 .car_click .car_c_smallpic img{cursor:pointer;float:left;margin:0 5px;border:solid 2px #fff;}
#carousel1 .car_click .car_c_smallpic .car_c_inpt1{width:34px;height:50px;border:0px;background:url(../images/arrow1.png);cursor:pointer;margin-right:5px;}
#carousel1 .car_click .car_c_smallpic .car_c_inpt2{width:34px;height:50px;border:0px;background:url(../images/arrow2.png);cursor:pointer;margin-left:5px;}

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