原生js怎么實(shí)現(xiàn)3D輪播圖-創(chuàng)新互聯(lián)
這篇文章給大家分享的是有關(guān)原生js怎么實(shí)現(xiàn)3D輪播圖的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
首先分析一下3D圖片輪播的功能需求：
和其它圖片輪播大體一致，無非就是點(diǎn)擊按鈕向左、右翻頁，點(diǎn)擊下方提示位置小點(diǎn)切換到小點(diǎn)表示對(duì)的位置頁（我是真的不知道那個(gè)小點(diǎn)叫什么名字，大家將就著聽吧）
上代碼：
基本代碼：
<!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代碼：
// 簡(jiǎn)單說一下我是怎么想的：1.分步實(shí)現(xiàn)，先實(shí)現(xiàn)圖片自己動(dòng)，在加其它的功能
// 2.每實(shí)現(xiàn)一個(gè)功能要立馬去測(cè)bug，因?yàn)榉诺胶竺婢驮诫y找了。
// 3.輪播向左，向右是兩個(gè)互相聯(lián)系的方法，需要找到彼此的關(guā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：圖片輪播離不開計(jì)時(shí)器，且個(gè)人覺得用setIntervar比較多
img_work();
function img_work() {
time = setInterval(function () {
img_workfirst('left', 0);//兩個(gè)參數(shù)，判斷向左還是向右輪播，索引
}, 1500);
}
// console.log(point.child);
function img_workfirst(left_right, cindex) {
// 這里面首先說一下css中寫好的默認(rèn)層關(guān)系：從第1張到第6張為別為 6 5 4 3 4 5，和頁面的布局有關(guān)
var firstpage = {//當(dāng)前頁的各種屬性
// 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') {
// 向左輪播為默認(rèn)輪播
for (var i = 0; i < imgae_div_child.length; i++) {
// for循環(huán)遍歷所有元素
if (i == imgae_div_child.length - 1) {
// 當(dāng)前頁的下一張為 最后一張（位置都是動(dòng)態(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 {
// 其它頁對(duì)應(yīng)為它前面元素的屬性
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;
// 將表示當(dāng)前頁的數(shù)據(jù)清空，防止bug（因?yàn)楫?dāng)前頁也是動(dòng)態(tài)變化的，需要?jiǎng)討B(tài)創(chuàng)建）
}
// console.log(new_point);
// 消除一些bug
window.onblur = function () {//窗口失焦時(shí)，計(jì)時(shí)器停止
clearInterval(time);
}
window.onfocus = function () {
img_work();//獲焦時(shí)開啟計(jì)時(shí)器
}
document.onselectstart = function () {//禁止用戶復(fù)制
return false;
}
block.οnmοuseenter=function(){//鼠標(biāo)進(jìn)入輪播圖時(shí)，兩個(gè)按鈕滑動(dòng)出來
clearInterval(time);
btn.children[1].className='marright';
btn.children[0].className='marleft';
}
block.οnmοuseleave=function(){//離開時(shí)和平時(shí)隱藏
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";
}
}
// 對(duì)應(yīng)的左右按鈕的點(diǎn)擊事件
btn.children[0].οnclick=function(event){
if(event.detail==1){//用于控制鼠標(biāo)的連擊，但是效果對(duì)于故意測(cè)試來說還是有所缺陷 下同
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';//動(dòng)畫完成
}
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;//判斷計(jì)算轉(zhuǎn)動(dòng)次數(shù)
if(this.index>oldindex){//所需頁在當(dāng)前頁的左（左右相對(duì)于下方點(diǎn)來說）
num=this.index-oldindex;
var timego=setInterval(function(){
num--;
if(num<0){
clearInterval(timego);
}
else{
img_workfirst('right',5)//因?yàn)榉较蜃兞耍韵乱豁摼蜑楫?dāng)前頁的上一頁，也就是cindex為5
}
},100);//動(dòng)畫時(shí)間縮短，優(yōu)化體驗(yàn)
}
else{//所需頁在當(dāng)前頁的左（左右相對(duì)于下方點(diǎn)來說）
num=Math.abs(this.index-oldindex);
var timego=setInterval(function(){
num--;
if(num<0){
clearInterval(timego);
}
else{
img_workfirst('left',0)
}
},100);
}
}
}關(guān)于出現(xiàn)的bug的一些總結(jié)：
1、注意左右的區(qū)分與聯(lián)系
2、注意連續(xù)點(diǎn)擊的bug
3、注意切換窗口，切換頁面，最小化等這些切換的bug
4、注意代碼格式，在js中寫css樣式時(shí)，要注意格式
感謝各位的閱讀！關(guān)于“原生js怎么實(shí)現(xiàn)3D輪播圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
本文名稱：原生js怎么實(shí)現(xiàn)3D輪播圖-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://bm7419.com/article38/didpsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、營(yíng)銷型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、虛擬主機(jī)、微信小程序、網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- Python基于geven如何實(shí)現(xiàn)文件字符串查找器的方法-創(chuàng)新互聯(lián)
- 怎么在ubuntu服務(wù)器中安裝python-創(chuàng)新互聯(lián)
- 網(wǎng)紅框架SpringBoot2.x之花式運(yùn)行項(xiàng)目-創(chuàng)新互聯(lián)
- PHP中如何實(shí)現(xiàn)深度優(yōu)先搜索算法-創(chuàng)新互聯(lián)
- tensorflow的Eagerexecution怎么創(chuàng)建-創(chuàng)新互聯(lián)
- URL地址中出現(xiàn)中文亂碼如何解決-創(chuàng)新互聯(lián)
- C#和C++的區(qū)別有哪些-創(chuàng)新互聯(lián)
- SEO優(yōu)化如何合理設(shè)置網(wǎng)站內(nèi)鏈結(jié)構(gòu)? 2013-06-25
- 網(wǎng)站內(nèi)鏈建設(shè)和優(yōu)化設(shè)置的意義 2016-02-14
- 南平網(wǎng)站設(shè)計(jì)：如何做好網(wǎng)站內(nèi)鏈建設(shè)？ 2020-12-02
- 創(chuàng)新互聯(lián)闡述網(wǎng)站內(nèi)鏈建設(shè)如何做好SEO優(yōu)化 2015-07-05
- 網(wǎng)站內(nèi)鏈應(yīng)如何布局才比較合理? 2023-04-08
- 青島網(wǎng)站建設(shè)做好網(wǎng)站內(nèi)鏈SEO優(yōu)化，真的可以晉升網(wǎng)站流量嗎？ 2023-01-11
- 網(wǎng)站內(nèi)鏈對(duì)SEO有什么重要 2017-01-28
- 網(wǎng)站內(nèi)鏈對(duì)我們網(wǎng)站有什么重要性 2016-10-10
- 網(wǎng)站內(nèi)鏈的5個(gè)小技巧 排名迅速提升 2021-05-01
- 網(wǎng)站內(nèi)鏈優(yōu)化的意義有哪些 2016-11-07
- 北京網(wǎng)站建設(shè)-淺談企業(yè)網(wǎng)站內(nèi)鏈建設(shè)指南 2021-11-11
- 濟(jì)寧信息推廣菏澤網(wǎng)站推廣網(wǎng)站內(nèi)鏈的設(shè)置對(duì)網(wǎng)站優(yōu)化排名的影響有哪些？ 2023-02-04