原生javascript实现图片自动轮播和点击轮播代码
2016-08-23 09:56
921 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*重置样式*/ *{margin: 0;padding: 0; list-style: none;} /*wrap的轮播图和切换按钮样式*/ .wrap{height: 170px;width: 500px;margin: 100px auto; overflow: hidden;position: relative;} .wrap ul{position: absolute;} .wrap ul li{height: 170px;} .wrap ol{position: absolute;right: 10px;bottom: 10px;} .wrap ol li{height: 20px;width: 20px; background-color:#fff;border: 1px solid #eee; margin-left: 10px;float:left; line-height: 20px; text-align: center;} .wrap ol li.active{background-color: #330099; color: #fff; border: 2px solid green;} </style> </head> <body> <!-- wrap包裹录播的图片以及可点击跳转的按钮 --> <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="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> </div> <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; // 定义并调用自动播放函数 if(timer){ clearInterval(timer); timer=null; } timer=setInterval(autoplay,2000); // 定义图片切换函数 function autoplay(){ index++; if(index>=list.length){ index=0; } changeoptions(index); } // 鼠标划过整个容器时停止自动播放 wrap.onmouseover=function(){ clearInterval(timer); } // 鼠标离开整个容器时继续播放至下一张 wrap.onmouseout=function(){ timer=setInterval(autoplay,2000); } // 遍历所有数字导航实现划过切换至对应的图片 for(var i=0;i<list.length;i++){ list[i].id=i; list[i].onmouseover=function(){ clearInterval(timer); changeoptions(this.id); } } function changeoptions(curindex){ for(var j=0;j<list.length;j++){ list[j].className=''; pic.style.top=0; } list[curindex].className='active'; pic.style.top=-curindex*170+'px'; index=curindex; } } </script> </body> </html>
相关文章推荐
- 原生javascript实现图片自动轮播和点击轮播代码
- 原生javascript实现图片轮播效果代码
- 纯原生javascript实现图片轮播切换效果代码。
- javascript实现图片循环渐显播放的代码(图片轮播)
- javaScript图片滚动轮播,图片下小圆点+两边箭头点击自动关联!
- JavaScript实现简单的图片轮播(通过点击数字切换)
- JavaScript仿商城实现图片广告轮播实例代码
- CSS3 animation实现图片轮播效果 自动显示 无需使用js 含代码(图片轮播效果一)
- javascript 实现图片轮播和点击切换功能
- JS原生代码实现图片轮播无缝切换的一种思路
- 基于javascript代码实现通过点击图片显示原图片
- 原生js+css3实现图片自动切换,图片轮播
- Android自定义View实现自动无限轮播,点击图片进入详情页
- js实现自动图片轮播代码
- JavaScript实现图片轮播组件代码示例
- javaScript实现图片滚动及一个普通图片轮播的代码
- javascript 超简单代码实现图片轮播功能
- 原生javascript实现图片轮播效果
- javascript实现图片自动和可控的轮播切换特效