横向移动-广告图（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，超出部分隐藏