以下是 腾讯科技热点推荐图片改进版代码 的示例演示效果:
部分效果截图:
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="此代码内容为腾讯科技热点推荐图片代码（改进版），属于站长常用代码" />
<title>腾讯科技热点推荐图片代码（改进版）</title>
<link media=screen href="css/lanrentuku.css" type=text/css rel=stylesheet>
</head>
<body style="text-align:center">
<script src="js/dicengComm_pack_v1.0.1.js" type=text/javascript></script>
<script type=text/javascript>
TencentArticl.onload();
</script>
<!--热点推荐-->
<div class="mod-left bottom-Article-QQ sildPic-Article-QQ">
<div class=hd>
<h2>热点推荐</h2>
<div class=sildPicBar id=sildPicBar>
<span class=pre></span>
<ul id=dot></ul>
<span class=next></span>
</div>
</div>
<div class=bd>
<div class=cnt-wrap id=cnt-wrap>
<div class=cnt id=cnt>
<ul>
<li><A href="#" target=_blank><IMG src="images/30407468.jpg"></A>
<A class=link href="#" target=_blank>商品名</A>
</li>
<li>
<A href="#" target=_blank><IMG src="images/30407482.jpg"></A>
<A class=link href="#" target=_blank>商品名</A>
</li>
<LI><A href="#" target=_blank><IMG
src="images/30407470.jpg"></A> <A class=link
href="#" target=_blank>老人自制机器人厨师</A>
</LI>
<LI><A href="#" target=_blank><IMG
src="images/30407474.jpg"></A> <A class=link
href="#" target=_blank>百万牛羚“强渡”马拉河</A>
</LI>
<LI><A href="#" target=_blank><IMG
src="images/30339984.jpg"></A> <A class=link
href="#"
target=_blank>诺基亚N98再曝谍照</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30339561.jpg"></A> <A class=link
href="#"
target=_blank>奥林巴斯新机E-PL1图赏</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30339719.jpg"></A> <A class=link
href="#"
target=_blank>日本小熊电脑升级版</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30339381.jpg"></A> <A class=link
href="#"
target=_blank>CP+展会美女模特秀</A>
</LI>
<LI><A href="#" target=_blank><IMG
src="images/30354078.jpg"></A> <A class=link
href="#"
target=_blank>图解网购九大陷阱</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354433.jpg"></A> <A class=link
href="#"
target=_blank>当世间万物全部缩小</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30353751.jpg"></A> <A class=link
href="#" target=_blank>银色HTC
Desire亮相</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354586.jpg"></A> <A class=link
href="#"
target=_blank>超炫！十二种超酷U盘</A>
</LI>
<LI><A href="#" target=_blank><IMG
src="images/30354078.jpg"></A> <A class=link
href="#"
target=_blank>图解网购九大陷阱</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354433.jpg"></A> <A class=link
href="#"
target=_blank>当世间万物全部缩小</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30353751.jpg"></A> <A class=link
href="#" target=_blank>银色HTC
Desire亮相</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354586.jpg"></A> <A class=link
href="#"
target=_blank>超炫！十二种超酷U盘</A>
</LI>
<LI><A href="#" target=_blank><IMG
src="images/30354078.jpg"></A> <A class=link
href="#"
target=_blank>图解网购九大陷阱</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354433.jpg"></A> <A class=link
href="#"
target=_blank>当世间万物全部缩小</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30353751.jpg"></A> <A class=link
href="#" target=_blank>银色HTC
Desire亮相</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354586.jpg"></A> <A class=link
href="#"
target=_blank>超炫！十二种超酷U盘</A>
</LI>
<LI><A href="#" target=_blank><IMG
src="images/30354078.jpg"></A> <A class=link
href="#"
target=_blank>图解网购九大陷阱</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354433.jpg"></A> <A class=link
href="#"
target=_blank>当世间万物全部缩小</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30353751.jpg"></A> <A class=link
href="#" target=_blank>银色HTC
Desire亮相</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354586.jpg"></A> <A class=link
href="#"
target=_blank>超炫！十二种超酷U盘</A>
</LI>
<LI><A href="#" target=_blank><IMG
src="images/30354078.jpg"></A> <A class=link
href="#"
target=_blank>图解网购九大陷阱</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354433.jpg"></A> <A class=link
href="#"
target=_blank>当世间万物全部缩小</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30353751.jpg"></A> <A class=link
href="#" target=_blank>银色HTC
Desire亮相</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354586.jpg"></A> <A class=link
href="#"
target=_blank>超炫！十二种超酷U盘</A>
</LI>
<LI><A href="#" target=_blank><IMG
src="images/30354078.jpg"></A> <A class=link
href="#"
target=_blank>图解网购九大陷阱</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354433.jpg"></A> <A class=link
href="#"
target=_blank>当世间万物全部缩小</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30353751.jpg"></A> <A class=link
href="#" target=_blank>银色HTC
Desire亮相</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354586.jpg"></A> <A class=link
href="#"
target=_blank>超炫！十二种超酷U盘</A>
</LI>
<LI><A href="#" target=_blank><IMG
src="images/30354078.jpg"></A> <A class=link
href="#"
target=_blank>图解网购九大陷阱</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354433.jpg"></A> <A class=link
href="#"
target=_blank>当世间万物全部缩小</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30353751.jpg"></A> <A class=link
href="#" target=_blank>银色HTC
Desire亮相</A> </LI>
<LI><A href="#" target=_blank><IMG
src="images/30354586.jpg"></A> <A class=link
href="#"
target=_blank>超炫！十二种超酷U盘</A>
</LI>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(dicengComm_pack_v1.0.1.js):
var TencntART=new Object();
TencntART.Browser={
ie:/msie/.test(window.navigator.userAgent.toLowerCase()),moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),opera:/opera/.test(window.navigator.userAgent.toLowerCase()),safari:/safari/.test(window.navigator.userAgent.toLowerCase())}
;
TencntART.JsLoader={
load:function(sUrl,fCallback){
var _script=document.createElement('script');
_script.setAttribute('charset','gb2312');
_script.setAttribute('type','text/javascript');
_script.setAttribute('src',sUrl);
document.getElementsByTagName('head')[0].appendChild(_script);
if(TencntART.Browser.ie){
_script.onreadystatechange=function(){
if(this.readyState=='loaded'||this.readyStaate=='complete'){
fCallback();
}
}
;
}
else if(TencntART.Browser.moz){
_script.onload=function(){
fCallback();
}
;
}
else{
fCallback();
}
}
}
;
var TencentArticl=new Object();
TencentArticl={
$:function(v){
return document.getElementById(v)}
,getEles:function(id,ele){
return this.$(id).getElementsByTagName(ele);
// return document.getElementById(id).getElementsByTagName(ele);
}
,tabId:"sildPicBar",tabDot:"dot",tabBox:"cnt-wrap",tabSilder:"cnt",tabSilderSon:"li",comtList:"ComList",rightBorder:"silidBarBorder",Count:function(){
return this.getEles(this.tabSilder,this.tabSilderSon).length}
,Now:0,pagenum:12,isCmt:true,isSild:true,timer:null,site:'news',cmtId:'21572303',cmtBase:'comment5',sideTab:{
heads:'tabTit',heads_ele:'span',bodys:'tabBody',bodys_ele:'ol'}
,SildTab:function(now){
this.Now=Number(now);
if(this.Now>Math.ceil(this.Count()/this.pagenum)-1){
this.Now=0;
}
else if(this.Now<0){
this.Now=Math.ceil(this.Count()/this.pagenum)-1;
}
if(parseInt(this.$(this.tabSilder).style.left)>-156*parseInt(this.Now*4)){
this.moveR();
}
else{
this.moveL();
}
for(var i=0;
i<Math.ceil(this.Count()/this.pagenum);
i++){
if(i==this.Now){
this.getEles(this.tabId,"li")[this.Now].className="select";
}
else{
this.getEles(this.tabId,"li")[i].className="";
}
}
}
,moveR:function(setp){
var _curLeft=parseInt(this.$(this.tabSilder).style.left);
var _distance=50;
if(_curLeft>-156*parseInt(this.Now*4)){
this.$(this.tabSilder).style.left=(_curLeft-_distance)+26+"px";
window.setTimeout("TencentArticl.moveR()",1);
}
}
,moveL:function(setp){
var _curLeft=parseInt(this.$(this.tabSilder).style.left);
var _distance=50;
if(_curLeft<-156*parseInt(this.Now*4)){
this.$(this.tabSilder).style.left=(_curLeft+_distance)-26+"px";
window.setTimeout("TencentArticl.moveL()",1);
}
}
,pagePe:function(way){
if(way=="next"){
this.Now+=1;
this.SildTab(this.Now);
}
else{
this.Now-=1;
this.SildTab(this.Now);
}
}
,smallCk:function(){
for(var i=0;
i<Math.ceil(this.Count()/this.pagenum);
i++){
if(i==0){
this.$(this.tabDot).innerHTML+="<li class='select' onclick='TencentArticl.SildTab("+i+")'></li>";
}
else{
this.$(this.tabDot).innerHTML+="<li onclick='TencentArticl.SildTab("+i+")'></li>";
}
}
}
,TabChang:function(){
var eles=this.getEles(this.sideTab.heads,this.sideTab.heads_ele);
var body=this.getEles(this.sideTab.bodys,this.sideTab.bodys_ele);
for(var i=0;
i<eles.length;
i++){
(function(){
var p=i;
eles[p].onmouseover=function(){
TencentArticl._TabChang(p,body,eles);
}
}
)();
}
}
,_TabChang:function(n,body,obj){
for(var i=0;
i<body.length;
i++){
if(i==n){
body[n].className="block";
obj[n].className="select";
}
else{
body[i].className="none";
obj[i].className="";
}
}
}
,ComList:function(){
/*TencntART.JsLoader.load('http://sum.comment.gtimg.com.cn/php_qqcom/gsum.php?site='+TencentArticl.site+'&c_id='+TencentArticl.cmtId+'',function(){
setTimeout(SildTab(1),0);
}
);
*/
// setTimeout(TencentArticl.pagePe("next"),0);
// TencentArticl.pagePe("next");
}
,setFont:function(n){
this.$("Cnt-Main-Article-QQ").style.fontSize=n+"px";
}
,onload:function(){
/** �����FireFox�����**/
if(TencntART.Browser.moz){
document.addEventListener("DOMContentLoaded",function(){
TencentArticl.ints();
setInterval("TencentArticl.pagePe('next')",2000);
}
,null);
}
else{
if(document.readyState=="complete"){
TencentArticl.ints();
setInterval("TencentArticl.pagePe('next')",2000);
}
else{
document.onreadystatechange=function(){
if(document.readyState=="complete"){
TencentArticl.ints();
setInterval("TencentArticl.pagePe('next')",2000);
}
}
}
}
}
,ints:function(){
if(this.isSild){
this.$(this.tabBox).style.position="relative";
this.$(this.tabSilder).style.position="absolute";
this.$(this.tabSilder).style.left=0+"px";
this.getEles(this.tabId,"span")[1].onclick=function(){
TencentArticl.pagePe("next");
}
this.getEles(this.tabId,"span")[0].onclick=function(){
TencentArticl.pagePe("pre");
}
this.smallCk();
}
if(this.isCmt){
this.ComList();
}
}
}
Object.beget=function(o){
var F=function(){
}
;
F.prototype=o;
return new F();
}
CSS代码(lanrentuku.css):
UL{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px}
UL{LIST-STYLE-TYPE:none}
BODY{BACKGROUND:#fff;FONT:12px/1.75 "����",arial,sans-serif;COLOR:#000}
A:link{COLOR:#0b3b8c;TEXT-DECORATION:none}
A:visited{COLOR:#0b3b8c;TEXT-DECORATION:none}
A:hover{COLOR:#0b3b8c;TEXT-DECORATION:underline}
A:active{COLOR:#0b3b8c;TEXT-DECORATION:underline}
.mod-left{BORDER-RIGHT:#d8d8d8 1px solid;BORDER-TOP:#d8d8d8 1px solid;MARGIN-BOTTOM:8px;BORDER-LEFT:#d8d8d8 1px solid;WIDTH:648px;BORDER-BOTTOM:#d8d8d8 1px solid}
.mod-left H2{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;COLOR:#1c2c58}
.sildPic-Article-QQ .cnt A:visited{COLOR:#0b3b8c}
.bottom-Article-QQ .hd{BACKGROUND:#fafafa;WIDTH:100%;LINE-HEIGHT:28px;BORDER-BOTTOM:#d8d8d8 1px solid;HEIGHT:28px}
.bottom-Article-QQ H2{FONT-SIZE:14px;TEXT-INDENT:17px}
.bottom-Article-QQ .bd{PADDING-LEFT:22px;PADDING-BOTTOM:10px;WIDTH:626px;PADDING-TOP:10px}
.bottom-Article-QQ LI{FLOAT:left;WIDTH:156px;LINE-HEIGHT:21px;TEXT-ALIGN:left}
.bottom-Article-QQ .haveTab{OVERFLOW:visible;POSITION:relative}
.bottom-Article-QQ .haveTab H2#h2One{BORDER-RIGHT:#d8d8d8 1px solid;PADDING-RIGHT:20px;LEFT:0px;CURSOR:pointer;POSITION:absolute;TOP:0px}
.bottom-Article-QQ .haveTab H2#h2Tow{BORDER-RIGHT:#d8d8d8 1px solid;PADDING-RIGHT:20px;LEFT:94px;CURSOR:pointer;POSITION:absolute;TOP:0px}
.bottom-Article-QQ .haveTab .select{BACKGROUND:#fff;BORDER-BOTTOM:#fff 1px solid}
.bottom-Article-QQ .block{DISPLAY:block}
.bottom-Article-QQ .none{DISPLAY:none}
.sildPic-Article-QQ H2{FLOAT:left}
.sildPic-Article-QQ .hd{BACKGROUND:#fafcff}
.sildPic-Article-QQ .bd{BACKGROUND:#fafcff}
.sildPic-Article-QQ .sildPicBar{DISPLAY:inline;FLOAT:right;OVERFLOW:hidden;WIDTH:86px;MARGIN-RIGHT:18px;PADDING-TOP:6px;ZOOM:1;HEIGHT:22px}
.sildPic-Article-QQ .pre{DISPLAY:inline;BACKGROUND:url(../images/xixi.png) no-repeat -151px -60px;FLOAT:left;WIDTH:20px;CURSOR:pointer;MARGIN-RIGHT:8px;HEIGHT:15px}
.sildPic-Article-QQ .next{BACKGROUND:url(../images/xixi.png) no-repeat -151px -131px;FLOAT:right;WIDTH:20px;CURSOR:pointer;HEIGHT:15px}
.sildPic-Article-QQ .sildPicBar LI{MARGIN-TOP:5px;DISPLAY:inline;BACKGROUND:url(../images/xixi.png) no-repeat -165px -112px;FLOAT:left;MARGIN-LEFT:3px;WIDTH:6px;CURSOR:pointer;HEIGHT:6px}
.sildPic-Article-QQ .sildPicBar LI.select{BACKGROUND:url(../images/xixi.png) no-repeat -165px -86px}
.sildPic-Article-QQ .bd{PADDING-LEFT:19px;BACKGROUND:#fafcff;PADDING-BOTTOM:0px;WIDTH:629px;PADDING-TOP:5px}
.sildPic-Article-QQ .cnt-wrap{/*OVERFLOW:hidden;WIDTH:624px;ZOOM:1;HEIGHT:162px*/
OVERFLOW:hidden;WIDTH:624px;ZOOM:1;HEIGHT:400px}
.sildPic-Article-QQ .cnt{WIDTH:1872px}
.sildPic-Article-QQ LI{FLOAT:left;WIDTH:156px}
.sildPic-Article-QQ .cnt SPAN{WIDTH:100%;COLOR:#7e7e7e;TEXT-ALIGN:left}
.sildPic-Article-QQ .cnt IMG{BORDER-RIGHT:#ccc 1px solid;BORDER-TOP:#ccc 1px solid;BORDER-LEFT:#ccc 1px solid;BORDER-BOTTOM:#ccc 1px solid}
.sildPic-Article-QQ .cnt .link{DISPLAY:block;MARGIN-LEFT:0px;WIDTH:140px;TEXT-ALIGN:center}
.sildPic-Article-QQ .cnt SPAN A{COLOR:#7e7e7e}
.sildPic-Article-QQ .cnt SPAN A:visited{COLOR:#7e7e7e}
分享到QQ
分享到微博
微信扫一扫
