首页
> 计算机技术
> 前端开发
> JavaScript
JavaScript配合CSS实现图片轮播
原创 lihf8515 2025年02月07日 10:47
来源:本站 阅读:444
写这篇小短文的目的是因为开发过程中会使用到图片定时轮播功能,这个功能虽然不是每个网站必需的,但是有了它,可以给您的网站增色不少。具体使用到JavaScript和CSS,原理并不复杂,所以我就直接上代码了。1、CSS样式表文件内容.all{width:100%;height:340px;border:1pxsolid#ccc;margin:10pxauto;padding:7px;position:relative;}.screen{width:100%;height:100%;overflow:hidden;position:relative;}.screenli{width:16.666666666%;height:340px;max-width:100%;max-height:100%;overflow:hidden;float:left;}.screenul{position:absolute;left:0px;top:0px;width:600%;padding:0;margin:0;list-style:none;border:0;}.screenli{list-style:none;}.allol{position:absolute;right:10px;bottom:10px;line-height:20px;text-align:center;}.allolli{float:left;width:20px;height:20px;background:#fff;border:1pxsolid#ccc;margin-left:10px;cursor:pointer;}.allolli.current{background:yellow;}#arrspan{width:40px;height:40px;position:absolute;left:5px;top:50%;margin-top:-20px;background:#000;cursor:pointer;line-height:40px;text-align:center;font-weight:bold;font-size:30px;color:#fff;opacity:0.3;border:1pxsolid#fff;}#arr#right{right:5px;left:auto;}#pictitle{width:100%;position:absolute;text-align:center;bottom:40px;font-weight:bold;font-size:2em;color:#fff;}2、JavsScript脚本文件内容varbox=document.getElementById("all");varul=box.children[0].children[0];varol=box.children[0].children[1];varulLiArr=ul.children;varnewLi=ulLiArr[0].cloneNode(true);ul.appendChild(newLi);for(vari=0;i<ulLiArr.length-1;i++){varnewOlLi=document.createElement("li");newOlLi.innerHTML=i+1;ol.appendChild(newOlLi);}varolLiArr=ol.children;ol.children[0].className="current";for(vari=0;i<olLiArr.length;i++){olLiArr[i].index=i;olLiArr[i].onmouseover=function(){for(varj=0;j<olLiArr.length;j++){olLiArr[j].className="";}olLiArr[this.index].className="current";animate(ul,-this.index*ul.children[0].offsetWidth);key=square=this.index;}}vartimer=null;varkey=0;varsquare=0;timer=setInterval(autoPlay,3000);functionautoPlay(){key++;square++;if(key>olLiArr.length){key=1;ul.style.left=0;}animate(ul,-……
浏览排版后的全文,请先 登录
浏览排版后的全文,请先 登录
作者
昵称:君子如兰
注册时间:2025-01-31 02:47:34
最近更新:2025-12-17 13:49:18
文章总数:92篇
原创 86篇
转载 6篇
阅读排行榜
皖公网安备34130202000765号