简易轮播图代码

最新推荐文章于 2023-06-01 19:33:26 发布

chifang4663

最新推荐文章于 2023-06-01 19:33:26 发布

阅读量129

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3020259/blog/1055786

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
       <style type="text/css">
           html,body{
               margin: 0px;
               padding: 0px;
           }
           ul,li{
               margin: 0px;
               padding: 0px;
               list-style: none;
           }
           ul,li{
               float: left;
           }
           ul{
               position: absolute;
               width:1112px;
           }
           div{
               position: relative;
               margin: 50px;
               width: 278px;
           height: 110px;
           overflow: hidden;

           }

       </style>
   </head>
   <body>
       <div id="">
           <ul id="oul">
           <li><img src="img/1.jpg"/></li>
           <li><img src="img/2.jpg" alt="" /></li>
           <li><img src="img/3.jpg" alt="" /></li>
           <li><img src="img/1.jpg" alt="" /></li>
       </ul>
       </div>
       <script type="text/javascript">
       function loopImg(){
           var i=1;
           setInterval(function(){
               if(i==4){
                   i=1;
                   $("#oul").css("left","0px");
               }
               $("#oul").animate({
                   left:-278*i,
               });
               i++;
           },3000)
       }
       //loopImg();

       function showHideIMg(){
           var j=0;
           setInterval(function(){
               for(var i=0;i<$("li").length;i++){
                       $($("li")[i]).hide();
               }
               $($("li")[j]).show();
               j++;
               if(j==3){
                   j=0;
               }
           },3000)

       }
       showHideIMg();
       </script>
   </body>
</html>