Question

我是j-query的新手。这可能非常令人尴尬，但我在查找如何使用完整背景图像创建滑块图像轮播时遇到了很多麻烦。我已经看过其他解决方案了，但是看起来你必须要有一个固定宽度的大小你要滑动的所有图片（例如div宽度为9000px）。但是，我觉得我可以使用某种类型的数组或索引函数，我可以使用循环来迭代某些东西来隐藏和显示。从基本的javascript到jquery的过渡是我无法调整的。如果有人能给我一些很好的建议或提示。这是我的代码如下。感谢

http://codepen.io/kevk87/pen/PPNPmg

    <main>

<div class="container">
<ul>  
  <li class="one"> 
  </li>
  <li class="two"> </li>
  <li class="three"></li>
  <li class="four"></li>
</ul>

  <div class="nav">
      <ul >
       <li class="first active"> </li>
      <li class="second"> </li>
       <li class="third"> </li>
      <li class="fourth"> </li>
      </ul>
  </div>
</div>
</ul>
</main>

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



ul {
  list-style:none;
  height:100%;
}
main, html, body{
  height:100%;
}

.container {
  height:100%;
  postion:relative;

}

.one {  
   height:100%;   background:url(http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature2.jpg) center center no-repeat fixed; 
   background-size:cover;

}  

.two {
  background: url(http://www.atilaminates.com/wp-content/uploads/2015/05/nature-wlk.jpeg) center center no-repeat fixed;
  height:100%; 
}
.three {
  background: url(http://php.drishinfo.com/photostudioone/wp-content/uploads/2014/11/nature-wallpaper-hd-1920x1080.jpg) center center no-repeat fixed;
  height:100%; 
}
.four {
  background: url(http://www.projecthappyhearts.com/wp-content/uploads/2015/04/green-nature-dual-monitor-other.jpg) center center no-repeat fixed;
  height:100%; 
}


.nav ul li {
  width:20px;
  background-color:white;
  height:20px;
  display:inline-block;
  margin-right:20px; 
}
.nav ul li:last-child {
  margin-right:0px;
}

.nav {
  position: absolute;
  bottom:100px;
  left:50%;
  transform:translate(-50%,-50%);
}

.nav ul .active{
  background-color:black;
}

.two, .three, .four {
  display:none;
}

的Javascript

//change active class

    $('.nav ul').click(function(){
  $(this).removeClass('active');  
    $(this).addClass('active');
});

//Click handlers to change image and active class


$('.first').click(function(){
    $('.one').show();
  $('.two').hide();
  $('.three').hide();
  $('.four').hide();
});


$('.second').click(function(){
    $('.two').show();
  $('.one').hide();
  $('.three').hide();
  $('.four').hide();
});

$('.third').click(function(){
    $('.three').show();
  $('.one').hide();
  $('.two').hide();
  $('.four').hide();
});

$('.fourth').click(function(){
    $('.four').show();
  $('.one').hide();
  $('.three').hide();
  $('.two').hide();
});

Answer 1

你走了。使用jquery函数的简洁版本。

http://jsfiddle.net/7erakxad/

Exception in thread "main" org.apache.avro.SchemaParseException: No field name: {"type":"map","values":"long"}
    at org.apache.avro.Schema.getRequiredText(Schema.java:1305)
    at org.apache.avro.Schema.parse(Schema.java:1192)
    at org.apache.avro.Schema$Parser.parse(Schema.java:965)
    at org.apache.avro.Schema$Parser.parse(Schema.java:932)
    at org.apache.avro.tool.SpecificCompilerTool.run(SpecificCompilerTool.java:73)
    at org.apache.avro.tool.Main.run(Main.java:84)
    at org.apache.avro.tool.Main.main(Main.java:73)

如何使用旋转木马隐藏和显示背景图像？

1 个答案: