还是先来看看效果图:
通过效果图我们先理一下思路:
首先就是需要几张图片,但只有一张是显示在我们眼前的
第二步:把一张图片分成几等份,这样点击转换的时候就会分开转
第三步:就是实现点击按钮切换下一张。
HTML部分
HTML部分首先我们需要一个盒子显示图片,然后在盒子里装入图片,你想装几张图片就可以写几个li,除了图片我们还需要一个按钮来点击。
一个li的图片效果如图所示:
div是当你点击下一张的时候一个div代表li里的一张图片
代码如下:
<div class="box">
<ul>
<!-- 一个li代表一张图片的四分之一 -->
<li>
<!-- 一个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部分就是设置样式了,首先就是先给盒子一个宽高,盒子是装显示一张图片的,接下来就是li了,给li设置绝对定位,不然图片不会对齐的。
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
/* 给盒子设置宽高,用于显示一张图片的 */
.box{
position: relative;
width: 600px;
height: 360px;
margin: 80px auto;
border: 1px solid;
}
.box ul li{
position: absolute;
top: 0;
width: 150px;
height: 360px;
/* 让转换的子元素位于3D转换空间中 */
transform-style: preserve-3d;
perspective: 50000px;
/* 过渡效果 */
transition: all 1s ease 0s;
}
/* 设置li的左边距和延迟时间*/
.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;
}
/* 设置div */
.box ul li div{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* 图片大小 */
background-size: 600px 360px;
}
/* 设置图片 旋转一次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:设置或检索对象的背景图像的位置,必须要先制定background-image属性
一个代表横坐标,一个代表纵坐标
*/
.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 ;
}
/* 设置按钮 */
.btn{
display: block;
margin: 0 auto;
}
</style>
Jquery部分
这里需要注意的是,如果你不设置一个开过和定时器,当你点击下一张时点击一次没问题,但是连续点击就会出现一点bug,所以我加了一个开关思想,只有一张图片完整的呈现在眼前后,下一张图片才能出来。
<script src="./js/jquery-1.11.3.js"></script>
<script>
var btn = $('.btn')
var lis = $('.box ul li')
// 角度
var deg = 0
// 开关
var lock = false
// 按钮点击事件
btn.click(function(){
if(lock) return
lock = true
// 点击一次角度-90度
deg -= 90
// li的样式改变
lis.css({
"transform":"rotateX(" + deg + "deg)"
})
// 设置延时定时器
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;
}
/* 给盒子设置宽高,用于显示一张图片的 */
.box{
position: relative;
width: 600px;
height: 360px;
margin: 80px auto;
border: 1px solid;
}
.box ul li{
position: absolute;
top: 0;
width: 150px;
height: 360px;
/* 让转换的子元素位于3D转换空间中 */
transform-style: preserve-3d;
perspective: 50000px;
/* 过渡效果 */
transition: all 1s ease 0s;
}
/* 设置li的左边距和延迟时间*/
.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;
}
/* 设置div */
.box ul li div{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* 图片大小 */
background-size: 600px 360px;
}
/* 设置图片 旋转一次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:设置或检索对象的背景图像的位置,必须要先制定background-image属性
一个代表横坐标,一个代表纵坐标
*/
.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 ;
}
/* 设置按钮 */
.btn{
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<ul>
<!-- 一个li代表一张图片的四分之一 -->
<li>
<!-- 一个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
// 开关
var lock = false
// 按钮点击事件
btn.click(function(){
if(lock) return
lock = true
// 点击一次角度-90度
deg -= 90
// li的样式改变
lis.css({
"transform":"rotateX(" + deg + "deg)"
})
// 设置延时定时器
var timeout = (1 + 0.1 * lis.length) * 1000
setTimeout(function(){
lock = false
},timeout)
})
</script>
</body>
</html>
这样写的话我们会发现其实有的数据都是固定的,想要改的话很麻烦,下面这种方法是使用jquery渲染的方式现实,这样改数据就很简单了,并且代码量也少一点。
就是把数据通过渲染的方式写出来,而且这种方法也更方便,比如把count改成40,就会一张图片分成40等份,切换下一张图片的时候就会40个切换,而不是四个了。文章来源:https://www.toymoban.com/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;
}
/* 给盒子设置宽高,用于显示一张图片的 */
.box{
position: relative;
width: 600px;
height: 360px;
margin: 80px auto;
/* border: 1px solid; */
}
.box ul li{
position: absolute;
top: 0;
width: 150px;
height: 360px;
/* 让转换的子元素位于3D转换空间中 */
transform-style: preserve-3d;
perspective: 50000px;
/* 过渡效果 */
transition: all 1s ease 0s;
}
/* 设置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);
}
/* 设置按钮 */
.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')
// 设置一张图片分为几等份
var count = 4
// 持续时间
var duration = 1
// 延迟时间
var delay = 0.1
// 图片宽度
var width = box.width()
// li的宽度
var liWidth = width / count
// 渲染数据
for(let i = 0;i < count;i++){
var li = $("<li><div></div><div></div><div></div><div></div></li>")
// 设置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
// 开关
var lock = false
// 按钮点击事件
btn.click(function(){
if(lock) return
lock = true
// 点击一次角度-90度
deg -= 90
// li的样式改变
lis.css({
"transform":"rotateX(" + deg + "deg)"
})
// 设置定时器
var timeout = (duration + delay * count) * 1000
setTimeout(function(){
lock = false
},timeout)
})
</script>
</body>
</html>
文章来源地址https://www.toymoban.com/news/detail-720341.html
到了这里,关于使用html+css+jquery实现3D轮播图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!