原生js實現(xiàn)3D輪播圖

更新時間：2020年03月21日 15:15:25 作者：ICY___

這篇文章主要為大家詳細介紹了原生js實現(xiàn)3D輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

3D輪播圖是我做過復雜的圖片輪播了，由于是利用坐標，層級之間的關系，所以實現(xiàn)起來原理比較簡單但是bug巨多，在推推拖拖了好久后，下定決心重新整理成博客，與大家分享！

首先分析一下3D圖片輪播的功能需求：

和其它圖片輪播大體一致，無非就是點擊按鈕向左、右翻頁，點擊下方提示位置小點切換到小點表示對的位置頁（我是真的不知道那個小點叫什么名字，大家將就著聽吧）

上代碼：

基本代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>立體輪播圖</title>
 <style>
 .block{
 position: relative;
 width: 900px;
 height: 370px;
 margin: 0 auto;
 overflow: hidden;
 }
 .imgae_div{
 position: relative;
 width: 900px;
 height: 300px;
 }
 .imgae_div>div{
 position: absolute;
 width: 400px;
 height: 200px;
 transition: all 1s linear;
 
 }
 .imgae_div img{
 width: 400px;
 height: 200px;
 }
 .imgae_div>div:nth-child(1){
 top: 150px;
 left: 250px;
 z-index: 6;
 }
 .imgae_div>div:nth-child(2){
 top: 100px;
 left: 0px;
 z-index: 5;
 }
 .imgae_div>div:nth-child(3){
 top: 50px;
 left: 0px;
 z-index: 4;
 }
 .imgae_div>div:nth-child(4){
 top: 0px;
 left: 250px;
 z-index: 3;
 }
 .imgae_div>div:nth-child(5){
 top: 50px;
 left: 500px;
 z-index: 4;
 }
 .imgae_div>div:nth-child(6){
 top: 100px;
 left: 500px;
 z-index: 5;
 }
 .btn{
 width: 900px;
 height: 40px;
 position: absolute;
 top: 155px;
 z-index: 999;
 overflow: hidden;
 }
 .btn>span:nth-child(1){
 width: 30px;
 background-color: rgba(164, 150, 243, 0.336);
 display: block;
 float: left;
 text-align: center;
 line-height: 40px;
 margin-left: -30px;
 cursor: pointer;
 opacity: 0;
 transition: all 0.5s linear;
 }
 .btn>span:nth-child(2){
 width: 30px;
 background-color: rgba(164, 150, 243, 0.336);
 display: block;
 float: right;
 text-align: center;
 line-height: 40px;
 margin-right: -30px;
 cursor: pointer;
 opacity: 0;
 transition: all 0.5s linear;
 }
 .marright{
 margin-right: 0px !important;
 opacity: 1 !important;
 }
 .marleft{
 margin-left: 0px !important;
 opacity: 1 !important;
 }
 .point{
 width: 108px;
 height: 14px;
 position: absolute;
 bottom: 0;
 left: 396px;
 z-index: 10;
 
 }
 .point>div{
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background-color: white;
 float: left;
 margin: 0 2px;
 border: 2px solid black;
 box-sizing: border-box;
 }
 </style>
</head>
<body>
 <div class="block">
 <div class="imgae_div">
 <div><img src="./img/111.jpg" alt=""></div>
 <div><img src="./img/222.jpg" alt=""></div>
 <div><img src="./img/333.jpg" alt=""></div>
 <div><img src="./img/444.jpg" alt=""></div>
 <div><img src="./img/555.jpg" alt=""></div>
 <div><img src="./img/666.jpg" alt=""></div>
 </div>
 <div class="btn">
 <span><</span>
 <span>></span>
 </div>
 <div class="point">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 </div>
 <script src="./js/index.js"></script>
</body>
</html>

js代碼：

