3D視訊輪播外掛——web前端
網上找了很多3D視訊輪播外掛，不是樣式不合適，就是程式碼太繁瑣。自己利用CSS3動畫transition編寫的3D視訊輪播外掛。
IE9開始才支援transition，所以只有在非IE瀏覽器、IE大於8才顯示整個外掛，IE6、E7、E8不顯示。video標籤新增preload="none"非常重要，禁止視訊預載入，提升外掛效能。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D視訊輪播外掛</title>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
.video{width: 1200px;margin: 0 auto;overflow: hidden;zoom:1;background: #eee;}
.video>div{float: left;height: 400px;}
.video>div:first-child {width: 5%;background: url(http://www.bdqnsz.com/skin/images/video-btn-l.png) center center no-repeat;}
.video>div:last-child {width: 5%;background: url(http://www.bdqnsz.com/skin/images/video-btn-r.png) center center no-repeat;}
.video>div:nth-of-type(2){width: 90%;}
.video ul{position: relative;}
.video li{transition: all .6s; position: absolute;background: url(http://www.bdqnsz.com/skin/images/video-bg.png) center center no-repeat;background-size: 100% 100%;}
.video li>div{padding: 1% 1% 4%;}
.video li video{width: 100%;}
.video li h3{text-align: center;margin-top: 2px;color: #1766d7;}
.video li:nth-of-type(1) video{background: url(http://www.bdqnsz.com/d/file/video/ff5e863be13876d2cc7c297369825f69.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(2) video{background: url(http://www.bdqnsz.com/d/file/video/9ade5aac7b982c2aef51501c1eced9a9.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(3) video{background: url(http://www.bdqnsz.com/d/file/video/33f6d3031b768985bda7baa75fe2a780.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(4) video{background: url(http://www.bdqnsz.com/d/file/video/a195b024d3f25eea9016452a46db40f5.jpg) no-repeat;background-size: cover;}
.video li:nth-of-type(5) video{background: url(http://www.bdqnsz.com/d/file/video/174ed56f294d476910048403f72c6987.jpg) no-repeat;background-size: cover;}
.video1{width: 200px;height: 114px; top: 143px;left: 0; z-index: 1;} /*建立5個播放框初始位置類，可自行更改*/
.video2{width: 400px;height: 228px; top: 86px;left: 90px; z-index: 2;}
.video3{width: 700px;height: 400px; top: 0px;left: 190px; z-index: 3;}
.video4{width: 400px;height: 228px; top: 86px;left: 590px; z-index: 2;}
.video5{width: 200px;height: 114px; top: 143px;left: 880px; z-index: 1;}
</style>
</head>
<body>
<!--只有在非IE瀏覽器、IE大於8才顯示整個外掛，IE6、E7、E8不顯示-->
<!--preload="none"非常重要，禁止視訊預載入，提升外掛效能-->
<!--[if !IE|gt IE 8]><!-->
<div class="video">
<div></div>
<div>
<ul>
<li class="video1"><div><video preload="none" controls loop><source src="video/jiaoxue.mp4" type="video/mp4"></source>您的瀏覽器不支援HTML5視訊播放，請升級瀏覽器。</video><h3>北 大 青 鳥 教 學 篇</h3></div></li>
<li class="video2"><div><video preload="none" controls loop><source src="video/darenpian.mp4" type="video/mp4"></source>您的瀏覽器不支援HTML5視訊播放，請升級瀏覽器。</video><h3>北大青鳥學員達人篇</h3></div></li>
<li class="video3"><div><video preload="none" controls loop autoplay><source src="video/shiaipian.mp4" type="video/mp4"></source>您的瀏覽器不支援HTML5視訊播放，請升級瀏覽器。</video><h3>北 大 青 鳥 師 愛 篇</h3></div></li>
<li class="video4"><div><video preload="none" controls loop><source src="video/qingchunpian.mp4" type="video/mp4"></source>您的瀏覽器不支援HTML5視訊播放，請升級瀏覽器。</video><h3>北大青鳥學員青春篇</h3></div></li>
<li class="video5"><div><video preload="none" controls loop><source src="video/chengzhangpian.mp4" type="video/mp4"></source>您的瀏覽器不支援HTML5視訊播放，請升級瀏覽器。</video><h3>北大青鳥學員成長篇</h3></div></li>
</ul>
</div>
<div></div>
</div>
<![endif]-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
var click=0;
var right=0; //解決第一次右邊點選沒反應
$('.video>div:first-child').click(function(){ //當點選左邊按鈕
for(var i=0; i<5; i++){
document.getElementsByTagName('video')[i].pause();}
click+=1;
if(click>=6)click=1;
right=1;
$('.video li:nth-of-type('+(((click+0)<=5) ? (click+0) : (click+0-5))+')').attr('class','video5');
$('.video li:nth-of-type('+(((click+1)<=5) ? (click+1) : (click+1-5))+')').attr('class','video1');
$('.video li:nth-of-type('+(((click+2)<=5) ? (click+2) : (click+2-5))+')').attr('class','video2');
$('.video li:nth-of-type('+(((click+3)<=5) ? (click+3) : (click+3-5))+')').attr('class','video3');
$('.video li:nth-of-type('+(((click+4)<=5) ? (click+4) : (click+4-5))+')').attr('class','video4');
})
$('.video>div:last-child').click(function(){ //當點選右邊按鈕
for(var i=0; i<5; i++){
document.getElementsByTagName('video')[i].pause();}
click-=1;
if(click<=0)click=5;
if(!right)click=4; //解決第一次右邊點選沒反應
right=1;
$('.video li:nth-of-type('+(((click+0)<=5) ? (click+0) : (click+0-5))+')').attr('class','video5');
$('.video li:nth-of-type('+(((click+1)<=5) ? (click+1) : (click+1-5))+')').attr('class','video1');
$('.video li:nth-of-type('+(((click+2)<=5) ? (click+2) : (click+2-5))+')').attr('class','video2');
$('.video li:nth-of-type('+(((click+3)<=5) ? (click+3) : (click+3-5))+')').attr('class','video3');
$('.video li:nth-of-type('+(((click+4)<=5) ? (click+4) : (click+4-5))+')').attr('class','video4');
})
})
</script>
</body>
</html>
相關推薦
3D視訊輪播外掛——web前端
網上找了很多3D視訊輪播外掛，不是樣式不合適，就是程式碼太繁瑣。自己利用CSS3動畫transition編寫的3D視訊輪播外掛。 IE9開始才支援transition，所以只有在非IE瀏覽器、IE大於8才顯示整個外掛，IE6、E7、E8不顯示。video標籤新增preloa
jQuery 3D旋轉圖片輪播外掛imageflow.js
下載地址 演示地址 相容IE6-11 外掛描述：3D旋轉圖片輪播效果（支援滾輪） 引數設定說明： aspectRatio: 1.964, /* ImageFlow的高度 */
【前端】探索自定義輪播外掛
考慮到不久後的混合開發要用(跑移動端,效率是個問題),先寫個外掛吧 這是基於HTML5 + CSS3 和原生JavaScript的無縫輪播(左近右出); 因為是在android上開發,所以只定義了基於-webkit-核心的動畫 HTML檔案: <!D
Swiper 3D flow輪播使用方法
移動 ref get idt dep enter nta 2.x 分享 swiper 的3d輪播效果，移動端適用 (1). 如需使用Swiper的3d切換首先加載3D flow插件(js和css)。 <head> <link rel="styleshe
2018最新傳智播客web前端開發39期視頻教程【完整版】
就業 開發視頻教程 百度 筆記 ESS 實戰 孤單 ref 全部 本套視頻為傳智2018web前端開發全套視頻教程基礎班+就業班，視頻+源碼+案例筆記，全套高清不加密~2018最新傳智播客視頻！ 本教程是實戰派課程！為傳智最新web前端39期，挑戰全網最全視頻,沒有之一
vue文字輪播外掛
目前看到有用的外掛就會保留，不為別的，就是想以後遇到同樣的問題能及時高效的解決，前兩天分享了app專案中的文字輪播。今天搞下vue中的吧，以便後用。 1、安裝這個外掛 npm i vue-seamless-scroll --save &nbs
Bootstrap學習日記之輪播外掛
輪播外掛概述 當你在瀏覽某些很酷的網站時，你會注意到好的網站都有這麼一個功能，圖片或者視訊在首頁位置，如幻燈片一樣，在輪播。 在Bootstrap中也有支援輪播的外掛carousel。這是一種非常靈活的響應式的向站點新增滑塊的方式，它可放置一切內容，如圖片視訊框架等。 建立
jQuery自適應-3D旋轉輪播圖
3D旋轉輪播圖 本例源於（站長之家例項http://sc.chinaz.com/jiaoben/170215391070.htm） 其他相似示例（https://www.cnblogs.com/incredible-x/p/9688333.html） 自己研究重寫了一遍。 一、先寫靜態的初始樣式的cs
3D切割輪播圖（H5C3）
效果 頁面結構 <div class="box"> <ul class="imageBox"> <li> <span></span> <
js物件輪播外掛
以下為頁面實現效果 以下為html程式碼 <div id="banner" class="banner"> <ul> <li style="background-color: pink"></li>
兩款響應式的圖片輪播外掛 rem字型設定
輪播：1http://www.w3cways.com/1796.html 輪播2：http://www.w3cways.com/1542.html rem字型設定;http://www.w3cways.com/1713.html 向上滑動效果：http://www.w3c
在同一個頁面中多次使用swiper 輪播外掛，要避免相互影響
在專案中使用輪播是很常見的，swiper 就是其中之一，pc 端，移動端都可以使用，效果還是不錯的；曾經在寫一個頁面的時候，其中有兩個輪播圖，於是都用swiper 來寫了，寫完之後發現顯示的效果不是預期的效果，有很大的問題；後來檢查發現兩個輪播圖相互影響了，樣式啥的衝突了，因
Vue2.0使用輪播外掛 VueAwesomeSwiper
1.第一步安裝VueAwesomeSwiper npm install vue-awesome-swiper --save 2.第二步在main.js中引入 import 'swiper/dist/css/swiper.css' import VueAwesomeSwi
swiper圖片輪播外掛
一、swiper簡介 實現圖片輪播的幻燈片的效果的外掛有很多，如touchsiler,Swiper，silerbox等等，各有獨自的API和自定義效果。下面要說的是關於swiper的使用。 Swiper 是一款免費以及輕量級的移動裝置觸控滑塊的js框架，使用硬
vue中插入swiper輪播外掛
建立vue專案流程這裡就不用廢話了吧？還不知道就在我前幾篇中有寫。今天我們的大屏專案中有了一個新的需求，資料模組的切換，毫無疑問，swiper外掛不二之選。原生的寫法官網直接給了，那麼這裡介紹一下在vue中使用swiper外掛的方法。<link rel="stylesh
一個簡單的jquery圖片輪播外掛
前提佈局： 左浮li標籤，支援左右切換，自動輪播，原始碼： 引數：ul： 需要動畫的ul prev：上一個切換按鈕 next： 下一個切換按鈕function rotation(ul, prev, next) { var li = $(ul).find("li
jQuery——實現一個3D動態輪播圖
先看效果圖(挺好看的小妹妹，製作完gif圖就這麼醜了)：css程式碼：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
H5頁面中的視訊輪播（類似於banner輪播圖效果）
先說下我的需求，如下圖： 手機模型中間部分是視訊播放，當一條視訊播放完畢後，整屏會自動上滑切換到下一個視訊。 提起輪播，我們看到的最多的就是banner輪播圖，而提起輪播圖，我會馬上想起用Swiper。 一開始為了快速開發，就想著用swiper來實
使用bootstrap之輪播外掛不自動播放的問題和播放時間間隔的問題解決方法
<div id="myCarousel" class="carousel slide"><!-- 輪播（Carousel）指標 --><ol class="carousel-indicators"><li data-target="#myCarousel" data
15個超強的jQuery/HTML5圖片輪播外掛
最近我們為大家分享過不少基於jQuery的圖片輪播外掛，當然也有很多使用了HTML5和CSS3的相關技術，讓整個圖片播放器顯得更加美觀，動畫效果顯得更加炫酷。這次我們特意為大家篩選了一些最新的jQuery/HTML5圖片輪播外掛，每一個的功能都比較強大，當然可能