100% змяняны памер дзівы плывучым ўнутры кантэйнера налева DIV

Ці можна есці кантэйнер DIV з X дзіцем дзівамі, кожны з якіх 100% змяняных ў браўзэры? Я ведаю, што гэта можа быць зроблена з дапамогай аднаго фону, але не з шэрагам дзівы ... Гэта тое, што я маю намер рабіць (слайд-шоў, які слізгае налева/направа):

enter image description here

HTML:

<div id="slideshowContent">
  <div id="slideshowImage_01" class="slideshowImage_container"></div>
  <div id="slideshowImage_02" class="slideshowImage_container"></div>
  <div id="slideshowImage_03" class="slideshowImage_container"></div>
  <div id="slideshowImage_04" class="slideshowImage_container"></div>
</div> <!-- End of id="slideshowContent" -->

... і CSS:

#slideshowContainer {
  z-index: 0;
  width: 11520px; height: 1080px;
  position: relative;
}

.slideshowImage {
  width: 1920px; height: 1080px;
  float: left;
}

Thanx.

Pedro

<�Моцны> EDIT 1 :. Я забыўся згадаць, што кожны асобны DIV ўтрымлівае малюнак

<�Моцны> EDIT 2 :. Дададзены мой уласны абноўлены FIDDLE

6
Ці спрабавалі вы нешта падобнае з дапамогай%?
дададзена аўтар A. Wolff, крыніца
Ці спрабавалі вы нешта падобнае з дапамогай%?
дададзена аўтар A. Wolff, крыніца
+1 для вашага малюнка. у любым выпадку гэта карысна? viralpatel.net/blogs/…
дададзена аўтар Kees Sonnema, крыніца
+1 для вашага малюнка. у любым выпадку гэта карысна? viralpatel.net/blogs/…
дададзена аўтар Kees Sonnema, крыніца
@Pedro гэта, на самой справе. Я ствараю скрыпку прама цяпер.
дададзена аўтар Broxzier, крыніца
@Pedro гэта, на самой справе. Я ствараю скрыпку прама цяпер.
дададзена аўтар Broxzier, крыніца
+1 для яснасці.
дададзена аўтар Chris Forrence, крыніца
+1 для яснасці.
дададзена аўтар Chris Forrence, крыніца
Так, але гэта не так проста ...
дададзена аўтар Pedro, крыніца
Так, але гэта не так проста ...
дададзена аўтар Pedro, крыніца

8 адказы

Here's fully working version: http://jsfiddle.net/y9zcf/7/

Цэнтраванне ажыццяўляецца з дапамогай CSS, то браўзэр проста запусціць слайд-шоў.

<�Моцны> HTML:

<div id="slideshowWrapper">
    <div id="slideshowContent">
        <div id="slideshowImage_01" class="slideshowImage_container active"></div>
        <div id="slideshowImage_02" class="slideshowImage_container"></div>
        <div id="slideshowImage_03" class="slideshowImage_container"></div>
        <div id="slideshowImage_04" class="slideshowImage_container"></div>
    </div>
</div>

<�Моцны> CSS

body, html {
    height: 100%;
    margin: 0;
}
#slideshowWrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#slideshowContent {
    width: 400%;//100% * number of slides
    height: 100%;
    position: relative;
}
#slideshowContent .slideshowImage_container {
    width: 25%;//100%/number of slides
    height: 100%;
    float: left;
}

<�Моцны> JS:

function slide() {
    var container = $('#slideshowContent'),
        nextDiv = container.find('.active').next('div'),
        slides = container.find('div'),
        next = nextDiv.length ? nextDiv : slides.first();

    slides.removeClass('active');
    next.addClass('active');
    $('#slideshowContent').animate({
        'left': '-' + next.index() * next.width() + 'px'
    }, 2000, function() {
        $(this).css({
            'left': '-' + next.index() * 100 + '%'
        });
    });

}

setInterval(function() {
    slide();
}, 5000);

Гэта 100% змяняемыя памерамі і #slideshowWrapper можа быць усталяваны на любую шырыню/вышыню і дзівы ўнутры будуць працаваць нармальна. Ўстаноўка CSS у працэнтах значэння пасля анімацыі азначае, што дзівы ўсё яшчэ змяняемыя пасля пераходу.

