无缝滚动轮播

先上效果图

在这里插入图片描述

HTML代码

<div id="divall">
		<div class="div01">
			<img src="images/1.jpg" alt="" />
			<img src="images/2.jpg" alt="" />
			<img src="images/3.jpg" alt="" />
			<img src="images/4.jpg" alt="" />
		</div>
</div>

CSS样式

*{
			margin : 0;
			padding : 0;
		}
		img{
			width: 512px;
			height: 256px;
			float: left;
		}
		.div01{
			width: 2048px;
			height: 256px;
			position: absolute;
		}
		#divall{
			width: 700px;
			height: 256px;
			border: 1px solid #000;
			position: relative;
			overflow: hidden;
		}

JavaScript代码

var divall = document.getElementById(“divall”);
var div01 = document.getElementsByClassName(“div01”)[0];

		var div02 = document.createElement("div");
		div02.innerHTML = div01.innerHTML;
		div02.className = "div01";
		
		divall.appendChild(div02)   	//追加子元素
		
		var left1 = 0;
		var left2 = 2048;
		function step(){
			left1 -= 5;
			left2 -= 5;
			div01.style.left = left1 + "px";
			div02.style.left = left2 + "px";
			
			if(left1 <= -2048){
				left1 = 2048
			}
			if(left2 <= -2048){
				left2 = 2048
			}
		}

		var timer = setInterval (step,1)	//setInterval 设置循环定时器
		

		divall.onmouseover  = function(){    // onmouseover  鼠标移入
			clearInterval(timer)			// clearInterval  清除定时器

		}

		divall.onmouseout = function(){		//	onmouseout  鼠标移出
			timer = setInterval(step,100)
		}

// scrollWidth: 获取对象的滚动宽度
// offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

// console.log(divall.offsetWidth)
// console.log(divall.offsetHeight)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 3可以使用transition组件和v-for指令来实现左右照片无缝滚动轮播图。首先,你需要设置一个容器元素来包裹照片,并设置它的宽度为照片的宽度的n倍,其中n为照片的数量。然后,使用v-for指令在容器中循环渲染照片。接下来,使用transition组件和transform属性来实现左右滚动效果。最后,使用setInterval函数来实现自动切换照片的功能。 代码示例如下: ```html <template> <div class="carousel-container"> <transition-group name="carousel-slide" tag="div"> <div v-for="(photo, index) in photos" :key="index" class="carousel-slide-item"> <img :src="photo" alt="photo" /> </div> </transition-group> </div> </template> <script> export default { data() { return { photos: [ "photo1.jpg", "photo2.jpg", "photo3.jpg", // 添加更多照片 ], currentIndex: 0, intervalId: null, }; }, mounted() { this.startAutoSlide(); }, beforeUnmount() { this.stopAutoSlide(); }, methods: { startAutoSlide() { this.intervalId = setInterval(() => { this.slideRight(); }, 3000); }, stopAutoSlide() { clearInterval(this.intervalId); }, slideLeft() { this.currentIndex = (this.currentIndex - 1 + this.photos.length) % this.photos.length; }, slideRight() { this.currentIndex = (this.currentIndex + 1) % this.photos.length; }, }, }; </script> <style> .carousel-container { width: 100%; overflow: hidden; } .carousel-slide-item { float: left; width: 100%; } .carousel-slide-enter-active, .carousel-slide-leave-active { transition: transform 0.5s; } .carousel-slide-enter, .carousel-slide-leave-to { transform: translateX(100%); } </style> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值