有缩略图和文字描述的JS焦点图代码轮播滚动切换特效

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

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

以下是有缩略图和文字描述的JS焦点图代码轮播滚动切换特效的示例演示效果:

当前平台(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=gb2312" />
    <meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为{title}" />
    <title>{title}</title>
    <link href="css/movie_index.css" type=text/css rel=stylesheet />
    <script src="js/prototype.js" type=text/javascript></script>
</head>

<body style="text-align:center">
    <br /><br />
    <script src="js/changimages.js" type=text/javascript></script>
    <table width="44%" height="114" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="left">
                <div class=flashbox align="center">
                    <div id=SwitchBigPic>
                        <div>
                            <a title=《玩命快递3》最新动作大片 href="#">
                                <img class=pic alt=《玩命快递3》最新动作大片
                                     src="images/01.jpg" />
                            </a>
                        </div>
                        <div>
                            <a title=《黑皮书》抢占贺岁档 href="#">
                                <img class=pic alt=《黑皮书》抢占贺岁档
                                     src="images/02.jpg" />
                            </a>
                        </div>
                        <div>
                            <a title=《疯狂的赛车》比石头更疯狂 href="#">
                                <img class=pic alt=《疯狂的赛车》比石头更疯狂
                                     src="images/03.jpg" />
                            </a>
                        </div>
                        <div>
                            <a title=《喜羊羊与灰太狼》3天3千万 href="#">
                                <img class=pic alt=《喜羊羊与灰太狼》3天3千万
                                     src="images/04.jpg" />
                            </a>
                        </div>
                        <div>
                            <a title=《贫民富翁》金球奖大赢家 href="#">
                                <img class=pic alt=《贫民富翁》金球奖大赢家
                                     src="images/05.jpg" />
                            </a>
                        </div>
                    </div>
                    <ul id=SwitchNav>
                        <li>
                            <a href="#">
                                <strong>《玩命快递3》最新动作大片</strong>斯坦森与越狱男克奈普恶斗<img src="images/r1.jpg" />
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <strong>《黑皮书》抢占贺岁档</strong>战争中的美女间谍大PK <img src="images/r2.jpg" />
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <strong>《疯狂的赛车》比石头更疯狂</strong>笑料升级 揭秘四大“疯狂”点<img src="images/r3.jpg" />
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <strong>《喜羊羊与灰太狼》3天3千万</strong>史上最爆笑的贺岁动画电影<img src="images/r4.jpg" />
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <strong>《贫民富翁》金球奖大赢家</strong>再获英国“奥斯卡”11项提名<img src="images/r5.jpg" />
                            </a>
                        </li>
                    </ul>
                </div>
                <script>
                    var bigswitch = new SwitchPic(
                        {
                            bigpic: "SwitchBigPic",
                            switchnav: "SwitchNav",
                            selectstyle: "selected",
                            objname: "bigswitch"
                        }
                    );
                    bigswitch.goSwitch(bigswitch, 0);
                    bigswitch.autoSwitchTimer = setTimeout("bigswitch.autoSwitch(bigswitch) ;", 3000);
                </script>
            </td>
        </tr>
    </table>
</body>
</html>

JS代码(changimages.js):

var XLScroll = function(args){
	var cont = $(args.container);
	var singles = cont.getElementsByTagName("li");
	this.maxlength = singles.length;
	this.pershow = args.pershow;
	this.switch_data = singles;
	this.control_pre = args.control_pre;
	this.control_next = args.control_next;
	this.objname = args.objname;
	if (args.control_show){
	this.control_show_elm = args.control_show.elm;
	this.control_show_selectedstyle = args.control_show.selected_style;
}
}
XLScroll.prototype.scroll_switch = function(obj,page){
	var maxpage = parseInt(this.maxlength / this.pershow);
	if (page < 1){
	page = maxpage;
}
if (page > maxpage){
	page = 1;
}
$(this.control_pre).onclick = function(){
	obj.scroll_switch(obj,page - 1)}
;
	$(this.control_next).onclick = function(){
	obj.scroll_switch(obj,page + 1)}
;
	if (this.control_show_elm && this.control_show_selectedstyle){
	$(this.control_show_elm).innerHTML = "";
	for (i=1;
	i<=maxpage;
	i++){
	var showli = document.createElement("li");
	showli.innerHTML = '<a href="javascript://"></a>';
	showli.onclick = new Function(obj.objname+".scroll_switch("+obj.objname+","+i+");
	");
	// dasdasdif (i == page){
	showli.className = this.control_show_selectedstyle;
}
$(this.control_show_elm).appendChild(showli);
}
}
for (i=0;
	i<this.maxlength;
	i++){
	if ( i >= ((page-1)*(this.pershow)) && i <= (page*this.pershow - 1) ){
	this.switch_data[i].style.display = "block";
}
else{
	this.switch_data[i].style.display = "none";
}
}
}
var SwitchPic = function(args){
	this.bigpiccont = $(args.bigpic);
	this.switchnav = $(args.switchnav);
	this.selectstyle = args.selectstyle;
	this.objname = args.objname;
	this.curpage = 0;
	this.autotimeintval = 3000;
	var bigpics = $(this.bigpiccont).getElementsByTagName("div");
	this.totalcount = bigpics.length;
	//this.bigpics = bigpics;
	for (i=0;
	i<bigpics.length;
	i++){
	bigpics[i].onmouseover = new Function(this.objname+".pauseSwitch();
	");
	bigpics[i].onmouseout = new Function(this.objname+".goonSwitch("+this.objname+");
	");
}
var switchnavs = $(this.switchnav).getElementsByTagName("li");
	for (i=0;
	i<switchnavs.length;
	i++){
	switchnavs[i].onmouseover = new Function(this.objname+".goSwitch("+this.objname+","+i+");
	"+this.objname+".pauseSwitch();
	");
	switchnavs[i].onmouseout = new Function(this.objname+".goonSwitch("+this.objname+");
	");
}
}
SwitchPic.prototype.goSwitch = function(obj,page){
	if (page >= this.totalcount){
	page = 0;
}
this.curpage = page;
	var bigpics = $(this.bigpiccont).getElementsByTagName("div");
	for (i=0;
	i<bigpics.length;
	i++){
	if (i == page){
	bigpics[i].style.display = "block";
}
else{
	bigpics[i].style.display = "none";
}
}
var switchnavs = $(this.switchnav).getElementsByTagName("li");
	for (i=0;
	i<switchnavs.length;
	i++){
	if (i == page){
	Element.addClassName(switchnavs[i],this.selectstyle);
}
else{
	Element.removeClassName(switchnavs[i],this.selectstyle);
}
}
}
SwitchPic.prototype.autoSwitch = function(obj){
	this.curpage ++;
	this.goSwitch(obj,this.curpage);
	this.autoSwitchTimer = setTimeout(obj.objname+".autoSwitch("+obj.objname+");
	",this.autotimeintval);
}
SwitchPic.prototype.pauseSwitch = function(){
	clearTimeout(this.autoSwitchTimer);
}
SwitchPic.prototype.goonSwitch = function(obj){
	clearTimeout(this.autoSwitchTimer);
	this.autoSwitchTimer = setTimeout(obj.objname+".autoSwitch("+obj.objname+");
	",this.autotimeintval);
}

CSS代码(movie_index.css):

*{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;}
BODY{BACKGROUND:#fff;FONT:12px/20px simsun;COLOR:#595959;TEXT-ALIGN:center;}
IMG{BORDER-TOP-STYLE:none;BORDER-RIGHT-STYLE:none;BORDER-LEFT-STYLE:none;BORDER-BOTTOM-STYLE:none}
ul,li{list-style:none;}
A{COLOR:#257ec0;TEXT-DECORATION:none}
A:hover{COLOR:#ff7202;TEXT-DECORATION:underline}
.flashbox{MARGIN-BOTTOM:10px;OVERFLOW:hidden;POSITION:relative;HEIGHT:254px;}
.flashbox .pic{BORDER-RIGHT:#bfdcec 1px solid;PADDING-RIGHT:1px;BORDER-TOP:#bfdcec 1px solid;PADDING-LEFT:1px;LEFT:0px;PADDING-BOTTOM:1px;BORDER-LEFT:#bfdcec 1px solid;WIDTH:450px;PADDING-TOP:1px;BORDER-BOTTOM:#bfdcec 1px solid;POSITION:absolute;TOP:0px;HEIGHT:250px}
.flashbox UL{LEFT:455px;WIDTH:270px;POSITION:absolute;TOP:0px}
.flashbox LI{MARGIN-BOTTOM:1px;OVERFLOW:hidden;LINE-HEIGHT:24px;HEIGHT:50px}
.flashbox LI A{PADDING-RIGHT:90px;DISPLAY:block;PADDING-LEFT:5px;BACKGROUND:#e8e9ea;PADDING-BOTTOM:0px;COLOR:#333;PADDING-TOP:10px;POSITION:relative;HEIGHT:40px}
.flashbox LI.selected A{BACKGROUND:url(../img/index_icon.gif) repeat-x;COLOR:#333;TEXT-DECORATION:none}
.flashbox LI A:hover{BACKGROUND:url(../img/index_icon.gif) repeat-x;COLOR:#333;TEXT-DECORATION:none}
.flashbox LI STRONG{DISPLAY:block;OVERFLOW:hidden;CURSOR:pointer;LINE-HEIGHT:14px;HEIGHT:14px}
.flashbox LI IMG{RIGHT:7px;WIDTH:74px;POSITION:absolute;TOP:3px;HEIGHT:44px}

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