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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3是一种流行的JavaScript框架,用于构建用户界面。它具有响应式数据绑定和组件化的特性,使得开发者可以更轻松地构建交互式的Web应用程序。 CSS跑马灯轮是一种常见的网页元素,用于展示多张片或内容,并以动画的方式进行切换。在Vue3中,可以通过以下步骤来实现CSS跑马灯轮: 1. 创建一个Vue组件,命名为Carousel。 2. 在组件中定义一个data属性,用于存储轮的数据,例如片的URL或者内容。 3. 在组件的模板中使用v-for指令,遍历轮数据,并生成对应的DOM元素。 4. 使用CSS样式设置轮容器的宽度和高度,并设置overflow属性为hidden,以隐藏超出容器范围的内容。 5. 使用CSS动画或过渡效果,实现的切换效果。可以使用@keyframes定义动画序列,或者使用transition属性设置过渡效果。 6. 在组件的生命周期钩子函数中,使用定时器或其他方式,控制轮的自动切换。 下面是一个简单的示例代码: ```html <template> <div class="carousel"> <div class="slide" v-for="(item, index) in carouselData" :key="index"> <!-- 轮内容 --> <img :src="item.image" alt="carousel image" /> </div> </div> </template> <script> export default { data() { return { carouselData: [ { image: 'image1.jpg' }, { image: 'image2.jpg' }, { image: 'image3.jpg' }, ], }; }, }; </script> <style> .carousel { width: 100%; height: 300px; overflow: hidden; } .slide { width: 100%; height: 100%; animation: carouselAnimation 10s infinite; } @keyframes carouselAnimation { 0% { transform: translateX(0); } 33% { transform: translateX(-100%); } 66% { transform: translateX(-200%); } 100% { transform: translateX(0); } } </style> ``` 这是一个简单的Vue3 CSS跑马灯轮实现示例。你可以根据自己的需求进行样式和动画的调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gis_KG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值