探索频道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代码,焦点图,JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为探索频道JS大焦点图效果" />
    <title>探索频道JS大焦点图效果</title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <script src="js/ifocus.js" type="text/javascript"></script>
    <script type="text/javascript">
        var _bdhm_top = 0;
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        var _bdhm_tim = new Image(1, 1);
        _bdhm_tim.id = "bdhmPerimg";
        _bdhm_tim.src = _bdhmProtocol + "hm.baidu.com/_tt.gif?si=0868dbe2d591f3c1beb2f6dd50bdb72e&rnd=" + Math.round(Math.random() * 2147483647);
        _bdhm_tim.onload = function () { _bdhm_top = 1; }
    </script>
</head>

<body>
    <br />
    <div id="ifocus">
        <div style="width: 657px; height: 274px; overflow: hidden; position: relative;">
            <div id="ifocus_pic">
                <div id="ifocus_piclist" style="left: 0; top: 0;">
                    <ul>

                        <li><a href="#"><img src="pic/1.jpg" /></a></li>
                        <li><a href="#"><img src="pic/2.jpg" /></a></li>
                        <li><a href="#"><img src="pic/3.jpg" /></a></li>
                        <li><a href="#"><img src="pic/4.jpg" /></a></li>
                        <li><a href="#"><img src="pic/5.jpg" /></a></li>

                    </ul>
                </div>
            </div>

        </div>
        <div id="ifocus_btn">
            <ul>
                <li class="current"><img alt="1" src="pic/1s.jpg" /><p>文字图片介绍一</p><a href="#"><span>了解更多详情</span></a></li>
                <li class="normal"><img alt="2" src="pic/2s.jpg" /><p>文字图片介绍二</p><a href="#"><span>了解更多详情</span></a></li>
                <li class="normal"><img alt="3" src="pic/3s.jpg" /><p>文字图片介绍三</p><a href="#"><span>了解更多详情</span></a></li>
                <li class="normal"><img alt="4" src="pic/4s.jpg" /><p>文字图片介绍四</p><a href="#"><span>了解更多详情</span></a></li>
                <li class="normal"><img alt="5" src="pic/5s.jpg" /><p>文字图片介绍五</p><a href="#"><span>了解更多详情</span></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

JS代码(ifocus.js):

