知识点：
1.querySelector: 类似于getElementById。
获取出来的元素只有一个，是第一个符合条件的标签。
传入的参数可以是类，id以及标签名。但其实是所有符合css选择器的参数都是可以的。
2.定位父级：
一个元素向外寻找，遇到的第一个使用定位的父级，就是他的定位父级。绝对定位 相对定位 固定定位。
- 如果没有定位父级的话，他的定位父级认为是body。
(1).offsetLeft :元素举例自己定位父级左边框之间的距离。
影响这个值的因素有定位以及自身的margin。
(2).offsetTop：元素举例自己定位父级上边框之间的距离。
影响这个值的因素有定位以及自身的margin。。
(3).offsetWidth:元素占用空间的大小。包括自己的边框以及内容宽度以及padding。 width + border2 + padding2
(4).offsetHeight:元素占用空间的大小。包括自己的边框以及内容高度以及padding。 height + border2 + padding2 。
(5).offsetParent:获取元素的定位父级。
eg：
1.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin:0px;
}
div{
margin: 50px auto;
position: relative;
width:712px;
height:108px;
background: red;
overflow: hidden;
}
div ul{
width: 100%;
position: absolute;
}
div ul li{
float: left;
list-style: none;
}
a{
position: absolute;
display: block;
width:68px;
height:68px;
}
a#prev{
top:70px;
background-position: -68px 0;
background-image: url(images/btn.jpg);
left:240px;
top:94px;
}
a#next{
top:70px;
background-position: 0 0;
background-image: url(images/btn.jpg);
left:1060px;
top:94px;
}
input{
width:10px;
height:10px;
border: 2px solid #333;
float:left;
margin-left:447px;
margin-top:30px;
}
span{
font-size:16px;
float:left;
margin-left:5px;
margin-top:26px;
}
select{
float:left;
margin-left:5px;
margin-top:26px;
}
</style>
</head>
<body>
<!-- //顶部操作 -->
<input type="checkBox">
<span>滚动间隙</span>
<span>间隙时长</span>
<select>
<option value="1000">短</option>
<option value='2000'>中</option>
<option value='3000'>长</option>
<select>
<span>滚动倍数</span>
<select>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<select>
<!-- 中间效果与指令 -->
<a href="javascript:;" id="prev"></a>
<div>
<ul>
<li><img src="images/1.jpg" alt="">
<li><img src="images/2.jpg" alt="">
<li><img src="images/3.jpg" alt="">
<li><img src="images/4.jpg" alt="">
</ul>
</div>
<a href="javascript:;" id="next"></a>
<script>
//1. 获取ul
var ul = document.querySelector('ul');
var prev = document.querySelector('#prev');
var next = document.querySelector('#next');
var oInt = document.querySelector('input');
var sel = document.getElementsByTagName('select');
ul.innerHTML = ul.innerHTML + ul.innerHTML;
ul.style.width = ul.offsetWidth*2 + 'px';
//2. 设置定时器
var time = 1000;
var speed = 4;
var timer = setInterval(move,30);
sel[0].onchange = function(){
time = sel[0].value;
}
sel[1].onchange = function(){
speed = parseInt(sel[1].value);
}
function move(){
//3. 动起来
ul.style.left = ul.offsetLeft + speed + 'px';
if(ul.offsetLeft<-712){
ul.style.left = '0px';
}
if(ul.offsetLeft>0){
ul.style.left="-712px";
}
if(oInt.checked){
if(Math.abs(ul.offsetLeft%178)==0){
clearInterval(timer);
setTimeout(function(){
clearInterval(timer);
timer = setInterval(move,30);
},time);
}
}
}
ul.onmouseover = function(){
clearInterval(timer);
};
ul.onmouseout = function(){
clearInterval(timer);
timer = setInterval(move,30);
};
next.onclick = function(){
clearInterval(timer);
speed = Math.abs(speed);
timer = setInterval(move,30);
};
prev.onclick = function(){
clearInterval(timer);
speed = -1*Math.abs(speed);
timer = setInterval(move,30);
};
</script>
</body>
<html>
网友评论