javascript仿QQ网站新闻图片轮换效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<link href="http://news.***qq.com/base2011/<a%20href=" http: target="_blank">css/qq.css" rel="stylesheet" type="text/css"> 
<style> 
.turn 
{ 
 
float: left; 
overflow: hidden; 
position: relative; 
} 
.turn #adpica 
{ 
 
 
overflow: hidden; 
} 
.turn #adpica img 
{ 
 
 
float: left; 
overflow: hidden; 
} 
.turn #adtipa 
{ 
 
position: absolute; 
right: 8px; 
bottom: 8px; 
} 
.turn #adtipa ul li 
{ 
 
 
line- 
float: left; 
text-align: center; 
display: inline; 
margin: 0 1px; 
cursor: pointer; 
color: #fff; 
background: #000; 
} 
.turn #adtipa ul li.current 
{ 
color: #fff; 
background: #cc0000; 
} 
.turn .hidden 
{ 
display: none; 
} 
.turn .show 
{ 
display: block !important; 
} 
#adpica span 
{ 
position: absolute; 
bottom: 0; 
left: 0; 
color: #fff; 
font-size: 14px; 
 
 
filter: alpha(opacity=70); 
opacity: 0.7; 
background: #000; 
text-indent: -9999em; 
} 
#adpica p 
{ 
position: absolute; 
bottom: 0; 
left: 0; 
color: #fff; 
font-size: 14px; 
 
line- 
 
padding-left: 5px; 
font-weight: bold; 
} 
</style> 
 
 
<div class="focus"> 
 
<div class="turn"> 
<div id="adpica"> 
<div class="show"> 
<a href="/a/20111119/000002.htm"> 
<img width="380" height="210" src="https://img.111cn.net/uploads/20220923/img_632d8a075b8a330.jpg"></a><span>焦点图文字背景</span><p href="/a/20111119/000002.htm"> 
广州花都拆违遭遇碎瓶煤气罐</p> 
 
</div> 
<div style="display: none;" class="hidden"> 
<a href="/a/20111119/000028.htm"> 
<img width="380" height="210" src="https://img.111cn.net/uploads/20220923/img_632d8a07c91ec31.jpg"></a><span>焦点图文字背景</span><p href="/a/20111119/000028.htm"> 
一颗“钉子”放弃工作保祖屋5年</p> 
 
</div> 
<div class="hidden" style="display: none;"> 
<a href="/a/20111117/000250.htm"> 
<img width="380" height="210" src="https://img.111cn.net/uploads/20220923/img_632d8a080919232.jpg"></a><span>焦点图文字背景</span><p href="/a/20111117/000250.htm"> 
爸爸，不要把我丢下</p> 
 
</div> 
<div class="hidden" style="display: none;"> 
<a href="/a/20111119/000004.htm"> 
<img width="380" height="210" src="https://img.111cn.net/uploads/20220923/img_632d8a083d09133.jpg"></a><span>焦点图文字背景</span><p href="/a/20111119/000004.htm"> 
杨幂最新杂志写真 魅惑优雅</p> 
 
</div> 
</div> 
<div id="adtipa"> 
<ul onmouseout="change()"> 
<li class="current" onmouseover="adchangea(1)">1 </li> 
<li class="" onmouseover="adchangea(2)">2 </li> 
<li class="" onmouseover="adchangea(3)">3 </li> 
<li class="" onmouseover="adchangea(4)">4</li>
</ul> 
</div> 
<script> 
//鼠标移过来的动作。显示当前图片，清除轮询。 
function adchangea(adid) { 
dochange(adid); 
clearTimeout(adisround); 
} 
//自动轮询 
function adchangea2(adid) { 
dochange(adid); 
var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); 
if ((adnext = adid + 1) > adbigimg.length) adnext = 1; 
adisround = setTimeout('adchangea2(' + adnext + ')', 3000); 
} 
//显示当前图片 
function dochange(adid) { 
id = adid; 
var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); 
var adsmallimg = document.getElementById("adtipa").getElementsByTagName("li"); 
for (var adi = 0; adi < adbigimg.length; adi++) { 
adbigimg[adi].className = "hidden"; 
adsmallimg[adi].className = ""; 
} 
adbigimg[adid - 1].className = "show"; 
adsmallimg[adid - 1].className = "current"; 
} 
var adisround = setTimeout("adchangea2(2)", 3000); 
var id;//当前激活id 
//鼠标移开ul块时，恢复轮询 
function change() { 
adchangea2(id); 
} 
</script> 
</div> 
 
 
</div>

提示：您可以先修改部分代码再运行

相关文章

精彩推荐