简析如何用js实现简单轮播

代码：

!DOCTYPE htML>
    html>
    head>
    meta charset="utf-8" />
    tITle>
    /title>
    style type="text/css">
.imgbox{
    width: 100%;
    height:400px;
    background-color: black;
    transform: 1s;
}
.img{
    width: 100%;
    height:100%;
    background-image: url(img/37fa7b724f5c49cd8c2d0efad885F1a8.jpeg);
    background-repeat:no-repeat;
    background-size:cover ;
}
.img0{
    width: 100%;
    height:100%;
    background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
    background-repeat:no-repeat;
    background-Size:100% ;
}
.img1{
    width: 100%;
    height:100%;
    background-image: url(img/5572568_110213373115_2.jpg);
    background-repeat:no-repeat;
    background-size:100% ;
}
.img2{
    width: 100%;
    height:100%;
    background-image: url(img/5875f5fb7a8f8.jpg);
    background-repeat:no-repeat;
    background-size:100% ;
}
.img3{
    width: 100%;
    height:100%;
    background-image: url(img/980.jpg);
    background-repeat:no-repeat;
    background-size:100% ;
}
            ul{
    margin-left:-30px ;
    list-style-type: none;
    position: relative;
    margin-top: -100px;
    line-height: 50px;
}
ul li{
    float: left;
    width: 50px;
    height:50px;
    border:1px solid #000000;
    text-align: center;
    background-color: aliceblue;
}
.div{
    background-color: orange;
    line-height: 50px;
}
.div1{
    background-color: gainsboro;
    line-height: 50px;
}
    /style>
    script type="text/javascript">
    VAR i=0;
function imgbox(){
       i++;
  if(i4){
      document.getElementById("img").classname="img"+i;
  if(i==1){
      document.getElementById("one").className="div";
      document.getElementById("two").className="div1";
      document.getElementById("three").className="div1";
  }
  if(i==2){
         document.getElementById("one").className="div1";
         document.getElementById("two").className="div";
         document.getElementById("three").className="div1";
  }
  if(i==3){
         document.getElementById("one").className="div1";
         document.getElementById("two").className="div1";
         document.getElementById("three").className="div";
  }
 }
if(i==4){
    i=0;
    clearInterval('imgbox()');
}
}
    setInterval('imgbox()',1000);
    /script>
    /head>
    body>
    div class="imgbox">
    div class="img" id="img">
    /div>
    ul id="ul">
    li id="one">
    1/li>
    li id="two">
    2/li>
    li id="three">
    3/li>
    /ul>
    /div>
    /body>
    /html>
    

认识HTML

HTML，就是我们所说的网页，网页的文件格式就是.html格式。在我们眼里，它是一种超文本语言，不需要额外的编译或者处理，写好，打开，就是一个网页。

Html组成由许多标签组成如p> 、h> 、input> 、img> ......，还有一些语义化标签如header> 、footer> 、nav> ....。

什么是js:

js(JavaScript)一种直译式脚本语言。JavaScript脚本可直接放在HTML语言中，在支持js的浏览器上运行。广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。当在浏览网页时做了某种操作就产生一个事件,JavaScript所编写的程序可对相应的事件做出反应。

js定时器：定义定时器setInterval('imgbox()',1000); 每隔一秒执行一次imgbox方法， imgbox方法包含图片的改变，还有div颜色的改变

启用定时器

window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：

   window.setTimeout(code,millisec);
       window.setInterval(code,millisec);

其中，code可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法中的第二个参数是millisec，表示延时或者重复执行的毫秒数。

具体写法如下：

函数名，不带参数setTimeout (test,1000)；字符串，可以执行的代码setTimeout ('test()',1000)；匿名函数setTimeout (function(){ } ,1000)； 注：setInterval的用法与setTimeout一样

调用函数，带参数setTimeout ('test(参数)',1000)；

div布局：使用ul，li进行布局

修改样式如下：

ul{
    margin-left:-30px ;
    //据左部边距list-style-type: none;
    //去除默认ul样式position: relative;
    //采用相对定位margin-top: -100px;
    //据顶部边距line-height: 50px;
//行高}
ul li{
    float: left;
    //浮动width: 50px;
    height:50px;
    border:1px solid #000000;
    //边框text-align: center;
    //文字居中background-color: aliceblue;
}
    

Html结构：

div>
    div id="img">
    /div>
    ul id="ul">
    li id="one">
    1/li>
    li id="two">
    2/li>
    li id="three">
    3/li>
    /ul>
    /div>
    

Img为大的div盒子，img为图片，ul> 里面包含li为第几张图片。

以上就是简析如何用js实现简单轮播的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！