JS写一个旋转木马的视频播放效果

JS以及JQ的功能很强大,可以做出很多的优秀效果。今天给大家分享一个我之前写网站用到的旋转木马效果
在这里插入图片描述
大概效果图就是这样的,上面的视频播放是旋转木马效果。
下面的音乐播放效果放在下一篇内容里面讲。
直接先上页面布局写法:

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide qwbk01">
			<a href="http://v.people120.org/dplayer.php?url=http://7xlx33.media1.z0.glb.clouddn.com/xshyxwl.mp4" target="_blank"><img src="/uploads/171113/32-1G113131J2C7.jpg"></a>
			<p style="font-size: 1.7rem ;text-align: center;margin-top: 0.8rem">性生活有心无力怎么办</p>
		</div>
		<div class="swiper-slide qwbk01">
			<a href="http://v.people120.org/dplayer.php?url=http://7xlx33.media1.z0.glb.clouddn.com/yxxshdys.mp4" target="_blank"><img src="/uploads/171113/32-1G113131H0952.jpg"></a>
			<p style="font-size: 1.7rem ;text-align: center;margin-top: 0.8rem">影响性生活的因素有哪些</p>
		</div>
		<div class="swiper-slide qwbk01">
			<a href="http://v.people120.org/dplayer.php?url=http://7xlx33.media1.z0.glb.clouddn.com/xgnzadys.mp4" target="_blank"><img src="/uploads/171113/32-1G113131AbA.jpg"></a>
			<p style="font-size: 1.7rem ;text-align: center;margin-top: 0.8rem">性功能障碍的那些事</p>
		</div>
		<div class="swiper-slide qwbk01">
			<a href="http://v.people120.org/dplayer.php?url=http://7xlx33.media1.z0.glb.clouddn.com/znrxlyqx.mp4" target="_blank"><img src="/uploads/171113/32-1G11313160U01.jpg"></a>
			<p style="font-size: 1.7rem ;text-align: center;margin-top: 0.8rem">【七夕】老司机必知冷知</p>
		</div>
		<div class="swiper-slide qwbk01">
			<a href="http://v.people120.org/dplayer.php?url=http://7xlx33.media1.z0.glb.clouddn.com/znrzzs.mp4" target="_blank"><img src="/uploads/171113/32-1G113131542F7.jpg"></a>
			<p style="font-size: 1.7rem ;text-align: center;margin-top: 0.8rem">真男人涨姿势:早泄微探</p>
		</div>
	</div>
</div>

写法中主要还是用到swiper插件,根据swiper的功能来设置想要的属性,swiper-slide来做子页面的滑动效果。给每个滑块加上编号。
JS内容主要是设置各个属性

<script src="/2017mobile/js/swiper.min.js"></script>

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        effect:'coverflow',
        grabCursor:true,
        centeredSlides:true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        loop:true,
        speed:500,
        slidesPerView:'auto',
        coverflow:{
            rotate:0,  //旋转的角度
            stretch:1,   //拉伸  切换图片左右间距和密集度
            depth:80,   //深度  切换图片上下的间距和密集度
            modifier:12,  //修正值,越大前面的效果越明显
            slideShadows:false //页面阴影效果
        }
    });
</script>

重要内容都在coverflow中,这是设置的手动滑动,也可设置自动,也就是autoplay的属性,在swiper的属性设置中自己可自由发挥,强大吧。

转载于:https://www.cnblogs.com/xiaobeiju/p/10224152.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的旋转木马的 HTML 和 CSS 代码示例: HTML: ```html <div class="carousel"> <div class="item"><img src="img1.jpg"></div> <div class="item"><img src="img2.jpg"></div> <div class="item"><img src="img3.jpg"></div> </div> ``` CSS: ```css .carousel { position: relative; width: 80%; margin: auto; height: 400px; overflow: hidden; } .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 1s ease; } .item.active { opacity: 1; } .item.next { transform: translateX(100%); } .item.prev { transform: translateX(-100%); } .carousel .item img { width: 100%; height: 100%; object-fit: cover; } .carousel .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; } .carousel .controls button { border: none; background: transparent; font-size: 24px; color: #fff; margin: 0 10px; cursor: pointer; outline: none; } ``` JavaScript: ```javascript var items = document.querySelectorAll('.item'); var controls = document.querySelectorAll('.controls button'); var current = 0; function initCarousel() { items[0].classList.add('active'); controls.forEach(function(control) { control.addEventListener('click', handleControlClick); }); } function handleControlClick() { if (this.classList.contains('prev')) { current--; if (current < 0) { current = items.length - 1; } } else { current++; if (current > items.length - 1) { current = 0; } } updateCarousel(); } function updateCarousel() { var prev = current - 1; if (prev < 0) { prev = items.length - 1; } var next = current + 1; if (next > items.length - 1) { next = 0; } items.forEach(function(item) { item.classList.remove('prev', 'active', 'next'); }); items[prev].classList.add('prev'); items[current].classList.add('active'); items[next].classList.add('next'); } initCarousel(); ``` 这是一个基本的旋转木马,它使用 CSS 过渡效果和 JavaScript 来实现轮播。在 HTML 中,我们创建了一个包含图像的 div 元素,并将其包装在一个具有 carousel 类的 div 元素中。然后,我们使用 CSS 将其设置为相对定位,并将其宽度设置为 80%,高度设置为 400px。此后,我们使用 overflow: hidden 隐藏溢出的元素。 接下来,我们为每个图像创建了一个 div 元素,并将其设置为绝对定位。然后,我们使用 opacity: 0 将其隐藏,并使用过渡效果将其设置为所有属性的动画效果。我们还为当前活动的图像添加了 active 类。 在 JavaScript 中,我们选择所有图像元素和控制按钮,并为每个按钮添加了一个点击事件处理程序。我们还创建了一个变量 current,用于跟踪当前活动的图像。 在 initCarousel 函数中,我们将第一个图像设置为活动状态,并将点击事件处理程序添加到所有控件按钮上。 在 handleControlClick 函数中,我们确定用户点击了哪个按钮,并相应地更新 current 变量。然后,我们调用 updateCarousel 函数,它将根据 current 变量更新图像。 在 updateCarousel 函数中,我们确定前一个和下一个图像,并将相应的类添加到每个图像元素中。我们还删除了 prev、active 和 next 类,以确保每个图像只有一个类。 最后,我们调用 initCarousel 函数以启动旋转木马

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值