JavaScript CSS3 Vue 实现一个轮播图

最新推荐文章于 2024-05-20 11:56:24 发布

gis_KG

最新推荐文章于 2024-05-20 11:56:24 发布

阅读量761

点赞数

分类专栏：前端文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_42609477/article/details/107878632

版权

前端专栏收录该内容

18 篇文章 2 订阅

订阅专栏

这里写目录标题

JavaScript
- 原理
- 效果
CSS3
vue
- 完成的功能
- 效果图

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>

gis_KG

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript CSS3 Vue 实现一个轮播图

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:
复制链接

扫一扫