3
дададзена
<�Код> шырыня: 400%;//100% * колькасць слайдаў робіць яго вельмі статычная і ня дынамічны
дададзена аўтар Si8, крыніца
@Pedro - Я толькі што абнавіў вы скрыпку, каб прымусіць яго працаваць - jsfiddle.net/eEgnQ/1 - калі вы проста зрабіць слайд-шоў малюнкаў, то я б рэкамендаваў зірнуць на: srobbin. кім/JQuery-убудова/Бэкстретч
дададзена аўтар Joe, крыніца
@Pedro - Вось хуткі Бэкстретч убудова Прыклад: jsfiddle.net/y9zcf/10 </а>
дададзена аўтар Joe, крыніца
@ СИ8 - гэта можа быць вызначаны дынамічна з дапамогай JS з дапамогай убудаваных стыляў. CSS Адказ на гэтае пытанне з'яўляецца толькі прыкладам.
дададзена аўтар Joe, крыніца
Thanx для Fiddle. Я думаю, што любыя выявы ўнутры дзівы ня не змяненне памеру - Ваш Скрыпкі .
дададзена аўтар Pedro, крыніца

Here's fully working version: http://jsfiddle.net/y9zcf/7/

Цэнтраванне ажыццяўляецца з дапамогай CSS, то браўзэр проста запусціць слайд-шоў.

<�Моцны> HTML:

<div id="slideshowWrapper">
    <div id="slideshowContent">
        <div id="slideshowImage_01" class="slideshowImage_container active"></div>
        <div id="slideshowImage_02" class="slideshowImage_container"></div>
        <div id="slideshowImage_03" class="slideshowImage_container"></div>
        <div id="slideshowImage_04" class="slideshowImage_container"></div>
    </div>
</div>

<�Моцны> CSS

body, html {
    height: 100%;
    margin: 0;
}
#slideshowWrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#slideshowContent {
    width: 400%;//100% * number of slides
    height: 100%;
    position: relative;
}
#slideshowContent .slideshowImage_container {
    width: 25%;//100%/number of slides
    height: 100%;
    float: left;
}

<�Моцны> JS:

function slide() {
    var container = $('#slideshowContent'),
        nextDiv = container.find('.active').next('div'),
        slides = container.find('div'),
        next = nextDiv.length ? nextDiv : slides.first();

    slides.removeClass('active');
    next.addClass('active');
    $('#slideshowContent').animate({
        'left': '-' + next.index() * next.width() + 'px'
    }, 2000, function() {
        $(this).css({
            'left': '-' + next.index() * 100 + '%'
        });
    });

}

setInterval(function() {
    slide();
}, 5000);

Гэта 100% змяняемыя памерамі і #slideshowWrapper можа быць усталяваны на любую шырыню/вышыню і дзівы ўнутры будуць працаваць нармальна. Ўстаноўка CSS у працэнтах значэння пасля анімацыі азначае, што дзівы ўсё яшчэ змяняемыя пасля пераходу.

3
дададзена
<�Код> шырыня: 400%;//100% * колькасць слайдаў робіць яго вельмі статычная і ня дынамічны
дададзена аўтар Si8, крыніца
@Pedro - Я толькі што абнавіў вы скрыпку, каб прымусіць яго працаваць - jsfiddle.net/eEgnQ/1 - калі вы проста зрабіць слайд-шоў малюнкаў, то я б рэкамендаваў зірнуць на: srobbin. кім/JQuery-убудова/Бэкстретч
дададзена аўтар Joe, крыніца
@Pedro - Вось хуткі Бэкстретч убудова Прыклад: jsfiddle.net/y9zcf/10 </а>
дададзена аўтар Joe, крыніца
@ СИ8 - гэта можа быць вызначаны дынамічна з дапамогай JS з дапамогай убудаваных стыляў. CSS Адказ на гэтае пытанне з'яўляецца толькі прыкладам.
дададзена аўтар Joe, крыніца
Thanx для Fiddle. Я думаю, што любыя выявы ўнутры дзівы ня не змяненне памеру - Ваш Скрыпкі .
дададзена аўтар Pedro, крыніца

Адзіны спосаб, якім я магу думаць, выкарыстоўваючы JavaScript

<�Моцны> CSS

#SlideShow {
    width:100%;
    overflow-x:hidden;
    position: relative;
}

#slideshowContent {
  z-index: 0;
  width: 11520px; 
  height: 1080px;
  position:absolute;
  left:0px;
  top:0px;
}

.slideshowImage_container img {
  max-width:100%;
}

<�Моцны> JS

window.slideWidth = 0;
jQuery(document).ready(function(){
    window.onresize = funciton() {
        var window.slideWidth = jQUery("#SlideShow").width();
        jQuery("#slideshowContent slideshowImage_container").css("width",window.slideWidth+"px");
        jQuery("#slideshowContent").css("left","0px"); //or adjust the left to the current slide show image since they are now different lengths and the slideshow will be off.
    }
    window.resize();
});

