還是先來看看效果圖：
?通過效果圖我們先理一下思路：
首先就是需要幾張圖片，但只有一張是顯示在我們眼前的
第二步：把一張圖片分成幾等份，這樣點(diǎn)擊轉(zhuǎn)換的時(shí)候就會(huì)分開轉(zhuǎn)
第三步：就是實(shí)現(xiàn)點(diǎn)擊按鈕切換下一張。
HTML部分
HTML部分首先我們需要一個(gè)盒子顯示圖片，然后在盒子里裝入圖片，你想裝幾張圖片就可以寫幾個(gè)li,除了圖片我們還需要一個(gè)按鈕來點(diǎn)擊。
一個(gè)li的圖片效果如圖所示：
div是當(dāng)你點(diǎn)擊下一張的時(shí)候一個(gè)div代表li里的一張圖片
?代碼如下：
<div class="box">
<ul>
<!-- 一個(gè)li代表一張圖片的四分之一 -->
<li>
<!-- 一個(gè)div代表一張圖片 -->
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
</ul>
</div>
<!-- 按鈕 -->
<input type="button" value="下一張" class="btn">CSS部分
css部分就是設(shè)置樣式了，首先就是先給盒子一個(gè)寬高，盒子是裝顯示一張圖片的，接下來就是li了，給li設(shè)置絕對(duì)定位，不然圖片不會(huì)對(duì)齊的。
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
/* 給盒子設(shè)置寬高，用于顯示一張圖片的 */
.box{
position: relative;
width: 600px;
height: 360px;
margin: 80px auto;
border: 1px solid;
}
.box ul li{
position: absolute;
top: 0;
width: 150px;
height: 360px;
/* 讓轉(zhuǎn)換的子元素位于3D轉(zhuǎn)換空間中 */
transform-style: preserve-3d;
perspective: 50000px;
/* 過渡效果 */
transition: all 1s ease 0s;
}
/* 設(shè)置li的左邊距和延遲時(shí)間*/
.box ul li:nth-child(1){
left: 0;
transition-delay: 0s;
}
.box ul li:nth-child(2){
left: 150px;
transition-delay: 0.1s;
}
.box ul li:nth-child(3){
left: 300px;
transition-delay: 0.2s;
}
.box ul li:nth-child(4){
left: 450px;
transition-delay: 0.3s;
}
/* 設(shè)置div */
.box ul li div{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* 圖片大小 */
background-size: 600px 360px;
}
/* 設(shè)置圖片 旋轉(zhuǎn)一次90度*/
.box ul li div:nth-child(1){
background-image: url(./img/ruili_img3.jpg);
transform: rotateX(0deg) translateZ(180px);
}
.box ul li div:nth-child(2){
background-image: url(./img/ruili_img5.jpg);
transform: rotateX(90deg) translateZ(180px);
}
.box ul li div:nth-child(3){
background-image: url(./img/ruili_img6.jpg);
transform: rotateX(180deg) translateZ(180px);
}
.box ul li div:nth-child(4){
background-image: url(./img/ruili_img7.jpg);
transform: rotateX(270deg) translateZ(180px);
}
/*
background-position:設(shè)置或檢索對(duì)象的背景圖像的位置，必須要先制定background-image屬性
一個(gè)代表橫坐標(biāo)，一個(gè)代表縱坐標(biāo)
*/
.box ul li:nth-child(1) div{
background-position: 0 0 ;
}
.box ul li:nth-child(2) div{
background-position: -150px 0 ;
}
.box ul li:nth-child(3) div{
background-position: -300px 0 ;
}
.box ul li:nth-child(4) div{
background-position: -450px 0 ;
}
/* 設(shè)置按鈕 */
.btn{
display: block;
margin: 0 auto;
}
</style>Jquery部分
這里需要注意的是，如果你不設(shè)置一個(gè)開過和定時(shí)器，當(dāng)你點(diǎn)擊下一張時(shí)點(diǎn)擊一次沒問題，但是連續(xù)點(diǎn)擊就會(huì)出現(xiàn)一點(diǎn)bug，所以我加了一個(gè)開關(guān)思想，只有一張圖片完整的呈現(xiàn)在眼前后，下一張圖片才能出來。
<script src="./js/jquery-1.11.3.js"></script>
<script>
var btn = $('.btn')
var lis = $('.box ul li')
// 角度
var deg = 0
// 開關(guān)
var lock = false
// 按鈕點(diǎn)擊事件
btn.click(function(){
if(lock) return
lock = true
// 點(diǎn)擊一次角度-90度
deg -= 90
// li的樣式改變
lis.css({
"transform":"rotateX(" + deg + "deg)"
})
// 設(shè)置延時(shí)定時(shí)器
var timeout = (1 + 0.1 * lis.length) * 1000
setTimeout(function(){
lock = false
},timeout)
})
</script>整體代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>輪播圖</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
/* 給盒子設(shè)置寬高，用于顯示一張圖片的 */
.box{
position: relative;
width: 600px;
height: 360px;
margin: 80px auto;
border: 1px solid;
}
.box ul li{
position: absolute;
top: 0;
width: 150px;
height: 360px;
/* 讓轉(zhuǎn)換的子元素位于3D轉(zhuǎn)換空間中 */
transform-style: preserve-3d;
perspective: 50000px;
/* 過渡效果 */
transition: all 1s ease 0s;
}
/* 設(shè)置li的左邊距和延遲時(shí)間*/
.box ul li:nth-child(1){
left: 0;
transition-delay: 0s;
}
.box ul li:nth-child(2){
left: 150px;
transition-delay: 0.1s;
}
.box ul li:nth-child(3){
left: 300px;
transition-delay: 0.2s;
}
.box ul li:nth-child(4){
left: 450px;
transition-delay: 0.3s;
}
/* 設(shè)置div */
.box ul li div{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* 圖片大小 */
background-size: 600px 360px;
}
/* 設(shè)置圖片 旋轉(zhuǎn)一次90度*/
.box ul li div:nth-child(1){
background-image: url(./img/ruili_img3.jpg);
transform: rotateX(0deg) translateZ(180px);
}
.box ul li div:nth-child(2){
background-image: url(./img/ruili_img5.jpg);
transform: rotateX(90deg) translateZ(180px);
}
.box ul li div:nth-child(3){
background-image: url(./img/ruili_img6.jpg);
transform: rotateX(180deg) translateZ(180px);
}
.box ul li div:nth-child(4){
background-image: url(./img/ruili_img7.jpg);
transform: rotateX(270deg) translateZ(180px);
}
/*
background-position:設(shè)置或檢索對(duì)象的背景圖像的位置，必須要先制定background-image屬性
一個(gè)代表橫坐標(biāo)，一個(gè)代表縱坐標(biāo)
*/
.box ul li:nth-child(1) div{
background-position: 0 0 ;
}
.box ul li:nth-child(2) div{
background-position: -150px 0 ;
}
.box ul li:nth-child(3) div{
background-position: -300px 0 ;
}
.box ul li:nth-child(4) div{
background-position: -450px 0 ;
}
/* 設(shè)置按鈕 */
.btn{
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<ul>
<!-- 一個(gè)li代表一張圖片的四分之一 -->
<li>
<!-- 一個(gè)div代表一張圖片 -->
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
</ul>
</div>
<!-- 按鈕 -->
<input type="button" value="下一張" class="btn">
<script src="./js/jquery-1.11.3.js"></script>
<script>
var btn = $('.btn')
var lis = $('.box ul li')
// 角度
var deg = 0
// 開關(guān)
var lock = false
// 按鈕點(diǎn)擊事件
btn.click(function(){
if(lock) return
lock = true
// 點(diǎn)擊一次角度-90度
deg -= 90
// li的樣式改變
lis.css({
"transform":"rotateX(" + deg + "deg)"
})
// 設(shè)置延時(shí)定時(shí)器
var timeout = (1 + 0.1 * lis.length) * 1000
setTimeout(function(){
lock = false
},timeout)
})
</script>
</body>
</html>這樣寫的話我們會(huì)發(fā)現(xiàn)其實(shí)有的數(shù)據(jù)都是固定的，想要改的話很麻煩，下面這種方法是使用jquery渲染的方式現(xiàn)實(shí)，這樣改數(shù)據(jù)就很簡單了，并且代碼量也少一點(diǎn)。
?????就是把數(shù)據(jù)通過渲染的方式寫出來，而且這種方法也更方便，比如把count改成40，就會(huì)一張圖片分成40等份，切換下一張圖片的時(shí)候就會(huì)40個(gè)切換，而不是四個(gè)了。文章來源：http://www.zghlxwxcb.cn/news/detail-720341.html
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>輪播圖</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
/* 給盒子設(shè)置寬高，用于顯示一張圖片的 */
.box{
position: relative;
width: 600px;
height: 360px;
margin: 80px auto;
/* border: 1px solid; */
}
.box ul li{
position: absolute;
top: 0;
width: 150px;
height: 360px;
/* 讓轉(zhuǎn)換的子元素位于3D轉(zhuǎn)換空間中 */
transform-style: preserve-3d;
perspective: 50000px;
/* 過渡效果 */
transition: all 1s ease 0s;
}
/* 設(shè)置div */
.box ul li div{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* 圖片大小 */
background-size: 600px 360px;
}
.box ul li div:nth-child(1){
background-image: url(./img/ruili_img3.jpg);
transform: rotateX(0deg) translateZ(180px);
}
.box ul li div:nth-child(2){
background-image: url(./img/ruili_img5.jpg);
transform: rotateX(90deg) translateZ(180px);
}
.box ul li div:nth-child(3){
background-image: url(./img/ruili_img6.jpg);
transform: rotateX(180deg) translateZ(180px);
}
.box ul li div:nth-child(4){
background-image: url(./img/ruili_img7.jpg);
transform: rotateX(270deg) translateZ(180px);
}
/* 設(shè)置按鈕 */
.btn{
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<ul>
</ul>
</div>
<!-- 按鈕 -->
<input type="button" value="下一張" class="btn">
<script src="./js/jquery-1.11.3.js"></script>
<script>
var box = $('.box')
var ul = $('.box ul')
// 設(shè)置一張圖片分為幾等份
var count = 4
// 持續(xù)時(shí)間
var duration = 1
// 延遲時(shí)間
var delay = 0.1
// 圖片寬度
var width = box.width()
// li的寬度
var liWidth = width / count
// 渲染數(shù)據(jù)
for(let i = 0;i < count;i++){
var li = $("<li><div></div><div></div><div></div><div></div></li>")
// 設(shè)置li的樣式
li.css({
"width": liWidth,
"left": i * liWidth + 'px',
"transition-delay":i * delay + 's',
"transition-duration":duration + 's',
}).children().css('background-position',-i * liWidth + 'px 0')
ul.append(li)
}
var btn = $('.btn')
var lis = $('.box ul li')
// 角度
var deg = 0
// 開關(guān)
var lock = false
// 按鈕點(diǎn)擊事件
btn.click(function(){
if(lock) return
lock = true
// 點(diǎn)擊一次角度-90度
deg -= 90
// li的樣式改變
lis.css({
"transform":"rotateX(" + deg + "deg)"
})
// 設(shè)置定時(shí)器
var timeout = (duration + delay * count) * 1000
setTimeout(function(){
lock = false
},timeout)
})
</script>
</body>
</html>???文章來源地址http://www.zghlxwxcb.cn/news/detail-720341.html
到了這里，關(guān)于使用html+css+jquery實(shí)現(xiàn)3D輪播圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
