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 模式设计之工厂模式详细说明
May 10 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
页面调用单个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
mysql 性能的检查和优化方法
2009/06/21 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP实现货币换算的方法
2014/11/29 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
银行求职推荐信范文
2013/11/30 职场文书
公司前台接待岗位职责
2013/12/03 职场文书
英文自荐信
2013/12/15 职场文书
无故旷工检讨书
2014/01/26 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
机关搬迁方案
2014/05/18 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
补充协议书
2015/01/28 职场文书
苏州园林导游词
2015/02/03 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
亮剑观后感600字
2015/06/05 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
分享3个非常实用的 Python 模块
2022/03/03 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS