#学习笔记#(38)js轮播图

来源：互联网发布：设有数组定义,x 编辑：程序博客网时间：2024/06/05 15:11

单张显示，第一张向前切换到最后一张，最后一张向后切换到第一张，可随意增加图片数量

html代码如下

<!DOCTYPE html><html><head><title>轮播图</title><meta charset="UTF-8" /><link href="carousel.css" rel="stylesheet" /></head><body><div class="container"><a class="pre" id="pre" onclick="gotopre()"></a><div class="box" id="box"><img src="carouselimgs/1.jpg" class="boximg" /><img src="carouselimgs/2.jpg" class="boximg" /><img src="carouselimgs/3.jpg" class="boximg" /><img src="carouselimgs/4.jpg" class="boximg" /><img src="carouselimgs/5.jpg" class="boximg" /><img src="carouselimgs/6.jpg" class="boximg" /><img src="carouselimgs/7.jpg" class="boximg" /><img src="carouselimgs/5.jpg" class="boximg" /><img src="carouselimgs/6.jpg" class="boximg" /><img src="carouselimgs/7.jpg" class="boximg" /></div><a class="next" id="next" onclick="gotonext()"></a></div><body><script src="carousel.js"></script></html>

js代码

document.getElementById("box").children[0].className="show";var prebtn=document.getElementById("pre");var nextbtn=document.getElementById("next");function gotopre(){var oBoxs=document.getElementById("box").children;if(oBoxs[0].className=="show"){//如果是第一张图片要往回切，切到最后一张吧oBoxs[0].className="boximg";oBoxs[oBoxs.length-1].className="show";}else{for(var i=1;i<oBoxs.length;i++){if(oBoxs[i].className=="show"){//获取显示的图片序号ioBoxs[i-1].className="show";//显示前一张oBoxs[i].className="boximg"; //将第i张隐藏}}}}function gotonext(){var oBoxs=document.getElementById("box").children;if(oBoxs[oBoxs.length-1].className=="show"){//如果是第一张图片要往回切，切到最后一张吧oBoxs[oBoxs.length-1].className="boximg";oBoxs[0].className="show";}else{for(var i=oBoxs.length-2;i>=0;i--){if(oBoxs[i].className=="show"){//获取显示的图片序号ioBoxs[i+1].className="show";//显示后一张oBoxs[i].className="boximg"; //将第i张隐藏}}}}

css代码

.container{width:320px;height:150px;margin:100px auto;}.box{width:220px;height:150px;overflow:hidden;float:left;border:1px solid #ccc;}.boximg{width:220px;height:150px;float:left;display:none;}.pre{width:20px;height:150px;background-image:url("carouselimgs/pre.jpg");background-repeat:no-repeat;display:block;float:left;cursor:pointer;margin-right:15px;}.next{width:20px;height:150px;background-image:url("carouselimgs/next.jpg");background-repeat:no-repeat;display:block;float:left;cursor:pointer;margin-left:15px;}@keyframes show{0%{display:block;opacity:0.1;}50%{display:block;opacity:0.5;}100%{display:block;opacity:1;}}.show{width:220px;height:150px;float:left;animation:show 1s;display:block;}

0 0