效果：
http://115.159.53.185/test/jsimagescroll/
js：
move() 利用定时器实现移动
//要让哪一个元素运动
//元素运动方向
//从哪里运动到哪里
//时间
//调用：
//move(document.getElementById("demo"), 'left', '300px', '100px', 2000);
function move(ele, dir, fromVal, toVal, dur, callBack){
var moveCount = dur / 10;
var oldPos;
var speed;
var offset;
// console.log(toVal.split('px')[0]);
switch(dir){
case "left" :
offset = "offsetLeft";
ele.style.left = fromVal;
oldPos = ele.offsetLeft;
speed = (toVal.split('px')[0] - oldPos) / moveCount;
console.log(speed);
break;
case "top":
offset = "offsetTop";
ele.style.top = fromVal;
oldPos = ele.offsetTop;
speed = (toVal.split('px')[0] - oldPos) / moveCount;
break;
default:
console.log("u can only use 'top' or 'left' in this function");
return;
}
console.log(ele[offset]);
var timer = setInterval(function(){
ele.style[dir] = ele[offset] + speed + 'px';
// ele.style.left;
// ele.style.top;
moveCount--;
if(moveCount <= 0){
callBack && callBack();
clearInterval(timer);
}
}, 10);
}
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#imagebox{
width: 400px;
height: 200px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#images{
width: 100%;
height: 100%;
position: relative;
list-style: none;
}
#images li{
width: 100%;
height: 100%;
position: absolute;
left: -100%;
}
#images li:first-child{
left: 0;
}
#images li img{
height: 100%;
width: 100%;
}
#points{
position: absolute;
height: 20px;
bottom: 10px;
list-style: none;
}
#points li{
width: 10px;
height: 10px;
border-radius: 5px;
margin: 5px;
background: white;
float: left;
}
#points li:first-child{
background: cadetblue;
}
#direction li{
width: 10px;
height: 10px;
border-radius: 5px;
margin: 5px;
background: red;
}
</style>
<body>
<div id="imagebox">
<ul id="images">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
</ul>
<ul id="direction">
<li id="leftDir"></li>
<li id="rightDir"></li>
</ul>
<ul id="points">
</ul>
</div>
<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var lis = document.getElementById("images").getElementsByTagName("li");
var pointBox = document.getElementById("points");
var points = [];
pointBox.style.width = 20*lis.length + 'px';
pointBox.style.left = (400-20*lis.length) * 0.5 + "px"
for(var i = 0; i < lis.length; i++){
var li = document.createElement("li");
points.push(li);
pointBox.appendChild(li);
li.index = i;
//点击立刻翻页
li.onclick = function(){
// console.log(this.index);
if(this.index > nowIndex ){
clearInterval(timer);
nextImage(this.index);
conTinuePlay();
}
if(this.index < nowIndex ){
clearInterval(timer);
jumpBack(this.index);
conTinuePlay();
}
}
}
//自动滚动
var nowIndex = 0;
var count = lis.length;
var timer = setInterval(function(){
var nextIndex = nowIndex + 1 >= count ? 0:nowIndex+1;
nextImage(nextIndex);
}, 2000);
function setContinuePlay(){
timer = setInterval(function(){
var nextIndex = nowIndex + 1 >= count ? 0:nowIndex+1;
nextImage(nextIndex);
}, 2000);
}
function conTinuePlay(){
setTimeout(setContinuePlay(), 5000);
}
function nextImage(nextIndex){
//当前图片向左400px
move(lis[nowIndex],'left', '0px', '-400px', 300);
//下一张图片向左400px
move(lis[nextIndex],'left', '400px', '0px', 300);
//小点点：颜色切换
points[nowIndex].style.background = 'white';
points[nextIndex].style.background = 'cadetblue';
//自增
nowIndex = nextIndex;
}
function jumpBack(jumpToIndex){
//当前图片向左400px
move(lis[nowIndex],"left", '0px', '400px', 300);
//下一张图片向左400px
move(lis[jumpToIndex],'left', '-400px', '0px', 300);
//小点点：颜色切换
points[nowIndex].style.background = 'white';
points[jumpToIndex].style.background = 'cadetblue';
//自增
nowIndex = jumpToIndex;
}
</script>
</body>
</html>