原生js实现图片轮播特效
原生js实现图片轮播特效
发布时间:2016-12-30 来源:查字典编辑
摘要:本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习。运行效果图:具体代码:最简单的轮播广告body,div...

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习。

运行效果图:

原生js实现图片轮播特效1

具体代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0; } ul { list-style-type: none; } body { background: #000; text-align: center; font: 12px/20px Arial; } #box { position: relative; width: 492px; height: 172px; background: #fff; border-radius: 5px; border: 8px solid #fff; margin: 10px auto; } #box .list { position: relative; width: 490px; height: 170px; overflow: hidden; border: 1px solid #ccc; } #box .list li { position: absolute; top: 0; left: 0; width: 490px; height: 170px; opacity: 0; transition: opacity 0.5s linear } #box .list li.current { opacity: 1; } #box .count { position: absolute; right: 0; bottom: 5px; } #box .count li { color: #fff; float: left; width: 20px; height: 20px; cursor: pointer; margin-right: 5px; overflow: hidden; background: #F90; opacity: 0.7; border-radius: 20px; } #box .count li.current { color: #fff; opacity: 0.7; font-weight: 700; background: #f60 } </style> </head> <body> <div id="box"> <ul> <li><img src="img/images04/01.jpg" width="490" height="170"></li> <li><img src="img/images04/02.jpg" width="490" height="170"></li> <li><img src="img/images04/03.jpg" width="490" height="170"></li> <li><img src="img/images04/04.jpg" width="490" height="170"></li> <li><img src="img/images04/05.jpg" width="490" height="170"></li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script> var box=document.getElementById('box'); var uls=document.getElementsByTagName('ul'); var imgs=uls[0].getElementsByTagName('li'); var btn=uls[1].getElementsByTagName('li'); var i=index=0; //中间量,统一声明; var play=null; console.log(box,uls,imgs,btn);//获取正确 //图片切换, 淡入淡出效果我是用(transition: opacity 0.8s linear)做的,不纠结、简单 在css里面 function show(a){ //方法定义的是当传入一个下标时,按钮和图片做出对的反应 for(i=0;i<btn.length;i++ ){ btn[i].className=''; //很容易看懂吧?每个按钮都先设置成看不见,然后把当前按钮设置成可见。 btn[a].className='current'; } for(i=0;i<imgs.length;i++){ //把图片的效果设置和按钮相同 imgs[i].style.opacity=0; imgs[a].style.opacity=1; } } //切换按钮功能,响应对应图片 for(i=0;i<btn.length;i++){ btn[i].index=i; //不知道你有没有发现,循环里的方法去调用循环里的变量体i,会出现调到的不是i的变动值的问题。所以我先在循环外保存住 btn[i].onmouseover=function(){ show(this.index); clearInterval(play); //这就是最后那句话追加的功能 } } //自动轮播方法 function autoPlay(){ play=setInterval(function(){ //这个paly是为了保存定时器的,变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了 index++; index>=imgs.length&&(index=0);//可能有优先级问题,所以用了括号,没时间测试了。 show(index); },1000) } autoPlay();//马上调用,我试过用window.onload调用这个方法,但是调用之后影响到了其他方法,使用autoPlay所以只能这样调用了 //div的鼠标移入移出事件 box.onmouseover=function(){ clearInterval(play); }; box.onmouseout=function(){ autoPlay(); }; //按钮下标也要加上相同的鼠标事件,不然图片停止了,定时器没停,会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。 </script> </body> </html>

希望本文所述对大家学习javascript程序设计有所帮助。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类