关于图片轮播图的一个简单实例 以及实例中发现问题

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.提出问题？为什么添加多余的轮播图后旋转效果实现，不添加多余轮播图，所有轮播图旋转一周后逐个消失隐藏。

原文地址：http://blog.51cto.com/13696285/2117539

时间： 2024-12-22 20:58:35

关于图片轮播图的一个简单实例 以及实例中发现问题的相关文章

定时图片轮播图

先是HTML部分 <div id="alternate"> <ul class="img_list clear"> <li><a href="#"><img src="1.jpg" /></a></li> <li><a href="#"><img src="2.jpg" /&

图片轮播图插件的使用 unslider！！！

1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者intellij idea中搭建一个可以正常运行的web工程 3.在WEB-INF下创建一个jsp文件夹,jsp文件夹下创建一个lunbo.jsp,颜色标记的代码是需要注意的!在WebRoot下创建js和img文件夹,存放js和所需要的图片. 页面的代码: <%@ page language="ja

图片轮播图插件

闲来无事,自己搞了一个图片轮播的jQuery插件,话不多说,直接上代码咯!!!!! 1.HTML模块的代码很简单.写一个容器就可以了,之后往里面加入图片轮播的效果 <div class="index-banner" id="banner"></div> 2.样式代码 1 .index-banner { 2 position: relative; 3 width:1280px; 4 height: 461px; 5 margin:0 auto;

js实现图片轮播图（一）

一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content">   <!-- 总

安卓图片轮播图

最近自己根据领导要求app启动页面要放产品图片(以轮播的形式),方便用户查看,做了一个简单的demo,实现了基本图片轮播功能,亲测可用. csdn地址:https://download.csdn.net/download/qq_35702985/11545257 下面贴了几乎全部代码: MainActivity: String[] urls = getResources().getStringArray(R.array.url);List list = Arrays.asList(urls);i

js图片轮播图

/*焦点图*/        var Box='.carousel';//盒子        var Menu=$(Box+' .l_cursor li');//圆点菜单        var Con=$(Box+' .carouselChange li');//大图        var Text=$(Box+' .text li');//图注文字        var Prev=$(Box+' .Prev');//上一页        var Next=$(Box+' .next');//下

css3爆炸效果更换图片轮播图

思路:给一个div设置一个背景图片1.jpg,然后在这个div上面用两个for循环动态的创建一个列数为C行数为R数量的span,并给这些span设置宽高.定位并设置背景图片0.jpg,然后设置每个span的background-position,使这组span平铺在div上.当点击div时换图,换图的实现方法是循环每个span,以div的宽度的中线为定位线,让这组span随机进行transform,然后在结束的时候让span的透明度变为透明,并且瞬间拉回全部span到原始位置并更换span和di

JavaScript实现图片轮播图

<!DOCTYPE html><html> <head> <script > var time; function init(){ //设置定时操作 time=setInterval("show()",0); //3秒执行一次 setInterval("show1()",1000); } var num=1; function show1(){ if(num>4){ num=1; } var imageObj=d

原生js封装轮播图

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比叫好理解,其轮播图只是一个简单的效果,缺点没有写动画效果看起来比较生硬,优点简单好学,容易理解,非常实用 轮播图介绍 : 三张图片,图片下方有对应图片数量的三个指示点,左右有切换指示,左右指示可要可不要 HTML代码 <div id="mlBox"> <div id=&q