轮播图

html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <script type="text/javascript" src="lunbotu.js"></script>
        <style>
            
        </style>
    </head>

    <body>
    　　<div style="width: 80%; height: 500px; margin: 0 auto;" >
        　　<img src="../../../../图片/1.jpg" alt="logo"  id="im"  
    width="100%" height="500px" onMouseOver="aa()">
    　　</div>
   　　 <br>
   　　 <div style="width: 30%; height: 100px; margin: 0 auto;">
    　　    <button onClick="shangye()">上一页</button>
        　　<button onClick="bbtu(0)">1</button>
        　　<button onClick="bbtu(1)">2</button>
        　　<button onClick="bbtu(2)">3</button>
        　　<button onClick="bbtu(3)">4</button>
       　　 <button onClick="xiaye()">下一页</button>
  　　  </div>
    </body>
</html>

js部分

// JavaScript Document
var im =null; //图片标签对象
var sum=["../../../../图片/1.jpg","../../../../图片/2.jpg","../../../../图片/3.jpg","../../../../图片/4.jpg"];  //轮播图路径数组
var n =0;   //轮播图下标
var IntervalObj = null;   //定时器变量
window.onload=function(){
    im = document.getElementById("im");
    lunbo(n);
    stop();
    start();
}
//轮播
function lunbo(n){ 
    IntervalObj = setInterval(function(){
        im.src=sum[n];
        n++;
        if(n>=sum.length){
            n=0;
        }
    },1200);
}
//移上暂停    
function stop(){
    im.onmouseover=function(){
        clearInterval(IntervalObj);
        
    }
}
//移下继续
function start(){
    im.onmouseout=function(){
        IntervalObj = setInterval(function(){
            im.src=sum[n];
            n++;
            if(n>=sum.length){
                n=0;
            }
        },5200);
    }    
}
//点击按钮1、2、3、4跳转图片
function bbtu(nn){
    im.src=sum[nn];
    n=nn+1;
}
//点击下一页跳转下一页
function shangye(){
    n--;
    if(n<= -1){
        n=sum.length-1;
    }
    im.src=sum[n];
}
//点击上一页跳转上一页
function xiaye(){
    n++;
    if(n>= sum.length-1){
        n=0;
    }
    im.src=sum[n];
}

 

posted @ 2018-07-09 16:59  大树*  阅读(192)  评论(0)  编辑  收藏  举报