无缝滚动
无缝滚动
DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>title>
<style>
*{
margin:0px;
padding:0px;
}
#main {
height:200px;
}
#div1{
width:1200px;
height:200px;
background-color:salmon;
position:relative;
background-color:red;
overflow:hidden;
float:left;
}
#div1 ul{
position:absolute;
left:0px;
top:0px;
}
#div1 ul li{
float:left;
list-style:none;
width:300px;
height:200px;
}
#goLeft{
float:left;
}
#goLeft{
float:left;
}
style>
<script>
window.onload = function () {
var oDiv1 = document.getElementById("div1");
var oUl = oDiv1.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
var speed = -2;
var timer;
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
function move() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = "0" + px;
}
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px";
}
oUl.style.left = oUl.offsetLeft + speed + "px";
}
timer = setInterval(move, 30);
var oGoRight = document.getElementById("goRight");
var oGoLeft = document.getElementById("goLeft");
oGoLeft.onclick = function () {
speed = -2;
}
oGoRight.onclick = function () {
speed = 2;
}
oDiv1.onmouseover = function () {
clearInterval(timer);
}
oDiv1.onmouseout = function () {
timer = setInterval(move, 30);
}
}
script>
head>
<body>
<div id="main">
<img id="goLeft" src="D:\html\滚动的图片\pic\left.png" />
<div id="div1">
<ul>
<li><img src="D:\html\滚动的图片\pic\aaa.jpg" />li>
<li><img src="D:\html\滚动的图片\pic\bbb.jpg" />li>
<li><img src="D:\html\滚动的图片\pic\ccc.jpg" />li>
<li><img src="D:\html\滚动的图片\pic\ddd.jpg" />li>
ul>
div>
<img id="goRight" src="D:\html\滚动的图片\pic\right.png" />
div>
body>
html>