必趣网首页jQuery焦点图轮播滚动切换特效代码

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

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

以下是必趣网首页jQuery焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>必趣网首页jQuery焦点图</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>  
  <!-- 幻灯 start-->
    <div class="magic_lantern_box">
      <ul class="magic_lantern_list">
        <li style="background-image: url(images/1.jpg);"><a target="_blank" href="#"></a></li>
        <li style="background-image: url(images/2.jpg);"><a target="_blank" href="#"></a></li>
        <li style="background-image: url(images/3.jpg);"><a target="_blank" href="#"></a></li>
        <li style="background-image: url(images/4.jpg);"><a target="_blank" href="#"></a></li>
        <li style="background-image: url(images/5.jpg);"><a target="_blank" href="#"></a></li>
        <li style="background-image: url(images/6.jpg);"><a target="_blank" href="#"></a></li>
      </ul>
      <div class="video_synopsis">
        <div class="synopsis_left">
            <span class="biquu_logo"><img src="images/logo.png"></span>
            <span class="video_tilte">《废墟》“终结者”的惊险逃亡</span>
        </div>
        
        <ul class="synopsis_right">
          <li data-title="《废墟》“终结者”的惊险逃亡"><img src="images/1378823349.jpg"></li>
          <li data-title="《激流》萌大叔与小萝莉的一日情"><img src="images/1378775097.jpg"></li>
          <li data-title="《缘来是爱》郭品超变医生帮美女惊情换心"><img src="images/1378705127.jpg"></li>
          <li data-title="《纸人》2013奥斯卡最佳短片"><img src="images/1378479575.jpg"></li>
          <li data-title="《不眠之夜》浪漫法国人的一夜情"><img src="images/1378358429.jpg"></li>
          <li data-title="《一次性爱上》全网首播 不容错过"><img src="images/1378354805.jpg"></li>
        </ul>
      </div>
    </div>
</body>
</html>

JS代码(zzsc.js):

$(function(){
	//start 幻灯片var sub=0;
	var auto_h;
	$('.synopsis_right li').click(function(){
	var title=$(this).data('title');
	cur_selected($(this));
	sub=$(this).index();
	$('.video_tilte').html(title);
	$('.magic_lantern_list li').css('display','none');
	$('.magic_lantern_list li:eq('+sub+')').fadeIn(300);
	clearInterval( auto_h );
	auto_scroll();
}
);
	function auto_scroll(){
	cur_selected($('.synopsis_right li:eq('+sub+')'));
	var scroll_num=$('.magic_lantern_list li').length;
	$('.magic_lantern_list li:eq('+sub+')').fadeIn(500);
	auto_h=setInterval(function(){
	if(sub==scroll_num-1){
	sub=0;
}
else{
	sub++;
}
$('.magic_lantern_list li').css('display','none');
	$('.magic_lantern_list li:eq('+sub+')').fadeIn(500);
	$cur_selected=$('.synopsis_right li:eq('+sub+')');
	cur_selected($cur_selected);
	var title=$cur_selected.data('title');
	$('.video_tilte').html(title);
}
,3000);
}
auto_scroll();
	function cur_selected($this){
	$('.synopsis_right li').css({
	'border':'none','padding':'2px'}
);
	$this.css({
	'border':'2px solid #07ACEC','padding':0}
);
}
//end 幻灯片}
);

CSS代码(index.css):

*{padding:0;margin:0;font-family:helvetica,arial,verdana,tahoma,sans-serif;}
a{text-decoration:none;}
ul,ol,li{list-style:none;}
/* start 幻灯片*/
.magic_lantern_box{max-width:1000px;width:98%;height:400px;position:relative;margin:80px auto;overflow:hidden;}
.magic_lantern_box .magic_lantern_list{height:100%;}
.magic_lantern_box .magic_lantern_list li{display:none;text-align:center;background-size:100% 100%;height:100%;}
.magic_lantern_box .magic_lantern_list li a{display:block;height:100%;}
.magic_lantern_box .magic_lantern_list .current{display:block;}
.video_synopsis{height:50px !important;width:100%;background:url('../images/hengtiao.png') 170px 0 no-repeat;font-family:"宋体",Arial,Helvetica,sans-serif;color:#fff;position:absolute;bottom:30px;}
.synopsis_left,.synopsis_right{float:left;}
.synopsis_right{float:right;height:100%;}
.synopsis_right li img,.synopsis_right li{width:44px;height:44px;}
.synopsis_right li{padding:2px;margin-right:5px;margin-top:1px;float:left;cursor:pointer;margin-right:5px;background:#C2C2C2;}
.video_synopsis .synopsis_left{font-size:17px;margin-left:18%;}
.video_synopsis .synopsis_left .biquu_logo{display:block;float:left;height:50px;width:100px;}
.video_synopsis .synopsis_left .biquu_logo img{height:42px;width:45px;margin-top:6px;margin-left:50px;}
.video_synopsis .synopsis_left .video_tilte{display:block;float:left;height:50px;line-height:50px;min-width:100px;padding-left:10px;}
/* end 幻灯片*/

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