水平菜单重叠图像滑块

我在对齐图像滑块下面的水平菜单时遇到问题。如果我只有一个图像而不是滑块，则菜单可以正确调整（垂直），但是当我为滑块添加代码时，菜单将一直移动到顶部，并且不会保持在图像滑块下方。我试着改变页边距，它确实将菜单向下移动，但如果我垂直增加屏幕的大小，它不会停留在图像的下方。以下是我的代码和发生的事情的图像，以及我想要的样子（绿箭）。水平菜单重叠图像滑块

<html> 
<head> 
    <!-- Include meta tag to ensure proper rendering and touch zooming --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Include jQuery Mobile stylesheets --> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <!-- Include the jQuery library --> 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script> 
     $(document).bind('mobileinit',function(){ 
      $.mobile.changePage.defaults.changeHash = false; 
      $.mobile.hashListeningEnabled = false; 
      $.mobile.pushStateEnabled = false; 
     }); 
    </script> 
    <!-- Include the jQuery Mobile library --> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 

<style> 
    /*image settings*/ 
    img { 
     width: 100% !important; 
     height: 30%; 
     background-size:cover; 
     filter:grayscale(100%); 
     -webkit-filter: grayscale(100%); 
    } 


    #slideshow { 
     position: relative; 
     box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    } 

    #slideshow > div { 
     position: absolute; 
     width: 100% !important; 
    } 

</style> 

<body> 
    <div data-role="page" id="pageone"> 
     <div data-role="header"> 
      <h1>Page Title</h1> 
     </div> 

     <div id="slideshow">  
      <div><img src="http://www.eldeber.com.bo//uploads/2016/02/07/56b7505ada84c.jpeg"></div> 
      <div><img src="http://www.eldeber.com.bo//uploads/2016/03/06/56dce62c5c5e3.jpeg"></div> 
     </div> 

     <div class="categories" > 
      <ul>      
       <li><span><a href="" data-role="button" data-inline="true" >Headlines</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >Business</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >Sports</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true">Entertainment</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >Technology</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >World</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >Local</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >Politics</a></span></li>      
      </ul>    
     </div> 




     <div data-role="main" class="ui-content"> 

     </div> 

     <div data-role="footer" data-position="fixed" data-tap-toggle="false" > 
      <h1>Footer Text</h1> 
     </div> 
    </div> 
</body> 
<script> 
    //Slideshow Settings 
    $("#slideshow > div:gt(0)").hide(); 

    setInterval(function() { 
     $('#slideshow > div:first') 
     .fadeOut(2000) 
     .next() 
     .fadeIn(2000) 
     .end() 
     .appendTo('#slideshow'); 
    }, 5000); 

    //Horizontal Scrolling Start 
    $(function(){   
     var step = 1; 
     var current = 0; 
     var maximum = $(".categories ul li").size(); 
     var visible = 2; 
     var speed = 500; 
     var liSize = 120; 
     var height = 60;  
     var ulSize = liSize * maximum; 
     var divSize = liSize * visible; 

     $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
     $(".categories ul li").css("list-style","none").css("display","inline"); 
     $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px"); 

     $(".categories").swipeleft(function(event){ 
      if(current + step < 0 || current + step > maximum - visible) {return; } 
      else { 
       current = current + step; 
       $('.categories ul').animate({left: -(liSize * current)}, speed, null); 
      } 
      return false; 
     }); 

     $(".categories").swiperight(function(){ 
      if(current - step < 0 || current - step > maximum - visible) {return; } 
      else { 
       current = current - step; 
       $('.categories ul').animate({left: -(liSize * current)}, speed, null); 
      } 
      return false; 
     });   
    }); 
    //Horizontal Scrolling End 
</script>

来源

2016-03-07 speedracer2003

忘了我以前说过......

我看到它的JavaScript/jQuery代码，他是怎么做的。会发生什么，当它运行滑块时，他会更改一些javascript值，所以我需要在代码中添加一些细节。

我改变了一些值，所以我会先快速解释，然后显示结果。

我将Height var的值更改为210，因为如果不这样做，div将被隐藏。现在更改高度值会更改图像大小和按钮的位置。

