仿flash超炫焦点图播放器 · javascript for jquery

嘻嘻！~有了jquery一切变的如此简单！

最终效果图：

 

好嘞！废话不多说！Code贴上！哪位高手有更好的方式可以多多指点！

 

CSS Code

/*
 * images player
 * author:mr·zhong
 * date:2010-04-19
*/

#playerBox{ 
    width:305px; 
    height:282px; 
    border:1px solid #ccc; 
}

#playerImage ul{ 
    padding:0px; 
    margin:0px; 
    border:0px; 
    list-style:none; 
    position:absolute;
}

#playerImage ul li{ 
    padding:0px; 
    margin:0px; 
    border:0px; 
    list-style:none; 
    position:absolute;
}

#playerImage li img{ 
    width:305px; 
    height:282px; 
    border:0px;
}

#playerNavAndTitle{ 
    z-index:10; 
    position:absolute; 
    height:50px; 
    width:305px; 
    background-color:#000; 
    filter:alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6; 
}

#playerNavAndTitle #playerTitle{
    width:auto; 
    height:20px; 
    line-height:30px; 
    text-indent:10px; 
}

#playerNavAndTitle #playerTitle a{ 
    color:#FFFFFF; 
    text-decoration:none; 
    font-weight:bold; 
    position:absolute;
    font-size:15px;
    font-family:宋体;
}

#playerNavAndTitle #playerTitle a:hover
{
    color:Yellow;
}

#playerNavAndTitle #playerNav{ 
    float:right; 
    text-align:right;
}

#playerNavAndTitle #playerNav a{ 
    float:left;
    display:block; 
    background-color:#CC3300; 
    border:1px solid #fff; 
    width:15px; 
    height:15px; 
    margin:5px 5px; 
    text-align:center; 
    line-height:15px; 
    text-decoration:none; 
    color:#FFFFFF; 
    cursor:pointer;
    font-family:宋体;
}

#playerNavAndTitle #playerNav .hover{
    background-color:#FFFFFF;
    border:1px solid #cc3300;
    color:#CC3300;    
    float:left;
    display:block;     
    width:15px; 
    height:15px; 
    margin:5px 5px; 
    text-align:center; 
    line-height:15px; 
    text-decoration:none;     
    cursor:pointer;
    font-family:宋体;
}

 

 

HTML Code

<div id="playerBox">
<div id="playerImage">
<ul>
<li><img src="img/1.gif" /></li>
<li><img src="img/2.gif" /></li>
<li><img src="img/3.gif" /></li>
<li><img src="img/4.gif" /></li>
<li><img src="img/5.gif" /></li>
</ul>
</div>

<div id="playerNavAndTitle">
<div id="playerTitle">
<a href="#">测试一</a>
<a href="#">测试二</a>
<a href="#">测试三</a>
<a href="#">测试四</a>
<a href="#">测试五</a>            
</div>        
<div id="playerNav"></div>
</div>
</div>

 

 

 

JS Code

/*
 * images player
 * author:mr·zhong
 * date:2010-04-19
*/

//当前导航页码数字
var currentPage = 1;
//图片间隔时间
var playerTime = 3000;

jquery(function(){    
    SetPlayerNavPosition();               
    OnLoadingImages();    
    OnLoadingLinks();
    setInterval("Player()",playerTime);
});

/*
 * 图片播放方法
*/
function Player(){
    PageClick(jquery("#page_" + currentPage));

if(currentPage == jquery("#playerNav a").length)
        currentPage = 1;
else
        currentPage++;
}

/*
 * 创建图片页码·并绑定页码的click事件
 * count:需要创建页面的个数
*/
function CreatePageNberObj(count){
var pages = '';

for(var i = 1; i <= (count - 1); i++){
        pages += '<a > });
}

 

DEMO下载地址：https://files.cnblogs.com/keke/ImagePlayer.rar