// 簡單說一下我是怎么想的：1.分步實現(xiàn)，先實現(xiàn)圖片自己動，在加其它的功能
// 2.每實現(xiàn)一個功能要立馬去測bug，因為放到后面就越難找了。
// 3.輪播向左，向右是兩個互相聯(lián)系的方法，需要找到彼此的關系
var imgae_div = document.getElementsByClassName('imgae_div')[0];
var imgae_div_child = imgae_div.children;
var btn=document.getElementsByClassName('btn')[0];
var block=document.getElementsByClassName('block')[0];
var new_point = document.getElementsByClassName("point")[0].children;
new_point[0].style.backgroundColor = "#000000";
// 利用函數(shù)的封裝 ps：圖片輪播離不開計時器，且個人覺得用setIntervar比較多
img_work();
function img_work() {
 time = setInterval(function () {
 img_workfirst('left', 0);//兩個參數(shù)，判斷向左還是向右輪播，索引
 }, 1500);
}
// console.log(point.child);
function img_workfirst(left_right, cindex) {
 // 這里面首先說一下css中寫好的默認層關系：從第1張到第6張為別為 6 5 4 3 4 5，和頁面的布局有關
 var firstpage = {//當前頁的各種屬性
 // getComputedStyle()獲取css屬性
 left: window.getComputedStyle(imgae_div_child[cindex]).left,
 top: window.getComputedStyle(imgae_div_child[cindex]).top,
 zIndex: window.getComputedStyle(imgae_div_child[cindex]).zIndex,
 backcolor: window.getComputedStyle(new_point[cindex]).backgroundColor
 };
 if (left_right == 'left') {
 // 向左輪播為默認輪播
 for (var i = 0; i < imgae_div_child.length; i++) {
 // for循環(huán)遍歷所有元素
 if (i == imgae_div_child.length - 1) {
 // 當前頁的下一張為 最后一張（位置都是動態(tài)切換的）
 imgae_div_child[i].style.left = firstpage.left;
 imgae_div_child[i].style.top = firstpage.top;
 imgae_div_child[i].style.zIndex = firstpage.zIndex;
 new_point[i].style.backgroundColor = firstpage.backcolor;
 } 
 else {
 // 其它頁對應為它前面元素的屬性
 imgae_div_child[i].style.left = window.getComputedStyle(imgae_div_child[i + 1]).left;
 imgae_div_child[i].style.top = window.getComputedStyle(imgae_div_child[i + 1]).top;
 imgae_div_child[i].style.zIndex = window.getComputedStyle(imgae_div_child[i + 1]).zIndex;
 new_point[i].style.backgroundColor = window.getComputedStyle(new_point[i + 1]).backgroundColor;
 
 }
 }
 }
 // 向右輪播，借助向左輪播分析
 else {
 for (var i = imgae_div_child.length - 1; i >= 0; i--) {
 if (i == 0) {
 imgae_div_child[i].style.left = firstpage.left;
 imgae_div_child[i].style.top = firstpage.top;
 imgae_div_child[i].style.zIndex = firstpage.zIndex;
 new_point[i].style.backgroundColor = firstpage.backcolor;
 
 }
 else {
 imgae_div_child[i].style.left = window.getComputedStyle(imgae_div_child[i - 1]).left;
 imgae_div_child[i].style.top = window.getComputedStyle(imgae_div_child[i - 1]).top;
 imgae_div_child[i].style.zIndex = window.getComputedStyle(imgae_div_child[i - 1]).zIndex;
 new_point[i].style.backgroundColor = window.getComputedStyle(new_point[i - 1]).backgroundColor;
 
 
 }
 }
 }
 firstpage = null;
 // 將表示當前頁的數(shù)據(jù)清空，防止bug（因為當前頁也是動態(tài)變化的，需要動態(tài)創(chuàng)建）
}
// console.log(new_point);
 
