上下滚动播放 左右轮播

jQuery上下滚动自动轮播代码:

html:

<div id="slider_1">
    <ul>
		        <li>AAA</li>
		        <li>BBB</li>
		        <li>CCC</li>
	    </ul>
</div>

function timer(opj){
        

        $(obj).find("ul:first").animate({

                marginLeft:"-40px" //左右轮播

                marginTop:"-40px"//上下轮播

            },500,function(){

                $(this).css({marginLeft:"0px"}).find("li:first").appendTo(this); //左右轮播

                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);//上下轮播

                //$(this).css("marginTop","0px"):因为在ul向上移40px的时候,其第一个li会添加到ul的末尾,如果ul的marginTop不设为0的话,整个ul就会慢慢移出它的父盒子,最后使得它的父盒子变空。

        });
}
$(function(){ 
        var num = $('# slider_1 ul').find('li').length;
if(num > 1){

var time=setInterval('timer("#slider_1")',3500);

$('#slider_1 li').mousemove(function(){

                         //鼠标移入停止轮播

clearInterval(time);

}).mouseout(function(){

                        //鼠标移出开始轮播

time = setInterval('timer("# slider_1")',3500);
}); 
}
});
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用Vue.js和一些现成的JavaScript库来实现上下滚动视频轮播放窗口。以下是一些可能有用的步骤: 1. 安装和导入Vue.js和相关的JavaScript库,例如swiper.js和video.js。 2. 在Vue组件中创建一个包含视频列表的容器,使用CSS将其设置为所需的大小和形状,并将其设置为可滚动的。例如: ```html <template> <div class="video-container"> <div class="video-list"> <div class="video-item" v-for="video in videos" :key="video.id"> <video :src="video.src" class="video-js" controls></video> </div> </div> </div> </template> <script> import Swiper from 'swiper'; import 'swiper/css/swiper.css'; import videojs from 'video.js'; import 'video.js/dist/video-js.css'; export default { data() { return { videos: [ { id: 1, src: 'path/to/video1.mp4' }, { id: 2, src: 'path/to/video2.mp4' }, { id: 3, src: 'path/to/video3.mp4' }, // ... ] } }, mounted() { // 初始化swiper轮组件 new Swiper('.video-container', { direction: 'vertical', slidesPerView: 'auto', }); // 初始化video.js视频播放组件 videojs(document.querySelectorAll('.video-js')); } } </script> <style> .video-container { width: 100%; height: 400px; /* 设置容器高度 */ overflow: hidden; /* 设置容器可滚动 */ } .video-list { display: flex; flex-direction: column; height: 100%; /* 设置视频列表高度 */ } .video-item { flex: 1; display: flex; align-items: center; justify-content: center; background-color: #f5f5f5; } </style> ``` 3. 在mounted生命周期钩子中初始化swiper轮组件和video.js视频播放组件。 4. 根据需要调整CSS样式以适应您的设计需求。 注意:此处只是一个简单的示例,您需要根据您的实际需求进行调整。同时,视频播放可能会涉及到一些版权问题,需要您自行处理。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值