我加入其中一个设置IMG由VAR定义的大小的高度的新行，因为它遵循：$("img").css("height",height-60)

我添加新的代码行，改变了顶部位置，移动在div正确/预期位置：$(".categories ul").css("top", height - 60)

这里去你的（新）代码：

<html> 
<head> 
    <!-- Include meta tag to ensure proper rendering and touch zooming --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Include jQuery Mobile stylesheets --> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <!-- Include the jQuery library --> 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script> 
     $(document).bind('mobileinit',function(){ 
      $.mobile.changePage.defaults.changeHash = false; 
      $.mobile.hashListeningEnabled = false; 
      $.mobile.pushStateEnabled = false; 
     }); 
    </script> 
    <!-- Include the jQuery Mobile library --> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 

<style> 
    /*image settings*/ 
    img { 
     width: 100% !important; 
     /*height: 30%;*/ 
     background-size:cover; 
     filter:grayscale(100%); 
     -webkit-filter: grayscale(100%); 
    } 


    #slideshow { 
     position: relative; 
     box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    } 

    #slideshow > div { 
     position: absolute; 
     width: 100% !important; 
    } 

</style> 

<body> 
    <div data-role="page" id="pageone"> 
     <div data-role="header"> 
      <h1>Page Title</h1> 
     </div> 

     <div id="slideshow">  
      <div><img src="http://www.eldeber.com.bo//uploads/2016/02/07/56b7505ada84c.jpeg"></div> 
      <div><img src="http://www.eldeber.com.bo//uploads/2016/03/06/56dce62c5c5e3.jpeg"></div> 
     </div> 

     <div class="categories" > 
      <ul>      
       <li><span><a href="" data-role="button" data-inline="true" >Headlines</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >Business</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >Sports</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true">Entertainment</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >Technology</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >World</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >Local</a></span></li> 
       <li><span><a href="" data-role="button" data-inline="true" >Politics</a></span></li>      
      </ul>    
     </div> 




     <div data-role="main" class="ui-content"> 

     </div> 

     <div data-role="footer" data-position="fixed" data-tap-toggle="false" > 
      <h1>Footer Text</h1> 
     </div> 
    </div> 
</body> 
<script> 
    //Slideshow Settings 
    $("#slideshow > div:gt(0)").hide(); 

    setInterval(function() { 
     $('#slideshow > div:first') 
     .fadeOut(2000) 
     .next() 
     .fadeIn(2000) 
     .end() 
     .appendTo('#slideshow'); 
    }, 5000); 

    //Horizontal Scrolling Start 
    $(function(){   
     var step = 1; 
     var current = 0; 
     var maximum = $(".categories ul li").size(); 
     var visible = 2; 
     var speed = 500; 
     var liSize = 120; 
     var height = 210; //changed 
     var ulSize = liSize * maximum; 
     var divSize = liSize * visible; 

     $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
     $(".categories ul li").css("list-style","none").css("display","inline"); 
     $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px"); 
     $(".categories ul").css("top",height-60); //added 
     $("img").css("height",height-60); //added 

     $(".categories").swipeleft(function(event){ 
      if(current + step < 0 || current + step > maximum - visible) {return; } 
      else { 
       current = current + step; 
       $('.categories ul').animate({left: -(liSize * current)}, speed, null); 
      } 
      return false; 
     }); 

     $(".categories").swiperight(function(){ 
      if(current - step < 0 || current - step > maximum - visible) {return; } 
      else { 
       current = current - step; 
       $('.categories ul').animate({left: -(liSize * current)}, speed, null); 
      } 
      return false; 
     });   
    }); 
    //Horizontal Scrolling End 
</script>

来源

2016-03-07 20:16:20

感谢您的快速反应。我试过，但是当图像切换时，他们两个同时出现（一个在另一个）。 – speedracer2003

啊，我现在看到了......好吧，我会更好地尝试一下，只需一秒。 –

它就是这样。我改变了一些javascript值。希望它现在有效 –

水平菜单重叠图像滑块

回答

相关问题