用javascript实现网站首页轮播图效果
2016-04-19 10:37
731 查看
<pre name="code" class="html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0; padding:0; list-style:none;} .wrap{height:170px; width:490px; margin:60px auto; overflow: hidden; position: relative; margin:100px auto;} .wrap ul{position:absolute;} .wrap ul li{height:170px;} .wrap ol{position:absolute; right:5px; bottom:10px;} .wrap ol li{height:20px; width: 20px; background:#ccc; border:solid 1px #666; margin-left:5px; color:#000; float:left; line-height:center; text-align:center; cursor:pointer;} .wrap ol .on{background:#E97305; color:#fff;} </style> <script type="text/javascript"> window.onload=function(){ var wrap=document.getElementById('wrap'), pic=document.getElementById('pic'), list=document.getElementById('list').getElementsByTagName('li'), index=0, timer=null; // 定义并调用自动播放函数 function auto(){ timer=setInterval(function(){ index++; if(index>=list.length){ index=0; } change(index); },2000); } auto(); // 定义图片切换函数 function change(curIndex){ pic.style.marginTop=-170*curIndex+"px"; for(var j=0;j<list.length;j++){ list[j].className=""; } list[curIndex].className="on"; index=curIndex; } // 鼠标划过整个容器时停止自动播放 wrap.onmouseover=function(){ clearInterval(timer); } // 鼠标离开整个容器时继续播放至下一张 wrap.onmouseout=auto; // 遍历所有数字导航实现划过切换至对应的图片 for(var i=0;i<list.length;i++){ list[i].id=i; list[i].onmouseover=function(){ change(this.id); } } } </script> </head> <body> <div class="wrap" id='wrap'> <ul id="pic"> <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li> </ul> <ol id="list"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>
相关文章推荐
- HDFS高可用
- 4月上旬国内网站流量统计5强:火狐中文网上榜排第四
- 图标资源网站
- Hadoop 架构
- 大型网站架构之分布式消息队列
- 一个用PHP写的网站,当两个人同时用一个账号登录时,后一个会将前一个账号挤下线。
- Android架构知识
- 电脑手机微网站三站合一对企业有哪些优势?
- 最强大经典的php企业网站源码模板,一键安装就可以使用
- 网站测试之一压力测试
- 阅读源码需要注意什么问题,有什么好的源码下载网站
- 乌克兰学生在Tor网站上贩卖硬性毒…
- 比特币交易网站
- R3架构师:并不是只有完全开放和完…
- 估值近200亿美元的短租网站或将利…
- 所有商务网站都应该接受比特币吗?
- 前端网站
- WEB网站常见的受攻击方式及预防手段
- 理解RESTful架构
- 架构验证过程发现非数据类型错误 validation found non-data type errors