横向移动-广告图（web）

项目（移动的广告牌）	要求： 1，实现图片一次以移动的方式出现，到最后一张完全出现时，回弹到第一张 2，鼠标放在图片上面图片移动，鼠标离开，图片停止移动
HTML结构	<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>回弹效果</title> <link rel="stylesheet" href="css/index.css"/> </head> <body> <!--创建一个外盒子--> <div id="box"> <!--外盒子里面在放一个盒子，用来存放图片--> <div id="imgs"> <img src="img/1.jpg" alt="" /> <img src="img/2.jpg" alt="" /> <img src="img/3.jpg" alt="" /> <img src="img/4.jpg" alt="" /> <img src="img/5.jpg" alt="" /> <img src="img/6.jpg" alt="" /> </div> </div> </body> </html> <script type="text/javascript" src="js/index.js"></script>
CSS布局	{ padding: 0; margin: 0; } /添加背景图片，个人爱好/ body{ background: url(img/4.jpg); } /注意给外盒子设置边款，并隐藏超出部分/ #box{ position: relative; margin: 10px auto; 500px; height: 250px; border: 5px solid red; overflow: hidden; /background-color: chocolate;/ } /放图片的盒子设为绝对定位；宽度为所有图片的宽度和，这样可以使得图片横向排列；隐藏超出部分/ #imgs{ position: absolute; margin: 10px; 2400px; height: 230px; overflow: hidden; } /给所有图片设置统一的高度和宽度；向左浮动；相对定位*/ #imgs img{ position: relative; float: left; 400px; height: 230px; }
JS动画	//使用$（）函数 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，超出部分隐藏 5，调用定时器改变小盒子的外边距，达到图片向左移的效果（达到一定值在重新赋予初始的值）