JavaScript（三十六）——JavaScript编写的轮播页面

JavaScript编写的轮播页面

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>轮播完善</title>
        <link rel="stylesheet" type="text/css" href="css/lunbo.css"/>

    </head>
    <body>
        <div id="box">
            <img src="img/1.png" id="pic"/>
            <ul id="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <div id="left" class="bt"><</div>
            <div id="right" class="bt">></div>
        </div>
        <script src="js/newlunbo.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

CSS:

*{
    padding: 0;
    margin: 0;
}
/*总体界面样式*/
#box{
    width: 600px;
    height: 240px;
    margin: 0 auto;
    position: relative;
}
/*左右切换按钮*/
.bt{
    width: 40px;
    height: 60px;
    background-color: rgba(0,0,0,0.2);
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 50px;
    /*居中*/
    line-height: 60px;
    text-align: center;
    /*绝对定位*/
    position: absolute;
    /*鼠标没移动到上面时隐藏*/
    display: none;
}
#left{
    left: 0;
    top: 100px;
}
#right{
    right: 0;
    top: 100px;
}

/*下面轮播小圆点*/
#list{
    position: absolute;
    bottom: 10px;
    left: 200px;
    /*消去前面的点*/
    list-style: none;
}
#list li{
    /* 浮动变成一行 */
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #aaa;
    /*居中*/
    text-align: center;
    line-height: 20px;
    margin-left: 10px;
}

JavaScript：

//需要用到的标签
var jsbox = document.getElementById("box");
var jspic = document.getElementById("pic");
var left = document.getElementById("left");
var right = document.getElementById("right");
var jslistarr = document.getElementsByTagName("li");

//第一个li设置为红色
jslistarr[0].style.backgroundColor = "red"

//启动一个定时器去更换pic中的src属性
var currentPage = 1
//改变页面方法
function changePage(){
    if(currentPage == 6){
        currentPage = 1
    }else if(currentPage == 0){
        currentPage = 5
    }
    jspic.src = "img/"+currentPage+".png"
    //清空小圆点颜色
    for(var i = 0;i<jslistarr.length;i++){
        jslistarr[i].style.backgroundColor = "#aaa"
    }
    jslistarr[currentPage - 1].style.backgroundColor = "red"
}
//定时器
var timer = setInterval(startLoop,1000)
function startLoop(){
    currentPage++
    changePage()

}

//鼠标进入box,左右按钮出现,定时器轮播消失，添加监听事件
jsbox.addEventListener("mouseover",overfun,false)
//overfun方法
function overfun(){
    //停止定时器
    clearInterval(timer)
    //显示左右按钮
    left.style.display="block";
    right.style.display = 'block';
}
//鼠标移出box
jsbox.addEventListener("mouseout",outfun,false)
function outfun(){
    //重启定时器
    timer = setInterval(startLoop,1000)
    //隐藏左右按钮
    left.style.display="none";
    right.style.display = 'none';
}


//鼠标移入按钮
function deep(){
    this.style.backgroundColor = "rgba(0,0,0,0.6)"    
}
left.addEventListener("mouseover",deep,false)
right.addEventListener("mouseover",deep,false)
//鼠标移出按钮
function nodeep(){
    this.style.backgroundColor = "rgba(0,0,0,0.2)"    
}
left.addEventListener("mouseout",nodeep,false)
right.addEventListener("mouseout",nodeep,false)
//点击左右按钮
left.addEventListener("click",function(){
    currentPage--
    changePage()
},false)
right.addEventListener("click",function(){
    currentPage++
    changePage()
},false)


//进入小圆点
for(var i = 0;i<jslistarr.length;i++){
    jslistarr[i].addEventListener("mouseover",function(){
        currentPage = parseInt(this.innerHTML)
//        console.log(currentPage)
        changePage()
    },false)

}

运行结果：

当鼠标没有移入界面时图片自动轮播