І ўстаноўка вашы метады слайд выкарыстоўваць window.slideWidth ў якасці слізгальнай сумы І проста слізгаць #slideshowContent налева або направа.

<�Моцны> HTML

<div id="SlideShow">
  <div id="slideshowContent">
    <div id="slideshowImage_01" class="slideshowImage_container"></div>
    <div id="slideshowImage_02" class="slideshowImage_container"></div>
    <div id="slideshowImage_03" class="slideshowImage_container"></div>
    <div id="slideshowImage_04" class="slideshowImage_container"></div>
  </div>
</div>
0
дададзена

Адзіны спосаб, якім я магу думаць, выкарыстоўваючы JavaScript

<�Моцны> CSS

#SlideShow {
    width:100%;
    overflow-x:hidden;
    position: relative;
}

#slideshowContent {
  z-index: 0;
  width: 11520px; 
  height: 1080px;
  position:absolute;
  left:0px;
  top:0px;
}

.slideshowImage_container img {
  max-width:100%;
}

<�Моцны> JS

window.slideWidth = 0;
jQuery(document).ready(function(){
    window.onresize = funciton() {
        var window.slideWidth = jQUery("#SlideShow").width();
        jQuery("#slideshowContent slideshowImage_container").css("width",window.slideWidth+"px");
        jQuery("#slideshowContent").css("left","0px"); //or adjust the left to the current slide show image since they are now different lengths and the slideshow will be off.
    }
    window.resize();
});

І ўстаноўка вашы метады слайд выкарыстоўваць window.slideWidth ў якасці слізгальнай сумы І проста слізгаць #slideshowContent налева або направа.

<�Моцны> HTML

<div id="SlideShow">
  <div id="slideshowContent">
    <div id="slideshowImage_01" class="slideshowImage_container"></div>
    <div id="slideshowImage_02" class="slideshowImage_container"></div>
    <div id="slideshowImage_03" class="slideshowImage_container"></div>
    <div id="slideshowImage_04" class="slideshowImage_container"></div>
  </div>
</div>
0
дададзена

Можа быць, гарызантальная CSS база без пазіцыянавання, ні з што плавае б вас зацікавіць.

body, html {
    height:100%;
    padding:0;
    margin:0;
}
#slideshowWrapper {
    overflow: hidden;
    width: 100%; 
    height:100%;
}
#slideshowWrapper:hover {

}
#slideshowContent {
    height:100%;
    width:100%;
    text-indent:0;
    display:inline-block;
    white-space:nowrap;
}
.slideshowImage_container {
    height:100%;
    width:100%;
    display:inline-block;
    white-space:normal;
    text-indent:normal;
    text-align:center;
}
#slideshowImage_01 {
    background-color: #A0D0A8;
}
#slideshowImage_02 {
    background-color: #009FE3;
}
#slideshowImage_03 {
    background-color: #FCC99A;
}
#slideshowImage_04 {
    background-color: #D8B0CB;
}

http://jsfiddle.net/GCyrillus/PfbnW/1/

З CSS-анімацыі, як дадаткова:
(Толькі для шоу, JS «s больш цвёрдага цела) не настолькі гнуткі, ён павінен быць усталяваны кожны раз, калі вы дадаеце або выдаляеце кантэйнер.

#slideshowWrapper {
    animation: slidemeAnyDir 30s infinite;
    animation-play-state:running;
}
#slideshowWrapper:hover {
    animation-play-state:paused;
}

@keyframes slidemeAnyDir {
      0%, 15%, 100%      {text-indent:0;}
    17%, 32%,  84%, 98%  {text-indent:-100%;}
    34%, 49%,  68%, 82%  {text-indent:-200%;}
    51%, 66%%            {text-indent:-300%;}
}

Чаму тэкст водступ? таму што ён можа рэагаваць зусім па накіраванні ў Wich дакумент паказвае на экране. Ён слізгае боку, што кірунак усталёўваецца на бацькоў ці па змаўчанні.

0
дададзена
Вызначана, я згодны з вамі, і пытанне не прасіў дынамічныя # для дзівы.
дададзена аўтар Si8, крыніца
Гэта выдатна, за выключэннем 400% з'яўляецца статычнай шырынёй, так што адбудзецца, калі змесціва абнаўляецца кімсьці іншым? У цяперашні час існуе 5 DIVs, але толькі мае шырыню 400%: /
дададзена аўтар Si8, крыніца
@ СИ8 Тады пакіньце каментар у HTML/CSS, каб распавесці і растлумачыць, як абнавіць CSS у пярэдняй абнаўлення HTML. Калі вы не хочаце важдацца з гэтым, то выкарыстоўвайце JavaScript для ўстаноўкі на лета гэтыя значэння, гэта тыповая работа JS. Акрамя таго randomn колькасць DIV ня ў пытанні
дададзена аўтар G-Cyr, крыніца

