slide效果
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="images/1.jpg" alt="定位精品路线 原创试驾奇瑞艾瑞泽3" /></a></li> <li><a href="#"><img src="images/2.jpg" alt="锂电池是亮点 米儿低速电动车设计解读" /></a></li> <li><a href="#"><img src="images/3.jpg" alt="舒适及操控更上一层楼 测试长安金欧诺" /></a></li> <li><a href="#"><img src="images/4.jpg" alt="外观动感/配置丰富 天籁2.0L用车记" /></a></li> <li><a href="#"><img src="images/5.jpg" alt="走到哪都信心十足 普拉多用车心得" /></a></li> <li><a href="#"><img src="images/6.jpg" alt="全新东风标致508 驾乘尽享的中高级杰座" /></a></li> <li><a href="#"><img src="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:0; padding:0; } 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:0; clear:both; visibility: hidden;} .clearfix { *zoom:1; } #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:500; 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:500; top:67px; right:0px; cursor:pointer; display:none} .bigUl li { position:absolute;} .numberUl { position:absolute; right:0; bottom:37px; z-index:400} .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
