程序博客网 > 如何启动蜂窝移动数据

图片轮播

来源：互联网发布：如何启动蜂窝移动数据编辑：程序博客网时间：2024/06/07 23:50

鼠标不移动到显示的数字上时，图片自己根据设定的时间轮流播放，当鼠标移到某一个显示数字上，显示该图片，并且停止播放。鼠标移开，图片继续从该图片播放

html代码：

<body>
       <div id="listImg">
           <img src="img/1.jpg" id="img"/>
           <ul>
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
               <li>6</li>
           </ul>
       </div>
   </body>

CSS代码：

<style>
           *{margin: 0px;padding: 0px;}
           #listImg{
               width: 500px;
               height: 300px;
               margin: 0px auto;
               padding: 2px;
               border: 1px solid #ccc;
           }
           #listImg li{
               list-style: none;
               float: left;
               width: 26px;
               height: 26px;
               line-height: 26px;
               border: 1px solid #999;
               text-align: center;
               margin: 3px;
           }
           .bg{
               background: #ccc;
               color: red;
               cursor: pointer;
           }
       </style>

JS代码：

<script>
           var i = 1;   //从第一张图片开始
           var croll = true;
           setInterval(function(){
               if(croll){
                       i++;
                   if(i==7){
                       i=1;
                   }
                   $("#img").attr("src","img/"+i+".jpg");
                   $("li:eq('+(i-1)+')").addClass("bg").siblings().removeClass("bg");

               }

           },2000);

           $(function(){
               $("li").hover(
                   function(){
                       croll = false;

                       $("#img").attr("src","img/"+$(this).html()+".jpg");
                       i=$(this).html();
                       $(this).addClass("bg");
                   },
                   function(){
                       croll = true;
                       $(this).removeClass("bg");
                   }
               )
           });

       </script>

阅读全文

0 0

如何启动蜂窝移动数据

如何启动蜂窝移动数据

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子不敢去医院怎么办怎么办英语怎么说国外理发怎么办计划赶不上变化怎么办企业转型员工怎么办冰箱外膜撕不掉怎么办冰箱膜没撕干净怎么办差价怎么办?英语怎么说脑部血管堵塞怎么办集装箱装不下怎么办甩箱了怎么办开票盘被锁了怎么办户口信息错误怎么办户口本登记错误怎么办身份证信息错误怎么办合同有错误怎么办门牌号码重复怎么办与别人发生冲突怎么办营业期限到期怎么办缺少资金怎么办越南单身证明怎么办胚芽停止发育怎么办韩国工作签证怎么办容易分心怎么办滴滴没接单怎么办经书字抄错了怎么办佛经抄错字怎么办金刚经抄错怎么办公证书盖章错误怎么办公证书怎么办副本滴滴订单少怎么办增值税发票盖错章怎么办税票失控怎么办支票盖章模糊怎么办支票背书盖错章怎么办没库存开票怎么办党费有小数怎么办党费小数点后怎么办 acd看图打不开怎么办 cad打不上汉字怎么办 ie卸载不了怎么办