js 完美图片新闻轮转效果，腾讯大粤网首页图片轮转改造

150 阅读 0 评论 99 点赞

我是靠谱客的博主长情枕头，最近开发中收集的这篇文章主要介绍js 完美图片新闻轮转效果，腾讯大粤网首页图片轮转改造，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

背景
我所想要的完美图片新闻轮转效果：
1.有新闻图片，有新闻标题，有轮转索引
2.鼠标未移到索引上，图片自动切换
3.鼠标移到索引上，显示现有图片，轮询停止
4.鼠标移开索引，轮询继续
5.简洁明了，轻量级（不依赖第三方任何文件，最好是原生js）

过程
找过很多图片轮询效果，和我的要求总是有些出入，不能十全十美。不是功能不全，就是太多花哨。本想自己开发一个，鉴于琐事拖延，迟迟未能开始。
偶尔看到腾讯大粤网的图片新闻，感觉就是我所想要的效果。但仔细试验，发现其不符合要求3。即没有轮询停止机制。想想还是自己改造一下，就和自己的要求差不多了。
思路：页面加载，图片开始轮询。鼠标移到索引，显示相关图片，清除轮询。鼠标移开索引，恢复轮询。
定义一个全局的变量id，来记录当前激活的图片索引id。每次轮转时，更新这个id。鼠标移开索引后，用这个id开始轮询。

复制代码代码如下:

<html> 
<head> 
<link href="http://news.qq.com/base2011/css/qq.css" rel="stylesheet" type="text/css"> 
<style> 
.turn 
{ 
height: 212px; 
float: left; 
overflow: hidden; 
position: relative; 
} 
.turn #adpica 
{ 
width: 382px; 
height: 210px; 
overflow: hidden; 
} 
.turn #adpica img 
{ 
width: 380px; 
height: 210px; 
float: left; 
overflow: hidden; 
} 
.turn #adtipa 
{ 
height: 16px; 
position: absolute; 
right: 8px; 
bottom: 8px; 
} 
.turn #adtipa ul li 
{ 
width: 19px; 
height: 19px; 
line-height: 19px; 
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; 
height: 33px; 
width: 380px; 
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; 
height: 33px; 
line-height: 33px; 
width: 285px; 
padding-left: 5px; 
font-weight: bold; 
} 
</style> 
</head> 
<body> 
<div class="focus"> 
<!--focus--> 
<div class="turn"> 
<div id="adpica"> 
<div class="show"> 
<a href="/a/20111119/000002.htm"> 
<img width="380" height="210" src="http://www.uoften.com/uploadfile/2018/0411/20180411124720106.jpg"></a><span>焦点图文字背景</span><p 
href="/a/20111119/000002.htm"> 
广州花都拆违遭遇碎瓶煤气罐</p> 
<!--[if !IE]>|xGv00|9f7171a0d436636945e9c21690c2ece8<![endif]--> 
</div> 
<div style="display: none;" class="hidden"> 
<a href="/a/20111119/000028.htm"> 
<img width="380" height="210" src="http://www.uoften.com/uploadfile/2018/0411/20180411124720799.jpg"></a><span>焦点图文字背景</span><p 
href="/a/20111119/000028.htm"> 
一颗“钉子”放弃工作保祖屋5年</p> 
<!--[if !IE]>|xGv00|d23979cbd54ef39a84fe343a81550dff<![endif]--> 
</div> 
<div class="hidden" style="display: none;"> 
<a href="/a/20111117/000250.htm"> 
<img width="380" height="210" src="http://www.uoften.com/uploadfile/2018/0411/20180411124721253.jpg"></a><span>焦点图文字背景</span><p 
href="/a/20111117/000250.htm"> 
爸爸，不要把我丢下</p> 
<!--[if !IE]>|xGv00|93b927379aeaca72b86d66dbb2e57614<![endif]--> 
</div> 
<div class="hidden" style="display: none;"> 
<a href="/a/20111119/000004.htm"> 
<img width="380" height="210" src="http://www.uoften.com/uploadfile/2018/0411/20180411124721845.jpg"></a><span>焦点图文字背景</span><p 
href="/a/20111119/000004.htm"> 
杨幂最新杂志写真 魅惑优雅</p> 
<!--[if !IE]>|xGv00|ca04e9980d08c91f55db9ea4ee64489c<![endif]--> 
</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> 
<!--[if !IE]>|xGv00|495624c0694083cdfaabbc0457f4f14e<![endif]--> 
<!--/focus--> 
</div> 
</body> 
</html>