如何使用Angular JS將透明HTML表單放在背景中的滑動圖像頂部

Question

我已經創建了HTML頁面，將使用Spring MVC使它動態化。 我也是HTML，CSS，JS的新手，但我需要創建橫幅圖像，該圖像會隨着某些內部滑動。

我需要做以下事情：

Bannner圖像應以一定間隔滑動。
我需要將“固定HTML搜索”表單放在滑動圖像的頂部。
目前，橫幅圖片即將作為頁面的中心，我需要延伸到我嘗試更改的頁面的總和，例如".imageslide{width:100%;.." width 100％，但它不起作用。

我需要創建完全像下面這樣的圖像：

我可以使用下面的HTML和JS代碼制作滑動橫幅圖像，但是滑動橫幅圖像頂部的搜索表單不知道我該怎么做：我已經看到了此鏈接，但是如果它不能解決:(。 index.html

<htm ng-app>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="./angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>
  </head>

    <body>
        <div id="header">
            <div id="withinheader">
            this is header
            </div>
        </div>
        <div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
            <div class="slider-content" ng-switch-when="1">
            <img src="./S_43_HomeDestinationImages_FriMar0420161099.jpg" alt="">
            </div>  
            <div class="slider-content" ng-switch-when="2">
            <img src="./S_43_HomeDestinationImages_FriMar042016420.jpg" alt="">
            </div>
            <div class="slider-content" ng-switch-when="3">
            <img src="./S_43_HomeDestinationImages_FriMar042016575.jpg" alt="">
            </div>  
            <div class="slider-content" ng-switch-when="4">
            <img src="./S_43_HomeDestinationImages_FriMar0420161099.jpg" alt="">
            </div>  
        </div>  
        <div id="mainbody">
        this is body
        </div>
    </body>

</html>

script.js

function slideShowController($scope, $timeout) {
 var slidesInSlideshow = 4;
 var slidesTimeIntervalInMs = 3000; 

  $scope.slideshow = 1;
  var slideTimer =
    $timeout(function interval() {
      $scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
      slideTimer = $timeout(interval, slidesTimeIntervalInMs);
    }, slidesTimeIntervalInMs);
}

style.css

/* Styles go here */
#header {
    background-color: #FFFFFF;
    width:100%;
    height:100px;
    border-bottom: 4px solid #EE514B;
}

.slideshow {
  font-family: "Arial", sans-serif;
  text-align: center;
  position:relative;
  width:600px;
  overflow:hidden;
  background: #1a1a1a;
  margin: 0 auto;
  color: white;
  text-shadow: 1px 1px 1px #000;
  border-radius: .3em;
  margin-top: 30px;
}

#withinheader {
    width:60%;
    margin: 0 auto;
    height: 100px;
}

.imageslide{
    width:100%;
    height:400px;
    margin: 0 auto;
    margin-bottom: 20px;
    overflow:hidden;
    position:relative;
    text-align: center;
}

.imageslide .slider-content {
  position: absolute;
  width:100%;
  height:400px;

}

.animate-enter,.animate-leave {
    -webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
    -moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
    -ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
    -o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
    transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}

.animate-enter {
    left:100%;
}

.animate-enter.animate-enter-active {
    left:0;
}

.animate-leave {
    left:0;
}

.animate-leave.animate-leave-active {
    margin-left:-100%;
}



#mainbody {
    background-color: #FFFFFF;
    width:50%;
    min-height:1024px;
    height: auto;
    border-radius: 5px;
    border: 1px solid #EEEEEE;
    margin: 0 auto;
}

請幫我，我需要使用Angular JS和MVC制作此網頁，我應該如何處理。

在此先感謝您的幫助和信息，以使其正常運行。

Answer 1

在沒有看到完整的HTML的情況下，我敢說這可能只是在以下position: relative添加position: relative對於包裝div的css（.imageslide）和position: absolute （以及left/right/top/bottom css聲明）搜索表單容器標簽css。

如何使用Angular JS將透明HTML表單放在背景中的滑動圖像頂部

問題描述

1 個解決方案

解決方案1
0 2016-05-21 14:26:29

如何使用Angular JS將透明HTML表單放在背景中的滑動圖像頂部

問題描述

1 個解決方案

解決方案1 0 2016-05-21 14:26:29

解決方案1
0 2016-05-21 14:26:29