原生JS实现图片轮播 JS实现小广告插件

这篇文章主要为大家详细介绍了原生JS实现图片轮播、小广告插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近想用原生JS多实现一些小功能，现在写到博客里，大家可以借鉴，有问题欢迎指出。

轮播图

需求：

图片循环轮播，可点击左右切换，切换状态与

绑定，鼠标移入图片悬停，鼠标移出图片继续循环切换。

   原生js轮播图片

js代码，使用时记得在html里引入JS。

 var container = document.getElementById("container"); var content = document.getElementById("content"); var slider = document.getElementById("slider"); var img = document.getElementById("img"); var ul = document.getElementById("ul"); var li = document.getElementsByTagName("li"); var left = document.getElementById("left"); var right = document.getElementById("right"); var num = 0; var timer = null; var picList = ["./img/88.jpg-600","./img/are.jpg-600","./img/family.jpg-600","./img/one.jpg-600"]; //将li与list下标对应 //设置展示图片的方法，展示时，li的圆点与图片绑定在一起 ShowPicture = function() { img.src = picList[num]; for(var i = 0 ; i = picList.length) {   //3 num = 0; } ShowPicture(); } //实现点击圆点跳转对应图片，将li与list下标对应list.index=li.index for(var i = 0; i  { num++; num %= picList.length; ShowPicture(); }, 3000); return timer; } window.onload = autoChange; //事件 img.onmouseover = function() { clearInterval(timer); } img.onmouseleave = autoChange;

广告插件

需求：页面加载结束后弹出广告，广告轮播展示，鼠标移入悬停，移出继续展示，点X可删除。

   //我这是练习，叉号用的X替代，自己做项目加入时可以换成Icon

 //页面加载结束弹出广告，广告切换展示，点击X可删除, var ad = document.getElementById('win'); var img = document.getElementById('img'); var ad_btn  = document.getElementById('ad_btn'); var timer; window.onload = function () { // clearInterval(timer); timer = setTimeout(() => { ad.style.display = 'block'; }, 2000); change(); } var count=0; var num = 0; var imgTimer = null; //picture srcList var picList = ['../img/88.jpg-600','../img/one.jpg-600','../img/family.jpg-600','../img/are.jpg-600']; function change() { clearInterval(imgTimer) imgTimer = setInterval(() => { if(count === picList.length) { count = 0; resetShow(); } else { startShow(); } count++; }, 3000); } function resetShow() { img.src = picList[0]; num = 0; startShow(); } function startShow() { if(num { ad.style.display = 'none'; clearTimeout(timer) }); ad.addEventListener('mouseover' , ()=>{ clearInterval(imgTimer); }) ad.onmouseleave = function() { change(); }

实现展示：