// 消除一些bug
window.onblur = function () {//窗口失焦時，計時器停止
 clearInterval(time);
}
window.onfocus = function () {
 img_work();//獲焦時開啟計時器
}
document.onselectstart = function () {//禁止用戶復制
 return false;
}
block.οnmοuseenter=function(){//鼠標進入輪播圖時，兩個按鈕滑動出來
 clearInterval(time);
 btn.children[1].className='marright';
 btn.children[0].className='marleft';
}
block.οnmοuseleave=function(){//離開時和平時隱藏
 img_work();
 btn.children[1].className='';
 btn.children[0].className='';
 for (var k = 0; k < imgae_div_child.length; k++) {
 imgae_div_child[k].style.transitionDuration = "0.5s";
 }
}
// 對應的左右按鈕的點擊事件
btn.children[0].οnclick=function(event){
 if(event.detail==1){//用于控制鼠標的連擊，但是效果對于故意測試來說還是有所缺陷 下同
 img_workfirst('left',0);
 }
}
btn.children[1].οnclick=function(event){
 if(event.detail==1){
 img_workfirst('right',imgae_div_child.length-1);
 }
}
 
 
// point的事件
for(var i=0;i<new_point.length;i++){
 new_point[i].index=i;
 new_point[i].οnclick=function(){
 for(var k=0;k<imgae_div_child.length;k++){
 imgae_div_child[k].style.transitionDuration='0.1s';//動畫完成
 } 
 var oldindex=0;
 for(var k=0;k<new_point.length;k++){
 if(new_point[k].style.backgroundColor== 'rgb(0, 0, 0)'){//格式必須統(tǒng)一
 oldindex=new_point[k].index;
 }
 }
 var num =0;//判斷計算轉動次數(shù)
 if(this.index>oldindex){//所需頁在當前頁的左（左右相對于下方點來說）
 num=this.index-oldindex;
 var timego=setInterval(function(){
 num--;
 if(num<0){
 clearInterval(timego);
 }
 else{
 img_workfirst('right',5)//因為方向變了，所以下一頁就為當前頁的上一頁，也就是cindex為5
 }
 },100);//動畫時間縮短，優(yōu)化體驗
 }
 else{//所需頁在當前頁的左（左右相對于下方點來說）
 num=Math.abs(this.index-oldindex);
 var timego=setInterval(function(){
 num--;
 if(num<0){
 clearInterval(timego);
 }
 else{
 img_workfirst('left',0)
 }
 },100);
 }
}
}

關于出現(xiàn)的bug的一些總結：

1、注意左右的區(qū)分與聯(lián)系
2、注意連續(xù)點擊的bug
3、注意切換窗口，切換頁面，最小化等這些切換的bug
4、注意代碼格式，在js中寫css樣式時，要注意格式

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
輪播圖

JS實現(xiàn)點星星消除小游戲
這篇文章主要為大家詳細介紹了JS實現(xiàn)點星星消除小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
js動態(tài)獲取子復選項并設計全選及提交的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s動態(tài)獲取子復選項并設計全選及提交的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
用javascript實現(xiàn)檢測指定目錄是否存在的方法
今天看到一篇關于onegreen被掛馬的代碼發(fā)現(xiàn)這個函數(shù)，它用js就可以檢測，制定的目錄或指定的文件是否存在，一般用來讀chm文件中的圖片來檢測，目錄的存在。高手就是不學好。
2008-01-01
BootStrap實現(xiàn)手機端輪播圖左右滑動事件
用bootstrap做出的項目輪播圖在手機端不能滑動，為此找了好多插件、框架。但是都不能和bootstrap良好的結合。經(jīng)過一番折騰終于找到了解決方法，下面小編通過本文給大家簡單介紹下
2016-10-10
詳解MVC如何使用開源分頁插件（shenniu.pager.js）
本文主要分享了shenniu.pager.js整個插件內(nèi)容，不多且清晰。具有很好的參考價值，需要的朋友一起來看下吧
2016-12-12
javascript 終止函數(shù)執(zhí)行操作
本篇文章主要是對javascript 終止函數(shù)執(zhí)行的操作方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
如何用純js實現(xiàn)返回頁面頂部功能
頁面返回頂部是在Web中常見的效果,在一個很長的頁面中,頁面返回頂部按鈕可以方便用戶回到頁面的頂部,增強用戶體驗,這篇文章主要給大家介紹了關于如何用純js實現(xiàn)返回頁面頂部功能的相關資料,需要的朋友可以參考下
2024-06-06
Bootstrap作品展示站點實戰(zhàn)項目2
這篇文章主要為大家分享了Bootstrap作品展示站點實戰(zhàn)項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
JavaScript中常見內(nèi)置函數(shù)用法示例
這篇文章主要介紹了JavaScript中常見內(nèi)置函數(shù)用法,結合實例形式分析了JavaScript常用內(nèi)置函數(shù)的功能、參數(shù)、使用方法及相關操作注意事項,需要的朋友可以參考下
2018-05-05
一文總結JS中邏輯運算符的特點
在JavaScript的眾多運算符里,提供了三個邏輯運算符&&、||和!,下面這篇文章主要給大家介紹了關于JS中邏輯運算符的特點,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-03-03