html和js部分
<!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="此代码内容为仿2015汽车之家首页焦点图，属于站长常用代码，更多焦点图代码请访问懒人图库JS代码频道。" />
<title>仿2015汽车之家首页焦点图</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/lrtk.js"></script>
<base target="_blank" />
</head>
<body>
<!-- 代码 开始 -->
<div id="box">
<div class="prev"></div>
<div class="next"></div>
<ul class="bigUl">
<li><a href="#"><img src="data:images/1.jpg" alt="定位精品路线 原创试驾奇瑞艾瑞泽3" /></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt="锂电池是亮点 米儿低速电动车设计解读" /></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt="舒适及操控更上一层楼 测试长安金欧诺" /></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt="外观动感/配置丰富 天籁2.0L用车记" /></a></li>
<li><a href="#"><img src="data:images/5.jpg" alt="走到哪都信心十足 普拉多用车心得" /></a></li>
<li><a href="#"><img src="data:images/6.jpg" alt="全新东风标致508 驾乘尽享的中高级杰座" /></a></li>
<li><a href="#"><img src="data:images/7.jpg" alt="C4L 动力快人一步礼遇更胜一筹" /></a></li>
</ul>
<ul class="numberUl"></ul>
<ul class="textUl"></ul>
</div> </body>
</html> <script type="text/javascript">
function slide(json){
this.index=json.index||0;
this.timeout=json.timeout;
this.curIndex=this.index;
this.box=document.getElementById(json.id);
this.allUl=this.box.getElementsByTagName("ul");
this.btn=this.allUl[1];
this.txt=this.allUl[2]; //左右箭头
this.allDiv=this.box.getElementsByTagName("div");
this.prev=this.allDiv[0];
this.next=this.allDiv[1]; //所有图片
this.allLi=this.allUl[0].getElementsByTagName("li");
this.aImg=this.allUl[0].getElementsByTagName("img"); this.init();
} slide.prototype.init=function(){
var htmltxt="";
var subscrble="";
for(var i=0;i<this.allLi.length;i++){
var n=i+1;
htmltxt+="<li><a href='javascript:;'>"+n+"</a></li>";
var txt=this.aImg[i].getAttribute("alt");
subscrble+="<li><a href='#'>"+txt+"</a></li>";
} this.btn.innerHTML=htmltxt;
this.txt.innerHTML=subscrble;
this.tab(this.index);
this.prevFn();
this.nextFn(); if(this.timeout){
this.autoRun(this.index);
}
} slide.prototype.tab=function(n){
var allLi=this.btn.getElementsByTagName("li");
var allLiTxt=this.txt.getElementsByTagName("li");
for(var i=0;i<this.allLi.length;i++){
this.allLi[i].style.display="none";
allLiTxt[i].style.display="none";
allLi[i].className="";
}
allLi[n].className="night";
allLiTxt[n].style.display="block";
this.allLi[n].style.display="block";
this.clickFn();
} slide.prototype.clickFn=function(){
var allLi=this.btn.getElementsByTagName("li");
var _this=this;
for(var i=0;i<allLi.length;i++){
(function(ind){
allLi[ind].onclick=function(){
_this.tab(ind);
}
this.curIndex=ind;
})(i) }
} slide.prototype.autoRun=function(n){
this.timer=null
var _this=this; this.box.onmouseout=function(){
_this.prev.style.display="none";
_this.next.style.display="none";
_this.timer=setInterval(function(){
_this.tab(n)
n++;
if(n==_this.allLi.length){
n=0;
}
if(n<0){
n=_this.allLi.length-1;
}
this.curIndex=n;
},_this.timeout)
} this.box.onmouseover=function(){
clearInterval(_this.timer);
_this.prev.style.display="block";
_this.next.style.display="block";
} this.box.onmouseout();
} slide.prototype.nextFn=function(){
var _this=this;
this.next.onclick=function(){
_this.curIndex++;
if(_this.curIndex==_this.allLi.length){
_this.curIndex=0;
}
_this.tab(_this.curIndex)
}
} slide.prototype.prevFn=function(){
var _this=this;
this.prev.onclick=function(){
_this.curIndex--;
if(_this.curIndex<0){
_this.curIndex=_this.allLi.length-1;
}
_this.tab(_this.curIndex)
}
} var json={
index:0,
id:"box",
timeout:1000,
} new slide(json);
</script>
css部分
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:; padding:; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}
/* css common */
.clearfix:after {content: "."; display: block; height:; clear:both; visibility: hidden;}
.clearfix { *zoom:; }
#box{ position:relative; width:368px; height:221px; border:1px solid #f2f2f2; margin:100px auto;}
#box .bigUl{}
#box .prev{ position:absolute; width:40px; height:60px; background:url(../images/icon-focusimg-btn-png24-20131225.png) -44px -63px no-repeat; z-index:; top:67px; left:0px; cursor:pointer; display:none;}
#box .next{ position:absolute; width:40px; height:60px; background:url(../images/icon-focusimg-btn-png24-20131225.png) -74px -63px no-repeat; z-index:; top:67px; right:0px; cursor:pointer; display:none}
.bigUl li { position:absolute;}
.numberUl { position:absolute; right:; bottom:37px; z-index:}
.numberUl li{width:24px; height:13px; float:left; background:#3b5998; opacity:0.7; margin-left:1px;}
.numberUl li a{ display:block ;width:24px; height:13px; color:#fff; font-size:12px; text-align:center; line-height:13px;}
#box .textUl li{ position:absolute; left:20px; bottom:10px;}
#box .textUl li a{ font-size:18px; font-family:"Microsoft Yahei"; color:#000; font-weight:bold;}
.numberUl li.night a{ background:yellow; color:black; }
别问我为什么css这么多，我也不知道，我是从懒人图库里面直接找来的样式，然后自己改吧改吧js做的，没有花哨的效果，就是现实隐藏，自己看着办吧，想花哨，请把tab()，改花哨就行了，具体的效果请参照这个来：http://www.lanrentuku.com/js/jiaodiantu-1184.html