JS基础学习:轮播图完善/offset系列/图片跟随鼠标
2019-04-10 本文已影响0人
Merbng
案例：图片跟随鼠标飞
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
position: absolute;
}
</style>
</head>
<body>
<img id="im" src="images/01.jpg" alt="">
<script src="js/common.js"></script>
<script>
document.onmousemove = function(e) {
my$('im').style.left = e.clientX + "px";
my$('im').style.top = e.clientY + "px";
};
</script>
</body>
</html>
直接通过
document获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>啊娃娃</title>
</head>
<body>
<script>
// 获取的是元素---标签
console.log(document.body);
// 获取的 是标签中的值
console.log(document.title);
document.title = "修改了";
//获取html
console.log(document.documentElement)
</script>
</body>
</html>
offset系列
offsetWidth:获取元素的宽
offsetHeight：获取元素的高
offsetLeft：获取元素距离左边的距离
offsetTop：获取元素距离上面的距离
- 没有脱离文档流：
offsetLeft：父级元素margin+父级元素padding+父级元素border+自己的margin - 脱离文档流：
主要是自己的left和自己的margin
<div id="dv1" style="height: 20px;"></div>
<div id="dv2"></div>
<input type="button" value="显示效果" id="btn">
<script src="js/common.js"></script>
<script>
my$('btn').onclick = function() {
// 在style标签中设置的样式属性获取不到
// 在style属性中设置的样式 可以获取到.
console.log(my$('dv1').style.height);
// 获取元素的宽和高,使用这个offset系列
console.log(my$('dv1').offsetLeft);
};
</script>
案例：完整轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 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/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="js/common.js"></script>
<script>
// 最外面的div
var box = my$('box');
// 获取相框
var screen = box.children[0];
// 焦点的div
var arr = my$('arr');
// 获取相框的宽度
var imgWidth = screen.offsetWidth;
// 获取ul
var ulObj = screen.children[0];
// 获取ul中所有的li
var list = ulObj.children;
// 获取ol
var olObj = screen.children[1];
var pic = 0;
// 创建小按钮
for (i = 0; i < list.length; i++) {
var liObj = document.createElement('li');
liObj.setAttribute('index', i);
olObj.appendChild(liObj);
liObj.innerHTML = i + 1;
liObj.onmouseover = function() {
for (j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute('class');
}
this.className = "current";
pic = this.getAttribute('index');
animate(ulObj, -pic * imgWidth);
};
}
olObj.children[0].className = "current";
// 克隆一个ul中的第一个li,加入到ul中的最后
ulObj.appendChild(ulObj.children[0].cloneNode(true))
var timeId = setInterval(rightClick, 1000);
box.onmouseover = function() {
arr.style.display = "block";
clearInterval(timeId);
};
box.onmouseout = function() {
arr.style.display = "none";
timeId = setInterval(rightClick, 1000);
};
my$('right').onclick = rightClick;
function rightClick() {
if (pic == list.length - 1) {
pic = 0;
ulObj.style.left = 0 + "px";
}
pic++;
animate(ulObj, -pic * imgWidth);
// 如果pic==5 此时显示第6个图(内容是第一张图），第一个小按钮有颜色)
if (pic == list.length - 1) {
olObj.children[olObj.children.length - 1].className = "";
olObj.children[0].className = "current";
} else {
for (i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute('class');
}
olObj.children[pic].className = "current";
}
}
my$('left').onclick = function() {
if (pic == 0) {
pic = 5;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
// 设置小按钮的颜色
for (i = 0; i < olObj.children.length; i++) {
// 所有的小按钮干掉颜色
olObj.children[i].removeAttribute('class');
}
olObj.children[pic].className = "current";
}
</script>
</body>
</html>
案例：无缝轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
vertical-align: top;
}
/*取消图片底部3像素距离*/
.box {
width: 520px;
height: 280px;
margin: 100px auto;
background-color: pink;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.box ul li {
float: left;
}
.box ul {
width: 2600px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" id="screen">
<ul>
<li><img src="images/01.jpg" alt="" /></li>
<li><img src="images/02.jpg" alt="" /></li>
<li><img src="images/03.jpg" alt="" /></li>
<li><img src="images/04.jpg" alt="" /></li>
<li><img src="images/01.jpg" alt="" /></li>
</ul>
</div>
<script src="js/common.js"></script>
<script>
function f1() {
current -= 10;
var ulObj = my$('screen').children[0];
if (current < -1200) {
ulObj.style.left = 0 + "px";
current = 0;
console.log(current)
} else {
ulObj.style.left = current + "px";
}
}
var current = 0;
var timeId =setInterval(f1, 20);
my$('screen').onmouseover=function(){
clearInterval(timeId);
}
my$('screen').onmouseout=function(){
timeId =setInterval(f1, 20);
}
</script>
</body>
</html>
案例：淘宝轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body,
ul,
ol,
li,
img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 520px;
height: 280px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
overflow: hidden;
}
.ad {
width: 520px;
height: 280px;
/*overflow: hidden;*/
position: relative;
}
#box img {
width: 520px;
}
.ad ol {
position: absolute;
right: 10px;
bottom: 10px;
}
.ad ol li {
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
_display: inline;
}
.ad ol li.current {
background: yellow;
}
.ad ul li {
float: left;
}
.ad ul {
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current {
display: block;
}
#focusD {
display: none;
}
#focusD span {
width: 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;
}
#focusD #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
</div>
<!--相框-->
<div id="focusD"><span id="left"><</span><span id="right">></span>
</div>
</div>
<script src="js/common.js"></script>
<script>
// 获取最外面的div
var box = my$('box');
// 获取相框
var ad = box.children[0];
// 获取相框的宽度
var imgWidth = ad.offsetWidth;
// 获取ul
var ulObj = ad.children[0];
// 获取左右焦点的div
var foncusD = my$('focusD');
// 显示和隐藏左右焦点的div---为box注册事件
box.onmouseover = function() {
foncusD.style.display = "block";
};
box.onmouseout = function() {
foncusD.style.display = "none";
};
// 点击右边按钮
var index = 0;
my$('right').onclick = function() {
if (index < ulObj.children.length - 1) {
index++;
animate(ulObj, -index * imgWidth);
}
};
my$('left').onclick = function() {
if (index > 0) {
index--;
animate(ulObj, -index * imgWidth);
}
};
</script>
</body>
</html>
demo地址：