Можа быць, гарызантальная CSS база без пазіцыянавання, ні з што плавае б вас зацікавіць.

body, html {
    height:100%;
    padding:0;
    margin:0;
}
#slideshowWrapper {
    overflow: hidden;
    width: 100%; 
    height:100%;
}
#slideshowWrapper:hover {

}
#slideshowContent {
    height:100%;
    width:100%;
    text-indent:0;
    display:inline-block;
    white-space:nowrap;
}
.slideshowImage_container {
    height:100%;
    width:100%;
    display:inline-block;
    white-space:normal;
    text-indent:normal;
    text-align:center;
}
#slideshowImage_01 {
    background-color: #A0D0A8;
}
#slideshowImage_02 {
    background-color: #009FE3;
}
#slideshowImage_03 {
    background-color: #FCC99A;
}
#slideshowImage_04 {
    background-color: #D8B0CB;
}

http://jsfiddle.net/GCyrillus/PfbnW/1/

З CSS-анімацыі, як дадаткова:
(Толькі для шоу, JS «s больш цвёрдага цела) не настолькі гнуткі, ён павінен быць усталяваны кожны раз, калі вы дадаеце або выдаляеце кантэйнер.

#slideshowWrapper {
    animation: slidemeAnyDir 30s infinite;
    animation-play-state:running;
}
#slideshowWrapper:hover {
    animation-play-state:paused;
}

@keyframes slidemeAnyDir {
      0%, 15%, 100%      {text-indent:0;}
    17%, 32%,  84%, 98%  {text-indent:-100%;}
    34%, 49%,  68%, 82%  {text-indent:-200%;}
    51%, 66%%            {text-indent:-300%;}
}

Чаму тэкст водступ? таму што ён можа рэагаваць зусім па накіраванні ў Wich дакумент паказвае на экране. Ён слізгае боку, што кірунак усталёўваецца на бацькоў ці па змаўчанні.

0
дададзена
Вызначана, я згодны з вамі, і пытанне не прасіў дынамічныя # для дзівы.
дададзена аўтар Si8, крыніца
Гэта выдатна, за выключэннем 400% з'яўляецца статычнай шырынёй, так што адбудзецца, калі змесціва абнаўляецца кімсьці іншым? У цяперашні час існуе 5 DIVs, але толькі мае шырыню 400%: /
дададзена аўтар Si8, крыніца
@ СИ8 Тады пакіньце каментар у HTML/CSS, каб распавесці і растлумачыць, як абнавіць CSS у пярэдняй абнаўлення HTML. Калі вы не хочаце важдацца з гэтым, то выкарыстоўвайце JavaScript для ўстаноўкі на лета гэтыя значэння, гэта тыповая работа JS. Акрамя таго randomn колькасць DIV ня ў пытанні
дададзена аўтар G-Cyr, крыніца

Здаецца, вы вызначылі шырыню вы хацелі б выкарыстоўваць, так што я прапаную выкарыстоўваць максімальную шырыню разам з шырынёй 100%, каб убачыць, калі гэта выпраўляе праблему.

#slideshowContainer {
  z-index: 0;
  width: 100%;
  max-width: 1520px; 
  position: relative;
}

.slideshowImage {
  width: 100%;
  max-width: 1920px; 
  float: left;
}

Калі вы не задасце вышыню яна павінна разлічыць аўтаматычна. Калі вы не адчуваеце сябе камфортна пакідаючы вышыню, вы можаце ўсталяваць вышыню, як вы б шырыню ...

height: auto;
max-height: 1080px;

Я спадзяюся, што гэта дапамагае!

0
дададзена

Здаецца, вы вызначылі шырыню вы хацелі б выкарыстоўваць, так што я прапаную выкарыстоўваць максімальную шырыню разам з шырынёй 100%, каб убачыць, калі гэта выпраўляе праблему.

#slideshowContainer {
  z-index: 0;
  width: 100%;
  max-width: 1520px; 
  position: relative;
}

.slideshowImage {
  width: 100%;
  max-width: 1920px; 
  float: left;
}

Калі вы не задасце вышыню яна павінна разлічыць аўтаматычна. Калі вы не адчуваеце сябе камфортна пакідаючы вышыню, вы можаце ўсталяваць вышыню, як вы б шырыню ...

height: auto;
max-height: 1080px;

Я спадзяюся, што гэта дапамагае!

0
дададзена