js实现轮播图

qq_41898129

于 2018-07-29 23:39:00 发布

阅读量131

点赞数

分类专栏： JS 文章标签： JS

本文链接：https://blog.csdn.net/qq_41898129/article/details/81277268

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一个简单的JS实现的轮播图

HTML:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>轮播图</title>
       <link rel="stylesheet" href="css/lunbo.css" />
       <script type="text/javascript" src="js/lunbo.js" ></script>
   </head>
   <body>
       <div id="wrapprer">
           <div class="image">
               <img src="img/ad1.jpg" id="select">
           </div>
           <div class="control" id="control">
               <ul>
                   <li class="light-on" οnmοuseοver="omo(1)" οnmοuseοut="omou(1)"></li>
                   <li class="light-on" οnmοuseοver="omo(2)" οnmοuseοut="omou(2)"></li>
                   <li class="light-on" οnmοuseοver="omo(3)" οnmοuseοut="omou(3)"></li>
                   <li class="light-on" οnmοuseοver="omo(4)" οnmοuseοut="omou(4)"></li>
                   <li class="light-on" οnmοuseοver="omo(5)" οnmοuseοut="omou(5)"></li>
               </ul>
           </div>
       </div>
   </body>
</html>

CSS:

body{
   margin: 0;
   padding: 0;
}
#wrapprer{
   width: 790px;
   height: 340px;
   margin: 200px auto;
}
ul{
    text-decoration: none;
   position: absolute;
   top: 500px;
   left: 630px;
}
.control ul li{
   list-style: none;
   display: inline-block;
   width: 30px;
   height: 7px;
   margin-right: 22px;
   background-color: white;
   border: 1px solid gray;
}

JS:var timer = window.setTimeout("omou(2)",3000);//自动切换到第二张图,时间3s
function omou(i){
//大于5时返回第一张图
   if(i>5){
       i=1;
   }
//获取图片的路径
   document.getElementById("select").src = 'img/ad' + i + '.jpg';
   i++;//自加一直加
   timer = window.setTimeout("omou(" + i + ")",3000);//切换到第几章图片,覆盖外部定时器
}
function omo(i){
   document.getElementById("light-on").src = 'img/ad' + i + '.jpg'//鼠标位于第几个li就显示第几张图
   clearTimeout(timer)//清除定时器,关闭轮播
}

qq_41898129

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现轮播图

一个简单的JS实现的轮播图HTML:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播图&lt;/title&gt; &lt;link rel="stylesheet"
复制链接

扫一扫