轮播

#ad{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                overflow: hidden;
            }
            img{
                width: 100px;
                height: 100px;
                /*display: none;*/
            }
            #ap{
                width: 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{
                width: 100px;
                height: 100px;
                border: 1px solid red;
            }
img{
                width: 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);
    }

 可以点击底部圆点和左右两边的箭头切换图片