先上效果图
HTML代码
<div id="divall">
<div class="div01">
<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
</div>
</div>
CSS样式
*{
margin : 0;
padding : 0;
}
img{
width: 512px;
height: 256px;
float: left;
}
.div01{
width: 2048px;
height: 256px;
position: absolute;
}
#divall{
width: 700px;
height: 256px;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
JavaScript代码
var divall = document.getElementById(“divall”);
var div01 = document.getElementsByClassName(“div01”)[0];
var div02 = document.createElement("div");
div02.innerHTML = div01.innerHTML;
div02.className = "div01";
divall.appendChild(div02) //追加子元素
var left1 = 0;
var left2 = 2048;
function step(){
left1 -= 5;
left2 -= 5;
div01.style.left = left1 + "px";
div02.style.left = left2 + "px";
if(left1 <= -2048){
left1 = 2048
}
if(left2 <= -2048){
left2 = 2048
}
}
var timer = setInterval (step,1) //setInterval 设置循环定时器
divall.onmouseover = function(){ // onmouseover 鼠标移入
clearInterval(timer) // clearInterval 清除定时器
}
divall.onmouseout = function(){ // onmouseout 鼠标移出
timer = setInterval(step,100)
}
// scrollWidth: 获取对象的滚动宽度
// offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
// console.log(divall.offsetWidth)
// console.log(divall.offsetHeight)