<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #demo { width: 100px; height: 100px; background-color: red; position: absolute; /*一定要记得加定位*/ } </style> </head> <body> <button id="btn">奔跑吧盒子</button> <div id="demo"></div> <script> var timer = null; var btn = document.getElementById("btn"); var demo = document.getElementById("demo"); // 点击按钮 让盒子跑 btn.onclick = function () { clearInterval(timer);//防止重复设定定时器 timer = setInterval(function () { var target = 400; // 目标值 var leader = demo.offsetLeft; // 获取当前位置 var step = 10; if (leader < target) { leader = leader + step; demo.style.left = leader + "px"; } else { clearInterval(timer); } }, 15); }; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #demo { width: 100px; height: 100px; background-color: red; position: absolute; /*一定要记得加定位*/ } </style> </head> <body> <button id="btn1">奔跑到200吧盒子</button> <button id="btn2">奔跑到400吧盒子</button> <div id="demo"></div> <script> var timer = null; var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var demo = document.getElementById("demo"); //点击按钮 让盒子跑 btn1.onclick = function () { animate(demo, 200); }; btn2.onclick = function () { animate(demo, 400); }; //需求 能够让任意对象移动到指定位置 function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var leader = obj.offsetLeft; var step = 10; if (leader < target) { leader = leader + step; obj.style.left = leader + "px"; } else { clearInterval(obj.timer); } }, 15); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #demo { width: 100px; height: 100px; background-color: red; position: absolute; /*一定要记得加定位*/ } </style> </head> <body> <button id="btn1">奔跑到200吧盒子</button> <button id="btn2">奔跑到400吧盒子</button> <div id="demo"></div> <script> var timer = null; var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var demo = document.getElementById("demo"); //点击按钮 让盒子跑 btn1.onclick = function () { animate(demo, 200); }; btn2.onclick = function () { animate(demo, 400); }; //需求 能够让任意对象移动到指定位置 function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var leader = obj.offsetLeft; var step = 10; step = leader < target ? step : -step; // step有了正负 if (Math.abs(leader - target) >= Math.abs(step)) { leader = leader + step; obj.style.left = leader + "px"; } else { obj.style.left = target + "px"; // 手动放到终点 clearInterval(obj.timer); } }, 15); } </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.box {
490px;
height: 170px;
margin: 100px auto;
padding: 5px;
border: 1px solid #ccc;
overflow: hidden;
}
.inner {
490px;
height: 170px;
background-color: pink;
overflow: hidden;
position: relative;
}
.inner ul {
list-style: none;
margin: 0;
padding: 0;
1000%;
position: absolute;
top: 0;
left: 0;
}
.inner li {
float: left;
}
.inner li img {
vertical-align: top;
490px;
height: 170px;
}
/* 导航器 */
.square {
position: absolute;
right: 10px;
bottom: 10px;
}
.square span {
display: inline-block;
16px;
height: 16px;
background-color: #fff;
text-align: center;
line-height: 16px;
cursor: pointer;
}
.square span.current {
background-color: orangered;
color: #fff;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<ul>
<li>
<a href="#"><img src="images/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/05.jpg" alt="" /></a>
</li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</div>
<script>
//需求：鼠标经过按钮 按钮排他 还要把ul以动画的方式移动到指定位置
//1.鼠标经过按钮 按钮排他
var box = document.getElementById('box')
var inner = box.children[0]
var ul = inner.children[0]
var squareList = inner.children[1]
var squares = squareList.children //所有按钮
var imgWidth = inner.offsetWidth //图片宽度
//给每一个按钮注册鼠标经过事件
for (var i = 0; i < squares.length; i++) {
squares[i].index = i //把索引保存在自定义属性中
squares[i].onmouseover = function () {
for (var j = 0; j < squares.length; j++) {
squares[j].className = ''
}
//留下我自己
this.className = 'current'
//目标 和 当前按钮索引有关 和 图片宽度有关 而且是负数
var target = -this.index * imgWidth
animate(ul, target)
}
}
function animate(obj, target) {
console.log(target)
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var leader = obj.offsetLeft
var step = 30
step = leader < target ? step : -step //step有了正负
if (Math.abs(leader - target) >= Math.abs(step)) {
leader = leader + step
obj.style.left = leader + 'px'
} else {
obj.style.left = target + 'px' //手动放到终点
clearInterval(obj.timer)
}
}, 15)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
#box {
490px;
height: 270px;
position: relative;
border: 5px solid red;
margin: 0 auto;
overflow: hidden;
}
.ad {
490px;
height: 270px;
position: relative;
}
.ad ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
2940px;
}
.ad ul li {
float: left;
}
.ad ul li img {
490px;
}
#arr {
display: none;
}
#arr span {
40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div id="box" class="all">
<div class="ad">
<ul id="imgList">
<li><img src="images/01.jpg" /></li>
<li><img src="images/02.jpg" /></li>
<li><img src="images/03.jpg" /></li>
<li><img src="images/04.jpg" /></li>
<li><img src="images/05.jpg" /></li>
</ul>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script>
//需求 点击左右箭头 以动画效果移动ul到指定位置
//找人
var box = document.getElementById('box')
var ad = box.children[0]
var ul = document.getElementById('imgList')
var lis = ul.children
var arr = document.getElementById('arr')
var left = document.getElementById('left')
var right = document.getElementById('right')
var imgWidth = ad.offsetWidth //图片宽度
//alert(imgWidth);
//1.鼠标经过盒子 显示arr 鼠标离开后隐藏
box.onmouseover = function () {
arr.style.display = 'block'
}
box.onmouseout = function () {
arr.style.display = 'none'
}
//2.点击右箭头 以动画的形式 把ul移动到指定的位置
var pic = 0 //记录当前显示的图片的索引
right.onclick = function () {
//先判断 然后再去执行 移动ul的代码
if (pic === lis.length - 1) {
//如果是最后一个图片的索引 就不能再执行了
return
}
pic++ //计算出接下来要显示的图片的索引
//目标 和pic有关 和 图片宽度有关 而且是负数
var target = -pic * imgWidth
animate(ul, target)
}
left.onclick = function () {
//先判断 然后再去执行 移动ul的代码
if (pic === 0) {
//如果是第一个图片的索引 就不能再执行了
return
}
pic-- //计算出接下来要显示的图片的索引
//目标 和pic有关 和 图片宽度有关 而且是负数
var target = -pic * imgWidth
animate(ul, target)
}
function animate(obj, target) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var leader = obj.offsetLeft
var step = 30
step = leader < target ? step : -step //step有了正负
if (Math.abs(leader - target) >= Math.abs(step)) {
leader = leader + step
obj.style.left = leader + 'px'
} else {
obj.style.left = target + 'px' //手动放到终点
clearInterval(obj.timer)
}
}, 15)
}
</script>
</body>
</html>
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
}
#arr span {
40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id="box">
<div class="screen">
<ul>
<li><img src="images/01.jpg" width="500" height="200" /></li>
<li><img src="images/02.jpg" width="500" height="200" /></li>
<li><img src="images/03.jpg" width="500" height="200" /></li>
<li><img src="images/04.jpg" width="500" height="200" /></li>
<li><img src="images/05.jpg" width="500" height="200" /></li>
</ul>
<ol></ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script>
var timer = null
//需求 实现一个 完整的轮播图
//找人
var box = document.getElementById('box')
var screen = box.children[0]
var ul = screen.children[0]
var ol = screen.children[1]
var ulLis = ul.children //所有的广告
var imgWidth = screen.offsetWidth
//alert(imgWidth);
//箭头
var arr = document.getElementById('arr')
var left = document.getElementById('left')
var right = document.getElementById('right')
//1.动态生成结构
//1.1根据图片数量动态生成按钮
for (var i = 0; i < ulLis.length; i++) {
var li = document.createElement('li')
li.innerHTML = i + 1
ol.appendChild(li)
}
var olLis = ol.children //所有的按钮
olLis[0].className = 'current'
//1.2克隆第一张广告 放到最后
var firstImg = ulLis[0].cloneNode(true)
ul.appendChild(firstImg)
//2.鼠标经过按钮
//鼠标经过按钮 按钮排他 以动画的形式把ul移动到指定的位置
for (var j = 0; j < olLis.length; j++) {
olLis[j].index = j
olLis[j].onmouseover = function () {
//排他
//干掉所有人
for (var k = 0; k < olLis.length; k++) {
olLis[k].className = ''
}
//留下我自己
this.className = 'current'
//以动画的形式把ul移动到指定的位置
//目标 和 按钮索引有关 和 图片宽度有关 而且是负数
var target = -this.index * imgWidth
animate(ul, target)
//还要把几个索引统一
pic = this.index
square = this.index
}
}
//3.鼠标点击箭头
//3.1鼠标经过盒子 显示箭头 鼠标离开盒子 隐藏箭头
box.onmouseover = function () {
arr.style.display = 'block' //显示箭头
clearInterval(timer) //停止自动播放
}
box.onmouseout = function () {
arr.style.display = 'none' //隐藏箭头
timer = setInterval(right.onclick, 1000) //从新自动播放
}
//3.2点击右箭头 以动画的形式把ul移动到指定的位置
var pic = 0 //记录当前正在显示的图片的索引
var square = 0 //记录当前正在亮起的按钮的索引
right.onclick = function () {
//先判断 如果是最后一个图片 先让ul瞬间跳会开始位置 然后索引也要归零
if (pic === ulLis.length - 1) {
ul.style.left = 0 + 'px'
pic = 0 //索引也要归零
}
pic++ //计算出将要显示的图片的索引
//目标 和pic有关 和 图片宽度有关 而且是负数
var target = -pic * imgWidth
animate(ul, target)
//按钮也要跟着走
if (square < olLis.length - 1) {
square++
} else {
square = 0
}
//干掉所有人
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = ''
}
//留下对应的
olLis[square].className = 'current'
}
left.onclick = function () {
//先判断 如果是第一个图片 先让ul瞬间跳到最后的位置 然后索引也要到最后
if (pic === 0) {
ul.style.left = -(ulLis.length - 1) * imgWidth + 'px'
pic = ulLis.length - 1 //索引也要归零
}
pic-- //计算出将要显示的图片的索引
//目标 和pic有关 和 图片宽度有关 而且是负数
var target = -pic * imgWidth
animate(ul, target)
//按钮也要跟着走
if (square > 0) {
square--
} else {
square = olLis.length - 1
}
//干掉所有人
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = ''
}
//留下对应的
olLis[square].className = 'current'
}
timer = setInterval(right.onclick, 1000) //自动播放
function animate(obj, target) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var leader = obj.offsetLeft
var step = 30
step = leader < target ? step : -step //step有了正负
if (Math.abs(leader - target) >= Math.abs(step)) {
leader = leader + step
obj.style.left = leader + 'px'
} else {
obj.style.left = target + 'px' //手动放到终点
clearInterval(obj.timer)
}
}, 15)
}
</script>
</body>
</html>