关于图片轮播图的一个简单实例 以及实例中发现问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于图片轮播图的一个简单实例 以及实例中发现问题相关的知识，希望对你有一定的参考价值。
1.最近在学习JS的过程中，为了巩固水平做了一个简单的轮播图，以及在做的过程中发现一些问题（未解决！希望可以有大佬可以解释这个问题）2.代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.wai{
width: 1000px;
height: 400px;
border: 10px solid grey;
margin: 50px auto;
position: relative;
}//定义外边固定框
.tu{
width: 300px;
height: 200px;
position: absolute;
}//给轮播图整体设计样式
#one{
background-color: #70ff5d;
left: 350px;
top: 80px;
z-index: 5;
}
#two{
background-color: #4678ff;
left: 0px;
top: 60px;
z-index: 3;
}
#three{
background-color: #36ff7c;
left: 150px;
top: 50px;
z-index: 1;
}
#four{
background-color: #ff70d0;
left: 350px;
top: 30px;
z-index: 0;
}
#five{
background-color: #ffd942;
left:550px;
top: 40px;
z-index: 2;
}
#six{
background-color: #82ff87;
left: 700px;
top: 70px;
z-index: 4;
}
#seven{
background-color: rgba(112, 255, 93, 0);
left: 350px;
top: 80px;
z-index: 5;
}
#ba{
background-color: rgba(112, 255, 93, 0);
left: 350px;
top: 80px;
z-index: 5;
}//one~ba 给轮播图逐个设计样式
.button{
position: absolute;
left: 0px;
top: 150px;
width: 30px;
height: 80px;
z-index: 4;
font-size: 30px;
}
.button1{
position: absolute;
right: 0px;
top: 150px;
width: 30px;
height: 80px;
z-index: 4;
font-size: 30px;
}//给绑定事件的按钮设计样式
.wai>div>img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="wai">//固定框
<div class="tu" id="one"><img src="./image/timg.jpg" alt="" ></div>//轮播图
<div class="tu" id="two"><img src="./image/timg1.jpg" alt="" ></div>//轮播图
<div class="tu" id="three"><img src="./image/timg2.jpg" alt="" ></div>//轮播图
<div class="tu" id="four"><img src="./image/timg3.jpg" alt="" ></div>//轮播图
<div class="tu" id="five"><img src="./image/timg4.jpg" alt="" ></div>//轮播图
<div class="tu" id="six"><img src="./image/timg5.jpg" alt="" ></div>//轮播图
<div class="tu" id="seven"></div>
<div class="tu" id="ba"></div>
</div>
<script>
var tu=document.getElementsByClassName("tu");//获取轮播图的属性
var a=document.getElementById("one");//获取轮播图的属性
var b=document.getElementById("two");//获取轮播图的属性
var c=document.getElementById("three");//获取轮播图的属性
var d=document.getElementById("four");//获取轮播图的属性
var e=document.getElementById("five");//获取轮播图的属性
var f=document.getElementById("six");//获取轮播图的属性
var g=document.getElementById("seven");//获取轮播图的属性
var h=document.getElementById("ba");//获取轮播图的属性
var tu1=[];
tu1[0]=window.getComputedStyle(a);//获取轮播图的样式
tu1[1]=window.getComputedStyle(b);//获取轮播图的样式
tu1[2]=window.getComputedStyle(c);//获取轮播图的样式
tu1[3]=window.getComputedStyle(d);//获取轮播图的样式
tu1[4]=window.getComputedStyle(e);//获取轮播图的样式
tu1[5]=window.getComputedStyle(f);//获取轮播图的样式
tu1[6]=window.getComputedStyle(g);//获取轮播图的样式
tu1[7]=window.getComputedStyle(h);//获取轮播图的样式
timer=setInterval(function (){
for(var i=0;i<tu1.length;i++) {
tu1.index=i;
tu[i].style.left =parseInt(tu1[i+1].left)+"px";
tu[i].style.top = parseInt(tu1[i+1].top)+"px";
tu[i].style.zIndex =parseInt(tu1[i+1].zIndex);
if(i==6){
tu[i].style.left =parseInt(tu1[0].left)+"px";
tu[i].style.top = parseInt(tu1[0].top)+"px";
tu[i].style.zIndex =parseInt(tu1[0].zIndex);
}
}//添加计时器，让轮播图自动旋转
},1000);
var button=document.createElement("button");//创建按钮元素
button.className="button";
button.innerHTML="<";
document.getElementsByClassName("wai")[0].appendChild(button);//插入按钮元素
var button1=document.createElement("button");
button1.className="button1";
button1.innerHTML=">";
document.getElementsByClassName("wai")[0].appendChild(button1);
var wai=document.getElementsByClassName("wai");button1.onmouseover=function () {
clearInterval(timer);
}
button.onmouseover=function () {
clearInterval(timer);
}//给按钮添加进入事件
button1.onclick=function (){
setTimeout(function (){
for(var i=0;i<tu1.length;i++) {
tu1.index=i;
tu[i].style.left =parseInt(tu1[i+1].left)+"px";
tu[i].style.top = parseInt(tu1[i+1].top)+"px";
tu[i].style.zIndex =parseInt(tu1[i+1].zIndex);
if(i==6){
tu[i].style.left =parseInt(tu1[0].left)+"px";
tu[i].style.top = parseInt(tu1[0].top)+"px";
tu[i].style.zIndex =parseInt(tu1[0].zIndex);
}
}
},1);
}//给弯扭添加点击事件
button.onclick=function (){
setTimeout(function (){
for(var i=0;i<tu1.length;i++) {
tu1.index=i;
tu[i].style.left =parseInt(tu1[i+1].left)+"px";
tu[i].style.top = parseInt(tu1[i+1].top)+"px";
tu[i].style.zIndex =parseInt(tu1[i+1].zIndex);
if(i==6){
tu[i].style.left =parseInt(tu1[0].left)+"px";
tu[i].style.top = parseInt(tu1[0].top)+"px";
tu[i].style.zIndex =parseInt(tu1[0].zIndex);
}
}
},1);
}//给弯扭添加点击事件
button1.onmouseout=function (){
setInterval(function (){
for(var i=0;i<tu1.length;i++) {
tu1.index=i;
tu[i].style.left =parseInt(tu1[i+1].left)+"px";
tu[i].style.top = parseInt(tu1[i+1].top)+"px";
tu[i].style.zIndex =parseInt(tu1[i+1].zIndex);
if(i==6){
tu[i].style.left =parseInt(tu1[0].left)+"px";
tu[i].style.top = parseInt(tu1[0].top)+"px";
tu[i].style.zIndex =parseInt(tu1[0].zIndex);
}
}
},1000);
}//给按钮添加鼠标离开事件
button.onmouseout=function (){
setInterval(function (){
for(var i=0;i<tu1.length;i++) {
tu1.index=i;
tu[i].style.left =parseInt(tu1[i+1].left)+"px";
tu[i].style.top = parseInt(tu1[i+1].top)+"px";
tu[i].style.zIndex =parseInt(tu1[i+1].zIndex);
if(i==6){
tu[i].style.left =parseInt(tu1[0].left)+"px";
tu[i].style.top = parseInt(tu1[0].top)+"px";
tu[i].style.zIndex =parseInt(tu1[0].zIndex);
}
}
},1000);
}</script>
</body>
</html>
3.发现问题……在自动旋转设置的过程中，将第一个轮播图的样式给最后一个轮播图后，在经过一圈的旋转，轮播图全部消失，而给之后添加多余的轮播图之后，效果实现，可以循环旋转且每个轮播图不会消失。
4.提出问题？为什么添加多余的轮播图后旋转效果实现，不添加多余轮播图，所有轮播图旋转一周后逐个消失隐藏。
以上是关于关于图片轮播图的一个简单实例 以及实例中发现问题的主要内容，如果未能解决你的问题，请参考以下文章