function $$(id){
	return document.getElementById(id);
}
function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
	window.onload = func;
}
else{
	window.onload = function(){
	oldonload();
	func();
}
}
}
function moveElement(elementID,final_x,final_y,interval){
	if (!document.getElementById) return false;
	if (!document.getElementById(elementID)) return false;
	var elem = document.getElementById(elementID);
	if (elem.movement){
	clearTimeout(elem.movement);
}
if (!elem.style.left){
	elem.style.left = "0px";
}
if (!elem.style.top){
	elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if (xpos == final_x && ypos == final_y){
	return true;
}
if (xpos < final_x){
	var dist = Math.ceil((final_x - xpos)/10);
	xpos = xpos + dist;
}
if (xpos > final_x){
	var dist = Math.ceil((xpos - final_x)/10);
	xpos = xpos - dist;
}
if (ypos < final_y){
	var dist = Math.ceil((final_y - ypos)/10);
	ypos = ypos + dist;
}
if (ypos > final_y){
	var dist = Math.ceil((ypos - final_y)/10);
	ypos = ypos - dist;
}
elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
	elem.movement = setTimeout(repeat,interval);
}
function iFocusChange(){
	if(!$$('ifocus')) return false;
	$$('ifocus').onmouseover = function(){
	atuokey = true}
;
	$$('ifocus').onmouseout = function(){
	atuokey = false}
;
	var iFocusBtns = $$('ifocus_btn').getElementsByTagName('li');
	var listLength = iFocusBtns.length;
	for(var i=0;
	i<listLength;
	i++){
	iFocusBtns[i].index=i;
	iFocusBtns[i].onmouseover = function(){
	moveElement('ifocus_piclist',0,-(this.index*277),5);
	classCurrent('ifocus_btn',this.index);
}
}
}
setInterval('autoiFocus()',5000);
	var atuokey = false;
	function autoiFocus(){
	if(!$$('ifocus')) return false;
	if(atuokey) return false;
	var focusBtnList = $$('ifocus_btn').getElementsByTagName('li');
	var listLength = focusBtnList.length;
	for(var i=0;
	i<listLength;
	i++){
	if (focusBtnList[i].className == 'current') var currentNum = i;
}
if (currentNum!=listLength-1){
	moveElement('ifocus_piclist',0,-((currentNum+1-0)*277),5);
	classCurrent('ifocus_btn',currentNum+1-0);
}
else{
	moveElement('ifocus_piclist',0,0,5);
	classCurrent('ifocus_btn',0);
}
}
function classCurrent(iFocusBtnID,n){
	var iFocusBtns= $$(iFocusBtnID).getElementsByTagName('li');
	for(var i=0;
	i<iFocusBtns.length;
	i++){
	if (i==n)iFocusBtns[n].className='current';
	elseiFocusBtns[i].className='normal';
}
}
addLoadEvent(iFocusChange);

CSS代码(css.css):

*{margin:0;padding:0;}
body{font-size:12px;text-align:center;background-color:#ffffff;}
li{list-style:none;}
.clearfix:after{content:".";clear:both;display:block;height:0;visibility:hidden;}
.clearfix{zoom:1;}
img{border:none;}
.c{clear:both;height:5px;overflow:hidden;}
h1,h2,h3,h4,h5{font-size:1em}
a{font-family:����;font-size:12px;font-weight:bold;color:#33779E;text-decoration:none;}
a:link{font-family:����;font-size:12px;font-weight:bold;color:#33779E;text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;color:#333;}
a:active{text-decoration:none;color:#333;}
li a{font-family:����;font-size:12px;font-weight:normal;color:#33779E;text-decoration:none;}
li a:link{font-family:����;font-size:12px;font-weight:normal;color:#33779E;text-decoration:none;}
li a:visited{text-decoration:none;}
li a:hover{text-decoration:underline;color:#333333;}
li a:active{text-decoration:underline;color:#333333;}
p{line-height:30px}
/* iFocus style */
#ifocus{width:657px;height:341px;position:relative;overflow:hidden}
#ifocus_pic{display:inline;width:657px;height:274px;overflow:hidden;}
#ifocus_piclist{width:100%;position:absolute;}
#ifocus_piclist li{width:657px;height:274px;overflow:hidden;position:relative;}
#ifocus_piclist img{width:100%;height:100%;position:absolute;top:0;left:0;}
#ifocus_piclist .focusTitle{width:100%;line-height:30px;height:30px;position:absolute;top:0;left:0;filter:Alpha(Opacity=50);-moz-opacity:0.5;}
#ifocus_btn{display:block;position:absolute;height:64px;width:657px;bottom:0;left:0px;overflow:hidden;}
#ifocus_btn ul{height:64px;}
#ifocus_btn li{height:62px;margin:0 2px;overflow:hidden;width:84px;vertical-align:bottom;float:left;border:#d0d4d7 solid 1px;background:url(../images/discovery_0720_17.gif);cursor:pointer;}
#ifocus_btn li a{color:#33779e;display:block;height:25px;width:198px;float:left;overflow:hidden;text-align:left;text-decoration:none;}
#ifocus_btn li span{padding-right:20px;padding-top:3px;padding-bottom:3px;line-height:30px;background:url(../images/discovery_0720_20.gif) 0px right no-repeat;}
#ifocus_btn li p{float:left;width:198px;text-align:left;height:40px;overflow:hidden;line-height:20px;}
#ifocus_btn li img{float:left;width:84px;height:62px;margin-right:3px;}
#ifocus_btn .current{width:286px;}
.focusPlay{position:absolute;top:10px;right:10px;width:269px;height:217px;z-index:4444;overflow:hidden;background:#000;padding-top:15px;}
#ifocus_piclist .focusTitlet{width:100%;line-height:30px;height:30px;position:absolute;font-size:16px;font-weight:700;bottom:0;left:0;z-index:999;filter:Alpha(Opacity=50);background:#fff;-moz-opacity:0.5;}

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