怎样写个从json中获取图片的背景图透明度轮播？ 财富值76

2016-10-30 17:27发布

站内问答 /
688 0 4

自己尝试写了下背景图透明度轮播，但是没有实现，调试器都打不开了

<html>     <head>         <meta charset="UTF-8">         <title></title>         <link rel="stylesheet" type="text/css" href="css/mimile.css"/>         <script type="text/javascript" src="js/jquery-1.12.3.js" ></script>         <script type="text/javascript" src="js/mimile.js" ></script>         <script type="text/javascript">                      </script>     </head>     <body> <div id="lunbo-box">             <ul id="lunbo">                              </ul>             <ul id="lunbo-list">                              </ul>         </div>     </body> </html> 下面是设置的css #lunbo-box{     width:776px ;     height: 401px;     margin: 0 auto;     position: relative;     /*background: ;*/ }  #lunbo {     width: 776px;     height: 401px;     position: absolute;     top: 0;     left: 0;      }                 #lunbo li, #lunbo img {                     width: 776px;                     height: 401px;                 }                 #lunbo li {                     position: absolute;                     left: 0;                     top: 0;                 }                                  #list2 {                     width: 776px;                     height: 401px;                     position: absolute;                     left: 0;                     bottom: 0;                 }                 #lunbo-list li, #lunbo-list img {                     width: 120px;                     height: 60px;                     float: left;                     border: 1px solid red;                     margin-right: 5px;                     cursor: pointer;                 }                                  #lunbo-list li {                     opacity: 0.3;                 }       .lunbo-active{     float: left;     width: 126px;     height: 40px;     line-height: 40px;     color: #ffffff;     font-size: 12px;     text-align: center;      } 在下面是jQuery $(function(){ $.getJSON("json/luobo.json",function(data){                  for (var i=0;i<data.length;i++) {             var obj=data[i];                 $("<li><img src="+obj.img+"/></li>").appendTo("#lunbo");                 $("<li><img src="+obj.name+"/></li>").appendTo("#lunbo-list");                 $("#lunbo-list li").addClass("lunbo-active");                 //如果是第一张图添加初始的class                 if (i == 0) {                             $("#lunbo-list li").first().addClass("hover");                 }                 var i=0;                 var timer=setInterval(function(){                     i++;                     move()                 },2000)                          }                  //动起来         function move(){         var ali=$("#lunbo");         var oli=$("#lunbo-list");         var ali1=$("#lunbo li")         var oli2=$("#lunbo-list li");                  var size = $("#lunbo-list li").size();//计算共有多少图                  if (i==size) {//这时是最后一张图，即将移动到第二张图             i=0;         }         //图片淡入淡出         ali1.eq(i).stop().fadeIn().siblings().stop().fadeOut();         //改变下面导航条的状态         oli2.eq(i).addClass("hover").siblings().removeClass("hover")         //下面导航的访问         oli2.hover(function(){                 var index=$(this).index()                 i=index;                 move()         });                           //鼠标移入时停止定时器         ali1.hover(function(){             clearInterval(timer)         },function(){             timer=setInterval(function(){                 i++;                 move();             },2000)         })         };                                         }) })
友情提示: 问题已经关闭,关闭后问题禁止继续编辑，回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
0条回答

一周热门 更多>