电影式滑动效果加自动轮播

/*html部分*/

  

    
电影
    

      
 
        

          
 标题信息1 最新：TS版 
          

            

              类型：
              动作古装预告片
            

              导演：
              冯德伦
            

              主演：
              梁家辉杨颖彭于晏冯绍峰
          
          
[影片介绍]《太极之从零开始》是由华谊兄弟出品，王中磊担任制片人、陈国富监制、冯德伦导演的电影《太极》三部曲中的第一部。该片已入围第69届威尼斯电影节非..
          马上观看
      
      
 
        

          
 标题信息2 最新：TC 
          

            

              类型：
              爱情古装预告片
            

              导演：
              赵林山
            

              主演：
              周润发刘亦菲玉木宏
          
          
[影片介绍]庚子年，恰逢天象“四星合一”，预示改朝换代之征兆。曹操（周润发饰）的部属、尤其他的公子曹丕（邱心志饰），希望借此良机推献帝禅位、曹操登..
          马上观看
      
      
 
        

          
 标题信息3 最新：BD国语全集 
          

            

              类型：
              动作惊悚魔幻
            

              导演：
              克里斯托弗·诺兰
            

              主演：
              克里斯蒂安·贝尔汤姆·哈迪安妮·海瑟薇
          
          
[影片介绍]本片是克里斯托弗·诺兰执导的“蝙蝠侠”系列三部曲的最终章。前两部分别是2005年的《蝙蝠侠：开战时刻》和2008年的《蝙蝠侠：黑暗骑士》。此片为20..
          马上观看
      
      
 
        

          
 标题信息4 最新：TC 
          

            

              类型：
              科幻惊悚悬疑
            

              导演：
              保罗·安德森
            

              主演：
              米拉·乔沃维奇西耶娜·盖尔利李冰冰米歇尔·罗德里格兹
          
          
[影片介绍]影片设定在1998年，影片不再是只把焦点集中在爱丽丝这个角色身上，吉尔将在由安布雷拉（Umbrella）制造的僵尸潮的爆发中扮演重要角色。里昂·肯尼迪..
          马上观看
      
      
 
        

          
 标题信息5 最新：BD版 
          

            

              类型：
              科幻惊悚
            

              导演：
              雷德利·斯科特
            

              主演：
              劳米·拉佩斯迈克尔·法斯宾德
          
          
[影片介绍]2058年，考古学家在非洲挖掘出的古迹发现，人类是由一个进化程度更高的外星生物种族创造的。于是人们派出飞船“普罗米修斯号”前去外星“上帝”的星..
          马上观看
      
      
 
        

          
 标题信息6 最新：BD英语上集 
          

            

              类型：
              动作冒险
            

              导演：
              西蒙·韦斯特
            

              主演：
              西尔维斯特·史泰龙杰森·斯坦森布鲁斯·威利斯米基·洛克李连杰
          
          
[影片介绍]敢死队2，由西蒙·韦斯特执导，主要讲述的是图尔“Tool”（米基·洛克饰演）在执行一项任务时被残忍杀害，以史泰龙为首的“敢死队”发誓为他报仇。与..
          马上观看
      
      
 
        

          
 标题信息7 最新：DVD版 
          

            

              类型：
              剧情冒险
            

              导演：
              程耳
            

              主演：
              孙红雷王珞丹张默倪大红杨坤
          
          
[影片介绍]中缅两国边境毒品交易肆虐，云南小镇的缉毒警察（张默饰）无意中由杀手（杨坤饰）查到一条重大贩毒罪案线索，而一切迹象皆指向黑帮老大（孙红雷饰）..
          马上观看
      
      
 
        

          
 标题信息8 最新：BD下集 
          

            

              类型：
              剧情悬疑
            

              导演：
              麦兆辉庄文强
            

              主演：
              梁朝伟周迅范晓萱王学兵董勇
          
          
[影片介绍]《听风者》改编自麦家小说《暗算》，而锁定男主角为梁朝伟。《暗算》原著讲述《听风》《看风》《捕风》三个故事。该片选取第一个故事，基本框架不变..
          马上观看
      
    
    

      

      

      

      

      

      

      

      

    
  
  



 

css分两部分：（1）
@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:#1d262c;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;}

（2）：
/*slider*/
#slider{width:100%;background-color:#000; padding-top:8px;margin-top: 100px;}
.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(../img/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(../img/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;}

jQuery部分：
$(function(){
	var sWidth = $("#slider_name").width();
	var len = $("#slider_name .silder_panel").length;
	var index = 0;
	var picTimer;
	
	var btn = "PrevNext";
	$("#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");
	
	// showPics
	function 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);
	}
});