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


Posted in Javascript onNovember 21, 2011

背景
我所想要的完美图片新闻轮转效果:
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://img1.gtimg.com/gd/pics/hv1/11/6/909/59109266.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://img1.gtimg.com/gd/pics/hv1/205/26/909/59114560.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://img1.gtimg.com/gd/pics/hv1/68/53/908/59056283.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://img1.gtimg.com/gd/pics/hv1/243/9/909/59110263.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>
Javascript 相关文章推荐
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
javascript操作referer详细解析
Mar 10 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
页面调用单个swf文件,嵌套出多个方法。
Nov 21 #Javascript
javascript中xml操作实现代码
Nov 21 #Javascript
js调用activeX获取u盘序列号的代码
Nov 21 #Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 #Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 #Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 #Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 #Javascript
You might like
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
你准备好迎接vue3.0了吗
2020/04/28 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
pip install命令安装扩展库整理
2021/03/02 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
实习自荐信
2013/10/13 职场文书
团日活动策划书
2014/02/01 职场文书
海飞丝广告词
2014/03/20 职场文书
开学典礼策划方案
2014/05/28 职场文书
房屋转让协议书
2014/10/18 职场文书
2014年医生工作总结
2014/11/21 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书