| 超简单全面的html图片自动轮播 | 您所在的位置：网站首页 › css滚动图片怎么设置 › 超简单全面的html图片自动轮播 |
超简单全面的html图片自动轮播
|
超简单全面的html图片自动轮播
废话不多说，直接上代码 html部分
css部分
这里为了美观多加了点装饰 #max{ width: 900px; height: 500px; align-items: center; margin: 5% auto; margin-top: 0%; } .re{ position: relative; height: 400px; } .re ul{ list-style-type:none ; } .re ul>li{ width: 600px; height: 300px; position: absolute; transition: 1s; opacity: 0; } .re ul>li img{ width: 900px; height: 500px; border-radius: 10%; border: 15px solid #fffbd6; } #max ol { position: relative; display: grid; grid-template-columns: repeat(5,75px); grid-template-rows: auto; grid-gap: 1em;gap: 1em; float: right; margin-top: 450px; list-style: none; top:0;left:0; } #max ol li { width: 25px; height: 10px; font-size: 15px; line-height: 20px; float: left; text-align: center; border-radius: 2em; border: 5px solid #999999; } js部分 window.onload = function(){ var box=this.document.getElementsByClassName("re")[0]; var lik=box.getElementsByTagName("li"); function fun(i,j){//转换图片函数，就是把透明度改了一下 lik[i].style.opacity=1; lik[j].style.opacity=0; lik[i+5].style.backgroundColor="#ffffff";//改一下小图标 lik[j+5].style.backgroundColor="#00000000" } fun(0,1);//初始化下 var i =0; function auto(){//轮播循环函数 if(++i>=5){ i=0; fun(0,4); } else fun(i,i-1); } timer=this.setInterval(auto,2000); box.onmouseover = function () { //鼠标划上去，停止轮播 console.log('good'); clearInterval(timer); } box.onmouseout = function () { //鼠标划出，继续轮播 timer = setInterval(auto, 2000); //调用定时器 } var j =0; for(;j fun(this.ind,i) i=this.ind; } } } 效果
|
可以自动轮播，鼠标划上去停止轮播，点小图标切换，该有的都有。 想要吗？复制粘贴带走吧。。。【本文地址】
公司简介
联系我们