橫向移動-廣告圖（web）

項目

（移動的廣告牌）

要求：

1，實現圖片一次以移動的方式出現，到最後一張完全出現時，回彈到第一張

2，滑鼠放在圖片上面圖片移動，滑鼠離開，圖片停止移動

*{
    padding: 0;
    margin: 0;
}
/*添加背景圖片，個人愛好*/
body{
    background: url(../img/quan4.jpg);
}

/*註意給外盒子設置邊款，並隱藏超出部分*/
#box{
    position: relative;
    margin: 10px auto;
    width: 500px;
    height: 250px;
    border: 5px solid red;
    overflow: hidden;
    /*background-color: chocolate;*/
}

/*放圖片的盒子設為絕對定位；寬度為所有圖片的寬度和，

這樣可以使得圖片橫向排列；隱藏超出部分*/
#imgs{
    position: absolute;
    margin: 10px;
    width: 2400px;
    height: 230px;
    overflow: hidden;
}

/*給所有圖片設置統一的高度和寬度；向左浮動；相對定位*/
#imgs img{
    position: relative;
    float: left;
    width: 400px;
    height: 230px;
    
}

//使用$（）函數
function $(id){
    return document.getElementById(id);
}

//當滑鼠懸浮在大盒子內時（獲取焦點），開起定時器
$("box").onmouseover = function(){
    clearInterval(timer);
    timer = setInterval(runTimes,3);

}

//當滑鼠離開在大盒子內時（失去焦點），停止定時器
$("box").onmouseout = function(){
      clearInterval(timer);
}

var poit = 10;//創建一個變數來接收我們要改變的目標值
var leader = 0;//創建一個變數，設置動畫效果
var timer = null;//定時器變數，開啟和停止定時器需要


//創建一個函數，實現目標值的改變
function runTimes(){
    poit --;
    
    //設置動畫的方式，使得leader的值為0
    leader = leader + (poit - leader)/10;
    
    $("imgs").style.marginLeft =  leader + "px";
   

   //實現回彈效果（所需要的值根據具體情況設置）

   //如果最後一張圖片完全顯示出來了，就重新給目標值賦予初始值
    if (poit < -1900) {
        poit = 10;
    }
}

1，一個大盒子裡面放一個小盒子，小盒子里放圖片

2，大盒子與小盒子的高度相當，小盒子的寬度為所有圖片的寬度之和

3，圖片的寬高相等，圖片的高度與小盒子相同，並向左浮動

4，設置小盒子的外邊距的初始值為0，超出部分隱藏