update
This commit is contained in:
parent
7895ac1106
commit
91ed28fafd
@ -48,4 +48,4 @@
|
||||
* `™` 商标
|
||||
* ` ` 半方大的空白
|
||||
* ` ` 全方大的的空白
|
||||
* ` ` 不断行的空
|
||||
* ` ` 不断行的空
|
||||
@ -115,7 +115,6 @@
|
||||
//向左移动5张图片的距离 点击5次
|
||||
//...
|
||||
aniamte(ul, target)
|
||||
|
||||
}
|
||||
|
||||
prev.onclick = function() {
|
||||
@ -137,11 +136,9 @@
|
||||
clearInterval(ele.timer)
|
||||
ele.timer = setInterval(function(){
|
||||
var current = ele.offsetLeft
|
||||
|
||||
var step = 10;
|
||||
step = target - current >= 0 ? step : - step
|
||||
current += step
|
||||
|
||||
if(Math.abs(target - current) > step) {
|
||||
ele.style.left = current + 'px';
|
||||
} else {
|
||||
|
||||
@ -2,4 +2,11 @@
|
||||
|
||||
|
||||
|
||||
*
|
||||
* 自动轮播图案例
|
||||
[linkToHtml](./autoslider.html)
|
||||
* 自动向左轮播，设置定时器往左挪
|
||||
* 为了达到流畅的效果，将第一张复制再最后边，播放完再跳转回第一张
|
||||
* 将重复的代码封装成函数
|
||||
* 鼠标移入自动停止
|
||||
* 鼠标移出自动开始
|
||||
|
||||
116
20191020/autoSlider.html
Normal file
116
20191020/autoSlider.html
Normal file
@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
.slider {
|
||||
width: 590px;
|
||||
height: 470px;
|
||||
padding: 10px;
|
||||
border : 1px solid #ccc;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
}
|
||||
.slider .inner {
|
||||
width: 590px;
|
||||
height: 470px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.slider .inner ul {
|
||||
width: 600%;
|
||||
position: absolute;
|
||||
}
|
||||
.slider .inner ul li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="slider" id="slider">
|
||||
<div class="inner">
|
||||
<ul>
|
||||
<li><a href="#"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/82345/16/13178/77786/5da93550E6449f58e/f5b14f641913efba.jpg.webp" alt="" srcset=""></a></li>
|
||||
<li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/73861/8/7311/133024/5d562902E29c956c1/da390c8c345c48e0.jpg.webp" alt="" srcset=""></a></li>
|
||||
<li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/79136/10/13206/197242/5da92d47Ee54665df/39d85a2990ba58d1.jpg.webp" alt="" srcset=""></a></li>
|
||||
<li><a href="#"><img src="https://imgcps.jd.com/ling/22692212401/6JGh6JCE6YWS6ZKc5oOg/6YOo5YiGMuS7tjXmipg/p-5bd8253082acdd181d02fa02/153dad62.jpg" alt="" srcset=""></a></li>
|
||||
<li><a href="#"><img src="https://img14.360buyimg.com/pop/s590x470_jfs/t1/46901/24/7545/62345/5d52317fEebadcf80/8fb168cddd5ef2b9.jpg.webp" alt="" srcset=""></a></li>
|
||||
<li><a href="#"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/82345/16/13178/77786/5da93550E6449f58e/f5b14f641913efba.jpg.webp" alt="" srcset=""></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function my$(id) {
|
||||
return document.getElementById(id)
|
||||
}
|
||||
//获取元素slider
|
||||
var slider = my$('slider');
|
||||
//获取inner
|
||||
var inner = slider.children[0]
|
||||
//获取ul
|
||||
var ul = inner.children[0]
|
||||
//获取图片的宽度
|
||||
var imgW = inner.offsetWidth
|
||||
|
||||
//一直改变ul的left值 达到目标循环播放所有图
|
||||
//创建定时器
|
||||
//声明当前的位置
|
||||
var current = 0;
|
||||
|
||||
function startslider() {
|
||||
return setInterval(function(){
|
||||
//只要当前的位置一直减少就是向左移动
|
||||
current -= 3;
|
||||
if(current < -2950) {
|
||||
ul.style.left = 0 +'px';
|
||||
current = 0
|
||||
}
|
||||
ul.style.left = current + 'px'
|
||||
},1)
|
||||
}
|
||||
|
||||
var timer = startslider();
|
||||
|
||||
slider.onmouseover = function() {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
|
||||
slider.onmouseout = function() {
|
||||
timer = startslider();
|
||||
}
|
||||
|
||||
|
||||
function aniamte(ele,target) {
|
||||
clearInterval(ele.timer)
|
||||
ele.timer = setInterval(function(){
|
||||
var current = ele.offsetLeft
|
||||
var step = 10;
|
||||
step = target - current >= 0 ? step : - step
|
||||
current += step
|
||||
if(Math.abs(target - current) > step) {
|
||||
ele.style.left = current + 'px';
|
||||
} else {
|
||||
clearInterval(ele.temer)
|
||||
ele.style.left = target + 'px'
|
||||
ele.temer = null;
|
||||
}
|
||||
}, 10)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
34
20191020/test.html
Normal file
34
20191020/test.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.box {
|
||||
margin: 300px;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background: green;
|
||||
font-size: 40px;
|
||||
position: relative;
|
||||
transform:translate(10px,20px) rotate(37deg) scale(1.5, 2);
|
||||
}
|
||||
|
||||
.dot {
|
||||
height:10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
left: 181px;
|
||||
top:50px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="dot"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
10
README.md
10
README.md
@ -97,7 +97,7 @@
|
||||
## 20191019
|
||||
|
||||
|
||||
[linkToMd](./20191018/20191019.md)
|
||||
[linkToMd](./20191019/20191019.md)
|
||||
|
||||
* 轮播图案例
|
||||
* 轮播图按钮案例
|
||||
@ -106,4 +106,12 @@
|
||||
|
||||
* [上课视频链接](https://pan.baidu.com/s/18LetxRVExyVBQAq20Xo3_g&shfl=sharepset)
|
||||
提取码：pne2
|
||||
---
|
||||
|
||||
## 20191020
|
||||
|
||||
|
||||
[linkToMd](./20191020/20191020.md)
|
||||
|
||||
* 自动轮播图案例
|
||||
---
|
||||
Loading…
x
Reference in New Issue
Block a user