#ad{ 100px; height: 100px; border: 1px solid red; overflow: hidden; } img{ 100px; height: 100px; /*display: none;*/ } #ap{ 300px; height: 100px; border: 1px solid red; /*transition: 2s;*/ display: flex; }
<div id="ad"> <div id="ap"> <img src="275x182.jpg"/> <img src="275x185.jpg"/> <img src="275x183.jpg"/> </div> </div>
setInterval("lun()",2000); function lun(){ var a = document.getElementById("ap"); var ml= a.style.marginLeft; ll=ml.substring(0,ml.length-2); dl=ll-100; if(dl == -300){ dl=0; } a.style.marginLeft=dl+'px'; }
图片闪现出来,没有好看的特效
*{ margin: 0 auto; padding: 0; } #one{ 100px; height: 100px; border: 1px solid red; } img{ 100px; height: 100px; display: none; }
<div id="wai" > <img src="timg.jpg"/style="display: block;"> <img src="timg1.jpg"/> <img src="timg2.jpg"/> <img src="timg3.jpg"/> </div> <div id="dianbox" > <div s="0" class="dian"style="border-color: green;" onclick="yuan(this,'0')" onmouseover="qing()" onmouseout="hui()"> </div> <div s="1" class="dian" onclick="yuan(this,'1')" onmouseover="qing()" onmouseout="hui()"> </div> <div s="2" class="dian" onclick="yuan(this,'2')" onmouseover="qing()" onmouseout="hui()"> </div> <div s="3" class="dian" onclick="yuan(this,'3')" onmouseover="qing()" onmouseout="hui()"> </div> </div> <div id="lbox"> <div id="l"> </div> </div> <div id="rbox"> <div id="r"> </div> </div>
var bs = 0; var timer = setInterval("lun()",2000); function lun(){ // 图片轮播 bs++; var img = document.getElementsByTagName("img"); if(bs>= img.length){ bs=0; } for (i = 0;i<img.length;i++) { img[i].style.display="none"; } img[bs].style.display="block"; // 圆点变色 var dian = document.getElementsByClassName("dian"); for (j = 0;j < img.length;j++) { dian[j].style.borderColor="red"; } dian[bs].style.borderColor="green"; } //点圆换图清除定时器 function yuan(x,y){ bs=y; var img = document.getElementsByTagName("img"); for(i = 0;i<img.length;i++){ img[i].style.display="none"; } img[y].style.display="block"; var dian = document.getElementsByClassName("dian"); for (j = 0;j<dian.length;j++) { dian[j].style.borderColor="red"; } x.style.borderColor="green"; } // function zuoyou(){ // var img = document.getElementsByTagName("img"); // for(i = 0;i<img.length;i++){ // img[i].style.display="none"; // } // } function qing(){ window.clearInterval(timer); } function hui(){ timer = setInterval("lun()",2000); }
可以点击底部圆点和左右两边的箭头切换图片