简单的幻灯效果
2015-06-15 10:26
302 查看
<body>
<style>
#test {width: 270px; height: 130px; overflow: hidden; border: 1px solid #333;}
#test a {display: block; width: 270px; height: 130px; text-align: center; background: #fff;}
#test a img {border: none;}
</style>
<div id="test">
<a href="#"><img src="http://proxy.xgres.com/thumbImg.php?w=150&h=110&u=http://u.img.huxiu.com/portal/201310/15/211243x02mqdqb31ubfmmm.png"
/></a>
<a href="#"><img src="http://proxy.xgres.com/thumbImg.php?w=150&h=110&u=http://img1.gtimg.com/news/pics/hv1/63/109/1439/93598833.jpg"
/></a>
<a href="#"><img src="http://proxy.xgres.com/thumbImg.php?w=150&h=110&u=http://a.36krcnd.com/photo/4c9bbc5bc8ecfaddb067d313edcd976e.jpg"
/></a>
</div>
<script language="javascript">
i=0;
function show() {
l=document.getElementsByTagName_r('a');
if (i<l.length-1){
l[i].style.display = "none";
i++;
}else {
for(a=0;a<l.length-1;a++){
l[a].style.display = "block";
i=0;
}
}
}
setInterval(show, 1000);
</script>
</body>
<style>
#test {width: 270px; height: 130px; overflow: hidden; border: 1px solid #333;}
#test a {display: block; width: 270px; height: 130px; text-align: center; background: #fff;}
#test a img {border: none;}
</style>
<div id="test">
<a href="#"><img src="http://proxy.xgres.com/thumbImg.php?w=150&h=110&u=http://u.img.huxiu.com/portal/201310/15/211243x02mqdqb31ubfmmm.png"
/></a>
<a href="#"><img src="http://proxy.xgres.com/thumbImg.php?w=150&h=110&u=http://img1.gtimg.com/news/pics/hv1/63/109/1439/93598833.jpg"
/></a>
<a href="#"><img src="http://proxy.xgres.com/thumbImg.php?w=150&h=110&u=http://a.36krcnd.com/photo/4c9bbc5bc8ecfaddb067d313edcd976e.jpg"
/></a>
</div>
<script language="javascript">
i=0;
function show() {
l=document.getElementsByTagName_r('a');
if (i<l.length-1){
l[i].style.display = "none";
i++;
}else {
for(a=0;a<l.length-1;a++){
l[a].style.display = "block";
i=0;
}
}
}
setInterval(show, 1000);
</script>
</body>
相关文章推荐
- --@ui-router--登录页通过路由跳转到内页的demo
- 搜狐面试- Android事件分发机制完全解析,带你从源码的角度彻底理解(上)
- 划分一个整形数组,把负数放在左边,零放在中间,正数放在右边
- jq禁止文本内容复制粘贴
- linux svn服务器搭建、客户端操作、备份与恢复
- 算法常用公式总结
- 内存映射
- 互联网人如何拓展自己的人脉
- swift1 > start
- linux svn服务器搭建、客户端操作、备份与恢复
- 【Java】ArraytList [2]
- n a^o7 !
- matlab代码到C++代码转化及使用全攻略
- SVN提交代码需要注意的地方
- Swoole 高性能网络通信框架
- jquery $.each遍历json数组方法
- Python代码缩进
- 全球六大国际域名解析量统计报告(6月11日)
- Sublime Test 解决 报please wait a bit while pyV8 binary 错误
- mmap()内存分配函数