009 轮播图，offset系列
关于使用JS做轮播图，使用一个章节进行笔迹。
一：简单轮播图
1.程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 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 ul {
position: absolute;
left: 0;
top: 0;
width: 3000px; /*将图片都装进来*/
}
.screen li {
float: left;
width: 500px;
height: 200px;
}
/*-序号-*/
.screen ol {
position: absolute;
left: 50%;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.screen ol li {
float: left;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
border-radius: 5px;
}
.screen ol li.current {
background-color: #DB192A;
}
#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-family: "黑体";
font-size: 30px;
font-weight: bold;
color: #fff;
opacity: 0.3;
border: 1px solid #ffffff;
}
#arr #right {
right: 5px;
left: auto;
}
#arr {
display: none;
}
</style>
</head>
<body>
<div id="box" class="all">
<div class="screen">
<ul>
<li><img src="data:images/1.jpg" alt="" width="500" height="200"></li>
<li><img src="data:images/2.jpg" alt="" width="500" height="200"></li>
<li><img src="data:images/3.jpg" alt="" width="500" height="200"></li>
<li><img src="data:images/4.jpg" alt="" width="500" height="200"></li>
<li><img src="data:images/5.jpg" alt="" width="500" height="200"></li>
</ul>
<ol>
<!--序号-->
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div> <script>
//获取一些使用的数据
var box = document.getElementById("box");
var screenObj = box.children[0];
var imgWidth = screenObj.offsetWidth;
var ulObj = screenObj.children[0];
var listObj = ulObj.children;
var olObj = screenObj.children[1];
var arr = document.getElementById("arr"); //同步全局变量
var pic = 0; for(var i=0; i<listObj.length; i++){
//创建ol中的li
var li = document.createElement("li");
olObj.appendChild(li);
li.innerHTML=i+1;
li.setAttribute("index",i);
//注册鼠标进入事件
li.onmouseover=function () {
for (var 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"; //刚进入的初始化
ulObj.appendChild(ulObj.children[0].cloneNode(true)); //在后面再添加一张第一张的图片 //进行自动播放轮播
var timeId = setInterval(clickHandle, 200000000); //鼠标进入div，显示左右箭头，停止定时器
box.onmouseover=function () {
arr.style.display="block";
clearInterval(timeId);
}
//鼠标退出div，影藏左右箭头，继续定时器
box.onmouseout=function () {
arr.style.display="none";
timeId = setInterval(clickHandle, 2000);
} function clickHandle() {
if(pic==listObj.length-1){
pic=0;
ulObj.style.left=0+"px";
}
pic++;
animate(ulObj, -pic * imgWidth);
if(pic==listObj.length-1){
olObj.children[olObj.children.length-1].className="";
olObj.children[0].className="current";
}else{
for(var k=0;k<olObj.children.length; k++){
olObj.children[k].removeAttribute("class");
}
olObj.children[pic].className="current";
}
} //右边按钮
document.getElementById("right").onclick=clickHandle; //左边按钮
document.getElementById("left").onclick=function () {
if(pic==0){
pic=5;
ulObj.style.left=-pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
for(var v=0; v<olObj.children.length; v++){
olObj.children[v].removeAttribute("class");
}
olObj.children[pic].className="current";
} //移动到任意位置
function animate(ele, target) {
clearInterval(ele.timeId);
ele.timeId = setInterval(function () {
var current = ele.offsetLeft;
var step = 10;
step = current<target?step:-step;
current+=step;
if(Math.abs(current-target)>Math.abs(step)){
ele.style.left=current+"px";
}else{
clearInterval(ele.timeId);
ele.style.left=target+"px";
}
},10);
} </script>
</body>
</html>
2.效果：
二：offset系列
1..offsetLeft
没有脱离文档流：
父级元素margin+父级元素的padding+父级元素的border+自己的margin。
脱离文档流：
主要是自己的left+自己的margin
三：document获取元素
1.通过document获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//获取body
console.log(document.body);
//获取title
console.log(document.title);
//获取html
console.log(document.documentElement);
</script>
</body>
</html>
2.图片跟着鼠标飞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
position: absolute;
}
</style>
</head>
<body>
<img src="demo/image/00_7.jpg" alt="" id="img" width="300px">
<script>
document.onmousemove=function (e) {
document.getElementById("img").style.left=e.clientX+"px";
document.getElementById("img").style.top=e.clientY+"px";
}
</script>
</body>
</html>
009 轮播图，offset系列的更多相关文章
- JavaScript动画：offset家族和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset家族简介 我们知道,三大家族包括:offset/scroll ...
- JavaScript动画：offset和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介 我们知道,三大家族包括:offset/scroll/c ...
- js-BOM之offset家族、移动函数的封装升级（轮播图）
Obj.style.width/obj.style.height与obj.offsetWidth/obj.offsetHeight的区别: <style> #div1{ height: 2 ...
- JS-特效 ～ 01. 事件对象、offset偏移／检测、无缝滚动、自动循环轮播图
Math.round ( ) :正书四舍五入,负数五舍六入 用定时器,先清除定时器 事件对象 event event:事件被触动时,鼠标和键盘的状态,通过属性控制 Offset:偏移,检测 1. 获取 ...
- jQuery实现todo及轮播图
内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- iOS 图片轮播图（自动滚动）
iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...
- 【jQuery】百分比自适应屏幕轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【JavaScript】固定布局轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Windows 上搭建Apache FtpServer
阅读目录 第一步:下载Apache FTPServer 第二步:解压Apache FTPServer 第三步:修改配置文件 第四步:启动FTPServer 第五步:访问FTP 第六步:FTPServe ...
- linux远程工具
实际工作中,linux系统都不会在我们自己的电脑上,linux系统安装在机房的服务器上,我们操作linux不可能跑到机房去,所以我们需要有一个工具,能在公司通过网络远程连接到机房的linux服务器上 ...
- JDK源码那些事儿之DelayQueue
作为阻塞队列的一员,DelayQueue(延迟队列)由于其特殊含义而使用在特定的场景之中,主要在于Delay这个词上,那么其内部是如何实现的呢?今天一起通过DelayQueue的源码来看一看其是如何完 ...
- vim编辑提示存在临时文件，删除隐藏的*.swp文件即可
在Linux下vim编辑过程中,由于某种原因异常退出正在编辑的文件,再次编辑该文件时,会出现如下提示: 使用vim编辑文件实际是先copy一份临时文件并映射到内存给你编辑,编辑的是临时文件,当执行:w ...
- Idea导入maven项目
1.idea中有项目的关闭项目 File>>close project 回到截图 下一步>下一步
- getchar（）函数举例
#include<stdio.h>void main(){ char ch; ch=getchar(); printf("%c",ch);}
- thinkpadT470P安装问题
[问题描述]: 最近在将Thinkpad E430c的ubuntu系统重装成windows 7的过程中,出现了装好win7系统后,开机自动进入boot menu界面的问题,而且不论你选择从光驱还是硬盘 ...
- 洛谷 P4408 [NOI2003] 逃学的小孩 题解
Analysis 题意虽然说先去谁家再去谁家,但是我们不需要管这个,因为AA.BB.CC三个点我们可以任意互相交换它们所代表的对象,所以题目要求的就是在一棵树上找到3个点AA.BB.CC令AB+BCA ...
- P4555 【[国家集训队]最长双回文串】
不知道有没有人跟我一样数据结构学傻了 首先这道题是要求回文串,那么我们可以想到manacher算法 但由于\(manacher\)不能求出双回文子串,我们要考虑一些性质 首先对于一个回文串,删掉两边的 ...
- C语言scanf函数返回值小记
scanf scanf是C标准库stdio里面定义的用于获取用户输入的函数,具体的介绍可以在CppReference上看到.scanf的返回值是已经成功赋值的变量个数,也就是说在 scanf(&quo ...