圖像滑塊與「響應寬度」，「固定高度」，「中心對齊」和「自動旋轉」

我需要一個全高（適應）滑塊固定高度和居中圖像（最小寬度960px和人更寬的屏幕會看到圖像的其餘部分（左邊和右邊的額外部分）），並且需要自動旋轉。圖像滑塊與「響應寬度」，「固定高度」，「中心對齊」和「自動旋轉」

現在我得到了HTML/CSS的工作，但我的JavaScript是垃圾，所以我不知道如何讓圖像滑動。我已經在這裏檢查了很多問題，但似乎沒有任何工作。我的圖像尺寸是2300x350。

CSS：

body { 
    margin: 0 auto; 
} 

#slider_container { 
    width:100%; 
    height:350px; 
    overflow:hidden; 
    position: relative; 
    z-index: 1; 
} 

.image { 
    position:relative; 
    float:left; 
    height: 350px; 
    width: 100%; 
    overflow: hidden; 
} 

.image img { 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-left:-1150px; 
    margin-top:-175px; 
}

HTML：

<div id="slider_container"> 
    <div class="image"> 
     <img src="images/header.jpg" /> 
    </div> 
    <div class="image"> 
     <img src="images/header2.jpg"/> 
    </div> 
    <div class="image"> 
     <img src="images/header3.jpg" /> 
    </div> 
</div>

這段代碼的圖片出來好看，中間每一個屏幕上，但我怎麼讓它滑和自動旋轉？我想第一個圖像只需要被第二個圖像替換，這樣z-index會發生變化？或+或 - 一張照片的寬度？

來源

2013-03-26 user1830235

你爲什麼不使用滑塊插件？ Flexslider會爲它們製作動畫並且不超過4行。而且你甚至不需要爲此編寫CSS。 ** http：//flexslider.woothemes.com/** – 2013-03-26 10:36:41

即時嘗試flexslider現在，但我不能讓代碼工作全寬：/我試過這個 '$（function（）{ $（ '#slides'）slidesjs（{ 寬度：2300，高度：350 }）; }）;' ，但它不工作，你不能把寬度爲100％ – user1830235 2013-03-26 10:42:25

如果您使用flexslider只需要風格img標籤。嘗試下面的小提琴鏈接。我爲此包含了四個文件。

的jQuery 1.9.1
flexslider.css
jquery.flexslider-min.js
bg_direction_nav.png

jsfiddle

來源

2013-03-26 11:57:23

THX！但我得到了jQuery循環插件的結果，更容易，然後我認爲！ – user1830235 2013-03-27 14:26:16

請檢查這個.. http://www.jqueryscript.net/demo/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides/它是全寬和固定高度的滑塊和自動腐爛吃了。在這裏，你有選擇，造型根據您的需要

$(function(){ 

    var p=$('#content').responsiveSlides({ 
     height:450,      // slides conteiner height 
     background:'#fff',    // background color and color of overlayer to fadeout on init 
     autoStart:true,     // boolean autostart 
     startDelay:0,     // start whit delay 
     effectInterval:5000,   // time to swap photo 
     effectTransition:1000,   // time effect 
     pagination:[ 
      { 
       active:true,   // activate pagination 
       inner:true,    // pagination inside or aouside slides conteiner 
       position:'B_R',   /* 
              pagination align: 
               T_L = top left 
               T_C = top center 
               T_R = top right 

               B_L = bottom left 
               B_C = bottom center 
               B_R = bottom right 
             */ 
       margin:10,    // pagination margin 
       dotStyle:'',   // dot pagination class style 
       dotStyleHover:'',  // dot pagination class hover style 
       dotStyleDisable:''  // dot pagination class disable style 
      } 
     ] 
    }); 

});

更多修飾請參閱jquery.responsiveSlides.js

來源

2015-06-16 15:20:09

圖像滑塊與「響應寬度」，「固定高度」，「中心對齊」和「自動旋轉」

回答

相關問題