效果图如下
主要构建想法:
1、html与css先将主体框架以及样式写出来,将图片一行排列,然后设置舞台元素的长宽,超出部分隐藏,使用transform: scale(0.5);
控制图片的大小
2、当基本样式写完后,要思考使用如何使其发生位置变换,由于学识微薄,使用改变类名的办法使其位置变化,同时使用定时器使其开始自动轮播
html代码
<div id="box1">
<ul>
<li class="li1"><img src="003.jpg" alt=""></li>
<li class="li2"><img src="005.jpg" alt=""></li>
<li class="li3"><img src="006.jpg" alt=""></li>
<li class="li4"><img src="ya1.gif" alt=""></li>
<li class="li5"><img src="ya2.gif" alt=""></li>
<li class="li6"><img src="ya3.jpg" alt=""></li>
</ul>
<div id="nav">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
CSS代码文章来源:https://www.toymoban.com/news/detail-784109.html
*{
list-style: none;
margin: 0;
padding:0;
}
img{
width: 500px;
height: 300px;
}
#box1{
width: 900px;
height: 800px;
position: relative;
margin: 20px auto;
overflow: hidden;
}
ul{
transform-style:preserve-3d ;
}
li{
position: absolute;
transition: all 0.5s linear;
}
.li1{
transform: translate(200px,0) scale(1);
z-index: 4;
}
.li2{
transform: translate(600px,0) scale(0.8);
z-index: 3;
}
.li3{
transform: translate(900px,0) scale(0.5);
z-index: 2;
}
.li4{
transform: translate(-600px,0) scale(0.1);
z-index: 1;
}
.li5{
transform: translate(-300px,0) scale(0.5);
z-index: 2;
}
.li6{
transform: translate(-50px,0) scale(0.8);
z-index: 3;
}
#nav{
position: absolute;
top: 330px;
}
#nav a{
width:10px;
height:10px;
display: inline-block;
background: #FF0000;
border-radius:50%;
margin: 0 5px;
opacity: 0.5;
}
#nav a:hover{
background: #000;
}
JS代码文章来源地址https://www.toymoban.com/news/detail-784109.html
window.onload = function(){
/*设置导航条按钮居中*/
var nav = document.getElementById('nav');
var box1 = document.getElementById('box1');
nav.style.left = (box1.offsetWidth - nav.offsetWidth)/2+'px';
// 图片的路径
var liArr=this.document.getElementsByTagName('li');
//索引
var index = 0;
//时间节点
var timer;
var allA = document.getElementsByTagName('a');
allA[index].style.background = '#000';
//点击a显示对应图片
for (var i = 0 ; i < allA.length ; i++) {
allA[i].num = i;
allA[i].onclick = function(){
clearInterval(timer);
index = this.num % liArr.length;
var li1 = (index+1)%liArr.length
var li2 = (index+2)%liArr.length
var li3 = (index+3)%liArr.length
var li4 = (index+4)%liArr.length
var li5 = (index+5)%liArr.length
//选中的a
setA();
liArr[index].className="li4";
liArr[li1].className="li5";
liArr[li2].className="li6";
liArr[li3].className="li1";
liArr[li4].className="li2";
liArr[li5].className="li3";
autoChange();
};
};
autoChange();
function setA(){
if(index > liArr.length ){
index = 0;
}
for(var i=0 ; i < allA.length ; i++) {
allA[i].style.background = '';
}
allA[index].style.background = '#000';
};
function autoChange(){
timer = setInterval(function(){
index++;
index = index % liArr.length;
var li1 = (index+1)%liArr.length
var li2 = (index+2)%liArr.length
var li3 = (index+3)%liArr.length
var li4 = (index+4)%liArr.length
var li5 = (index+5)%liArr.length
liArr[index].className="li1";
liArr[li1].className="li2";
liArr[li2].className="li3";
liArr[li3].className="li4";
liArr[li4].className="li5";
liArr[li5].className="li6";
setA();
},4000);
}
}
到了这里,关于实现简易3d轮播图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!