update
This commit is contained in:
parent
7895ac1106
commit
91ed28fafd
@ -48,4 +48,4 @@
|
|||||||
* `™` 商标
|
* `™` 商标
|
||||||
* ` ` 半方大的空白
|
* ` ` 半方大的空白
|
||||||
* ` ` 全方大的的空白
|
* ` ` 全方大的的空白
|
||||||
* ` ` 不断行的空
|
* ` ` 不断行的空
|
||||||
@ -115,7 +115,6 @@
|
|||||||
//向左移动5张图片的距离 点击5次
|
//向左移动5张图片的距离 点击5次
|
||||||
//...
|
//...
|
||||||
aniamte(ul, target)
|
aniamte(ul, target)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
prev.onclick = function() {
|
prev.onclick = function() {
|
||||||
@ -137,11 +136,9 @@
|
|||||||
clearInterval(ele.timer)
|
clearInterval(ele.timer)
|
||||||
ele.timer = setInterval(function(){
|
ele.timer = setInterval(function(){
|
||||||
var current = ele.offsetLeft
|
var current = ele.offsetLeft
|
||||||
|
|
||||||
var step = 10;
|
var step = 10;
|
||||||
step = target - current >= 0 ? step : - step
|
step = target - current >= 0 ? step : - step
|
||||||
current += step
|
current += step
|
||||||
|
|
||||||
if(Math.abs(target - current) > step) {
|
if(Math.abs(target - current) > step) {
|
||||||
ele.style.left = current + 'px';
|
ele.style.left = current + 'px';
|
||||||
} else {
|
} 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
|
## 20191019
|
||||||
|
|
||||||
|
|
||||||
[linkToMd](./20191018/20191019.md)
|
[linkToMd](./20191019/20191019.md)
|
||||||
|
|
||||||
* 轮播图案例
|
* 轮播图案例
|
||||||
* 轮播图按钮案例
|
* 轮播图按钮案例
|
||||||
@ -106,4 +106,12 @@
|
|||||||
|
|
||||||
* [上课视频链接](https://pan.baidu.com/s/18LetxRVExyVBQAq20Xo3_g&shfl=sharepset)
|
* [上课视频链接](https://pan.baidu.com/s/18LetxRVExyVBQAq20Xo3_g&shfl=sharepset)
|
||||||
提取码：pne2
|
提取码：pne2
|
||||||
|
---
|
||||||
|
|
||||||
|
## 20191020
|
||||||
|
|
||||||
|
|
||||||
|
[linkToMd](./20191020/20191020.md)
|
||||||
|
|
||||||
|
* 自动轮播图案例
|
||||||
---
|
---
|
||||||
Loading…
x
Reference in New Issue
Block a user