M1905中国银幕jquery焦点图轮播滚动切换特效代码

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

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

以下是 M1905中国银幕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-1.7.2.min.js"></script>
    <title>M1905中国银幕jquery焦点图 </title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
    <div class="showpage">
        <div class="mainbody">
            <script language="JavaScript" src="js/bigpicroll.js"></script>
            <div class="flashbox f_list">
                <div class="focusNew_out flashlist">
                    <div style="display:block;" class="f_out">
                        <span class="f_out_txt"><a href="#" target="_blank" title="专访徐峥：“泰囧”=《午夜狂奔》＋《第八日》">专访徐峥：“泰囧”=《午夜狂奔》＋《第八日》</a></span>
                        <a target="_blank" href="#"><img width="706" height="398" alt="专访徐峥：“泰囧”=《午夜狂奔》＋《第八日》" title="专访徐峥：“泰囧”=《午夜狂奔》＋《第八日》" src="images/20130117033834961.jpg" /></a>
                    </div>
                    <div style="display:none;" class="f_out">
                        <span class="f_out_txt"><a href="#" target="_blank" title="电影时光机 追忆那些年与《泰坦尼克号》的故事">电影时光机 追忆那些年与《泰坦尼克号》的故事</a></span>
                        <a target="_blank" href="#"><img width="706" height="398" alt="电影时光机 追忆那些年与《泰坦尼克号》的故事" title="电影时光机 追忆那些年与《泰坦尼克号》的故事" src="images/20130117035322587.jpg" /></a>
                    </div>
                    <div style="display:none;" class="f_out">
                        <span class="f_out_txt"><a href="#" target="_blank" title="好莱坞圣诞档菜单曝光 16部影片看点提前揭秘">好莱坞圣诞档菜单曝光 16部影片看点提前揭秘</a></span>
                        <a target="_blank" href="#"><img width="706" height="398" alt="好莱坞圣诞档菜单曝光 16部影片看点提前揭秘" title="好莱坞圣诞档菜单曝光 16部影片看点提前揭秘" src="images/20130117032639490.jpg" /></a>
                    </div>
                    <div style="display:none;" class="f_out">
                        <span class="f_out_txt"><a href="#" target="_blank" title="大电影有看头：2012名导聚焦大义 圆乱世英雄梦">大电影有看头：2012名导聚焦大义 圆乱世英雄梦</a></span>
                        <a target="_blank" href="#"><img width="706" height="398" alt="大电影有看头：2012名导聚焦大义 圆乱世英雄梦" title="大电影有看头：2012名导聚焦大义 圆乱世英雄梦" src="images/20121031104619326.jpg" /></a>
                    </div>
                    <div style="display:none;" class="f_out">
                        <span class="f_out_txt"><a href="#" target="_blank" title="用数字聊电影：“复联”19天进入10亿俱乐部">用数字聊电影：“复联”19天进入10亿俱乐部</a></span>
                        <a target="_blank" href="#"><img width="706" height="398" alt="用数字聊电影：“复联”19天进入10亿俱乐部" title="用数字聊电影：“复联”19天进入10亿俱乐部" src="images/20121031101713523.jpg" /></a>
                    </div>
                </div>
                <div class="f_tabs">
                    <span class="f_tab hover">1</span>
                    <span class="f_tab ">2</span>
                    <span class="f_tab ">3</span>
                    <span class="f_tab ">4</span>
                    <span class="f_tab ">5</span>
                </div>
            </div>
            <script type="text/javascript">FeatureList(".f_list", { "onclass": "hover", "offclass": "", "pause_on_act": "click", "interval": 5000, "speed": 5 });</script>
        </div>
    </div>
</body>
</html>

JS代码(bigpicroll.js):

/**通用焦点大小图切换构建函数**/
/* * * 需要自行设定类/feature_list/feature_tabs/feature_tab/feature_out * */
var FeatureList = function(fobj,options){
	function feature_slide(nr){
	if (typeof nr == "undefined"){
	nr = visible_idx + 1;
	nr = nr >= total_items ? 0:nr;
}
tabs.removeClass(onclass).addClass(offclass).filter(":eq(" + nr + ")").removeClass(offclass).addClass(onclass);
	output.stop(true,true).filter(":visible").hide();
	output.filter(":eq(" + nr + ")").fadeIn("slow",function(){
	visible_idx = nr;
}
);
}
fobj = (typeof(fobj) == 'string')?$(fobj):fobj;
	fobj = $(fobj).eq(0);
	if(!fobj || fobj.size() == 0) return;
	//轮询间隔，默认2S var options = options ||{
}
;
	var visible_idx = options.startidx || 0;
	var onclass = options.onclass || "current";
	var offclass = options.offclass || "";
	var speed = options.speed || 10000;
	options.pause_on_act = options.pause_on_act || "click";
	options.interval = options.interval || 50000;
	var tabs = fobj.find(".f_tabs .f_tab");
	var output = fobj.find(".f_out");
	var total_items = tabs.length;
	//初始设定 output.hide().eq( visible_idx ).fadeIn("slow");
	tabs.eq( visible_idx ).addClass(onclass);
	if (options.interval > 0){
	var timer = setInterval(function (){
	feature_slide();
}
,options.interval);
	output.mouseenter(function(){
	clearInterval( timer );
}
).mouseleave(function(){
	clearInterval( timer );
	timer = setInterval(function (){
	feature_slide();
}
,options.interval);
}
);
	if (options.pause_on_act == "mouseover"){
	tabs.mouseenter(function(){
	clearInterval( timer );
	var idx = tabs.index($(this));
	feature_slide(idx);
}
).mouseleave(function(){
	clearInterval( timer );
	timer = setInterval(function (){
	feature_slide();
}
,options.interval);
}
);
}
else{
	tabs.click(function(){
	clearInterval( timer );
	var idx = tabs.index($(this));
	feature_slide(idx);
}
);
}
}
}

CSS代码(style.css):

body{line-height:20px;font-family:Verdana,Geneva,"宋体",Helvetica,sans-serif;font-size:12px;}
a{color:#26211d;text-decoration:none;}
a:hover{text-decoration:underline}
.showpage{width:778px;margin:0 auto;text-align:center;}
.showpage .flashbox{width:706px;height:398px;float:left;position:relative;}
.flashbox .focusNew_out{width:706px;height:398px;position:relative;z-index:2}
.flashbox .focusNew_out .f_out_txt{height:50px;width:536px;display:block;position:absolute;bottom:0;left:0;background-color:#000000;opacity:0.8;color:#d6d6d6;font-size:20px;font-family:"微软雅黑";line-height:50px;padding:0 150px 0 20px;overflow:hidden}
.flashbox .focusNew_out .f_out_txt a{color:#d6d6d6;}
.flashbox .f_tabs{width:140px;height:35px;position:absolute;bottom:15px;right:0px;z-index:100;}
.flashbox .f_tabs span{width:23px;height:19px;background-color:#474747;float:left;margin-right:3px;text-align:center;color:#f0f0f0;margin-top:15px;cursor:pointer}
.flashbox .f_tabs span.hover{height:19px;background-color:#B51017;margin-top:0;padding-top:15px;cursor:pointer}

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