首页 > 代码库 > 自己写的轮播图代码，如有疑问请留言，图片宽度为1024乘600
自己写的轮播图代码，如有疑问请留言，图片宽度为1024乘600
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>carouse</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div id="banner"> <ul class="lunbotu clearfix"> <li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li> <li><img src="images/3.jpg"/></li> <li><img src="images/4.jpg"/></li> </ul> <p class="lunbopoint"> <span class="on"></span> <span></span> <span></span> <span></span> </p> <div id="upimg"><</div> <div id="downimg">></div> </div> <script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script> </body></html>
@charset "utf-8";*{ margin: 0; padding: 0;}#banner{ width:1024px; height:640px; margin:auto; overflow: hidden; margin-top:60px; position: relative;}.clearfix:after{ content: ‘‘; display: block; clear: both;}.lunbotu{ list-style: none; position: absolute; top: 0; left: 0;}.lunbotu li{ float: left;}.lunbopoint{ width: 100%; text-align: center; position: absolute; bottom: 20px;}.lunbopoint span{ display: inline-block; width:20px; height:20px; background-color:white; border-radius: 50%; margin-right: 10px; cursor: pointer;}.lunbopoint .on{ background-color: red;}#upimg{ position: absolute; left: 20px; top:280px; font-size: 60px; background: #A9A9A9; opacity: 0.6; cursor: pointer;}#downimg{ position: absolute; right: 20px; top:280px; font-size: 60px; background: #A9A9A9; opacity: 0.6; cursor: pointer; }#upimg:hover{ opacity: 0.8;}#downimg:hover{ opacity: 0.8;}
var banner=document.getElementById(‘banner‘); lunbo=banner.getElementsByClassName(‘lunbotu‘); lunbotu=lunbo[0].getElementsByTagName(‘li‘); lunbopo=banner.getElementsByClassName(‘lunbopoint‘); lunbopoint=lunbopo[0].getElementsByTagName(‘span‘); upimg=document.getElementById(‘upimg‘); downimg=document.getElementById(‘downimg‘); lunbo[0].style.width=lunbotu[0].offsetWidth*lunbotu.length+"px"; var num=0;//建立轮播换图的函数，在这里function（）里面别添加参数num，否则会有问题var changeimg=function(a){ num++; if(num>lunbotu.length-1){ num=0; } lunbo[0].style.left=-lunbotu[0].offsetWidth*num+"px"; for(i=0;i<lunbopoint.length;i++){ lunbopoint[i].className=‘‘;//改变类名无须添加style，直接加.className } lunbopoint[num].className=‘on‘;}//开始轮播.定时执行changeimg函数var a=setInterval(changeimg,3000);//点击下一张直接进行向下换图downimg.onclick=changeimgupimg.onclick=function(){ for (i=0;i<lunbopoint.length;i++) { if (lunbopoint[i].className==‘on‘) { var j=i; if(j==0){ j=3; }else{ j=j-1; } lunbo[0].style.left=-lunbotu[0].offsetWidth*j+"px"; for(i=0;i<lunbopoint.length;i++){ lunbopoint[i].className=‘‘; } lunbopoint[j].className=‘on‘; //改变全局变量num的值，使其能从当前循环 num=j; } }}//点击圆纽执行的变化for (i=0;i<lunbopoint.length;i++) { lunbopoint[i].onclick=function changetu(){ //这里一定要加上for循环，否则识别不了if判断的i for (i=0;i<lunbopoint.length;i++) { if (lunbopoint[i]==this) { var j=i; lunbo[0].style.left=-lunbotu[0].offsetWidth*i+"px"; for(i=0;i<lunbopoint.length;i++){ lunbopoint[i].className=‘‘; } lunbopoint[j].className=‘on‘; //改变全局变量num的值，使其能从当前循环 num=j; } } }}//鼠标移上去时，清空定时器banner.onmouseover=function(){ clearInterval(a);}//鼠标移开时重新执行定时器banner.onmouseout=function(){ a=setInterval(changeimg,3000);}
自己写的轮播图代码，如有疑问请留言，图片宽度为1024乘600
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。