JavaScript
原理
设置一个定时器来替换img的src;5张图 ,当索引变成6时 ,设置索引为第一张图;
点击暂停时,清除定时器;点击开始开起定时器
效果
HTML
<div class="lunbo">
<ul class="my_ul">
<li class="my_li"><img src="img/1.png" id="img" /></li>
</ul>
</div>
<div style=" display: flex;">
<div id="stop" class="btn">
暂停
</div>
<div id="start" class="btn">开始</div>
</div>
js
var img = document.getElementById("img");
let index = 1;
var timer=null
function lunbo() {
timer = setInterval(() => {
img.src = "img/" + index + ".png";
index++;
if(index == 6) {
index = 1;
}
}, 1000);
}
document.getElementById("start").addEventListener("click", function() {
console.log(timer)
if(timer){
clearInterval(timer);
timer=null;
document.getElementById("start").innerHTML="开始";
}else{
lunbo();
document.getElementById("start").innerHTML="暂停";
}
})
CSS
.lunbo {
width: 400px;
height: 200px;
}
.lunbo img {
width: 400px;
height: 200px;
}
.my_ul {
list-style: none;
}
.btn{
width: 50px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background-color: #e25235;
color: #eee;
border-radius: 10px;
box-sizing: border-box;
margin: 5px 8px;
}
CSS3
原理
利用animation 来实现
HTML:
<div class="lunbo">
<div class="my_ul">
<li class="my_li"><img src="img/1.png" id="img" /></li>
<li class="my_li"><img src="img/2.png" id="img" /></li>
<li class="my_li"><img src="img/3.png" id="img" /></li>
<li class="my_li"><img src="img/4.png" id="img" /></li>
</div>
</div>
CSS
.lunbo {
width: 400px;
height: 200px;
overflow: hidden;
}
.lunbo img {
width: 400px;
height: 200px;
float: left;
}
.my_ul {
list-style: none;
height: 200px;
width: 1600px;/*图片的的宽度 * 图片的数量 */
animation: lunbo 10s infinite;
}
@keyframes lunbo{
0%{
margin-left: 0px;
}
25%{
margin-left: 0px;
}
50%{
margin-left: -400px;
}
75%{
margin-left: -800px;
}
100%{
margin-left: -1200px;
}
}
animation属性详解
animation: lunbo 10s infinite;
1、animation-name:指定要绑定到选择器的关键帧的名称。
2、animation-duration:定义动画完成一个周期需要多少秒或毫秒
3、animation-timing-function:指定动画将如何完成一个周期(linear 动画从头到尾的速度是相同的。)
4、animation-delay:定义动画什么时候开始。
5、animation-iteration-count :定义动画应该播放多少次。infinite 指定动画应该播放无限次(永远);或者用一个数字表示 循环几次。
6、animation-direction:定义是否循环交替反向播放动画
7、animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
8、animation-play-state:指定动画是否正在运行或已暂停:
- paused 指定暂停动画。
- running 指定正在运行的动画。
例子
#div1 {
width:10px;
height:80px;
background-color:#ff9137;
margin:100px auto;
animation: spin 1s linear infinite;
animation-play-state: paused;
}
#div1:hover {
animation-play-state: running;
}
@keyframes spin {
0%{
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
50%{
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
100%{
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
}
demo
注意:
定义动画时,必须定义动画的名称和动画的持续时间。如果省略持续时间,动画将无法运行,因为默认值是0。
animation 与transition
transition:有条件触发 点击之类的
transition:width 2s ease 3s
transition: [属性名] [持续时间] [速度曲线] [延迟时间]; 就是过渡
过渡属性没有中间的过程,动画是一步到位
过渡属性有条件的触发
animation关键帧
动画是一帧一帧的绘制的
可绘制复杂动画
需要配合@keyframes来使用;
不需要触发任何事件也可随时间变化达到一种动画效果;
vue
完成的功能
- 自动切换与手动切换
- 鼠标悬浮停止播放
- 点击切换上下图片
- 设置播放间隔
效果图
<template>
<div class="hello">
<div class="myImg">
<h1>{{myText}}模式</h1>
<div class="imgBox">
<img :src="imgList[currentIndex]" @mouseover="mouseover" @mouseleave="mouseLeave" />
<div class="imgText">{{dataList[currentIndex]}}</div>
</div>
</div>
<div class="carousel" v-if="this.imgList.length > 1">
<ul>
<li @click="gotoPage(prevIndex)">上一张</li>
<li
v-for="(item,index) in imgList"
@click="gotoPage(index)"
:class="{'current':currentIndex == index}"
:key="index"
>{{index+1}}</li>
<li @click="gotoPage(nextIndex)">下一张</li>
</ul>
</div>
<div class="bottom">
<button v-show="flag" class="myBtn" @click="stopInv()">手动切换</button>
<div v-show="!flag">
<input class="myInput" v-model="inputVal" text="text" placeholder="输入切换间隔时间" />秒
<button class="myBtn" @click="runInv()">自动切换</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
imgList: ["static/img/1.jpg", "static/img/2.jpg", "static/img/3.jpg"],
dataList: ["凤凰古城", "矮寨大桥", "乾州古城"],
currentIndex: 0,
timer: null,
myText: "手动切换",
flag: false, //控制按钮
flag1: false, //控制鼠标浮动
inputVal: "1"
};
},
mounted() {
// this.runInv();
},
methods: {
gotoPage(index) {
this.currentIndex = index;
},
//定时器
runInv() {
let reg = /^[1-9]$/;
console.log(!reg.test(this.inputVal));
if (this.inputVal == "" || !reg.test(this.inputVal)) {
alert("切换时间为1-9秒");
} else {
this.timer = setInterval(() => {
this.gotoPage(this.nextIndex);
}, this.inputVal * 1000);
this.flag = true;
this.myText = "自动切换";
}
},
stopInv() {
clearInterval(this.timer);
this.flag = false;
this.myText = "手动切换";
},
mouseover() {
if (this.flag == true) {
clearInterval(this.timer);
this.flag1 = true;
}
},
mouseLeave() {
if (this.flag == true && this.flag1 == true) {
this.timer = setInterval(() => {
this.gotoPage(this.nextIndex);
}, this.inputVal * 1000);
console.log(1);
}
}
},
computed: {
//上一张
prevIndex() {
if (this.currentIndex == 0) {
return this.imgList.length - 1;
} else {
return this.currentIndex - 1;
}
},
//下一张
nextIndex() {
if (this.currentIndex == this.imgList.length - 1) {
return 0;
} else {
return this.currentIndex + 1;
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
margin: 0px;
padding: 0px;
height: 100vh;
}
.carousel {
width: 100%;
display: flex;
justify-content: center;
height: 53px;
}
ul li {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: left;
width: 51px;
/* height: 40px; */
cursor: pointer;
color: rgba(117, 103, 103, 0.8);
font-size: 14px;
}
.myImg {
display: flex;
justify-content: center;
padding-top: 100px;
flex-direction: column;
align-items: center;
}
.imgBox {
height: 300px;
width: 500px;
}
.myImg img {
height: 100%;
width: 100%;
}
.imgText {
position: relative;
bottom: 54px;
background-color: rgba(255, 212, 1, 0.7);
color: #fff;
height: 50px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.carousel ul {
display: flex;
margin: 0px;
padding: 0px;
}
.current {
color: #ff6700;
}
.bottom {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.myBtn {
color: #fff;
background-color: #f56c6c;
cursor: pointer;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.myInput {
width: 133px;
height: 41px;
text-align: center;
}
.myImg h1 {
position: absolute;
top: 20px;
left: 45%;
animation: test 1.5s 1s linear;
}
@keyframes test {
from {
top: 5%;
left: 5%;
opacity: 1;
}
}
</style>