0
この素晴らしい日にあなたはうまくいたいと思います。私はスライドショーを作成しましたが、現時点では反応しません。つまり、ブラウザウィンドウを小さくしても小さくなりません。私はスライドショーを反応させるのに苦労しています
これはCSSの高さと幅の宣言のためですが、パーセンテージに変更するとスライドショーが機能しなくなります。誰かが提供できるヒントやヒントは、喜んで受け取ります。
私のhtml：
<div id="slideShow">
<div id="slideShowWindow">
<div class="slide">
<img src="../Images/golden.jpg"/>
<div class="slideText">
<h2>Golden pearl</h2>
<p>This golden pearl came from a farm in the south china sea</p>
</div> <!-- </slideText> -->
</div>
<!-- </slide> repeat as many times as needed -->
<div class="slide">
<img src="../Images/zen.jpg"/>
<div class="slideText">
<h2>Simply Zen</h2>
<p>What else is there to say?!</p>
</div> <!-- </slideText> -->
</div>
<!-- </slide> repeat as many times as needed -->
<div class="slide">
<img src="../Images/rain.jpg"/>
<div class="slideText">
<h2>Lariat In 'Rain'</h2>
<p>Lariat In 'Rain' motif using diamonds, white gold, Tahitian pearls, and silk.</p>
</div> <!-- </slideText> -->
</div>
<!-- </slide> repeat as many times as needed -->
</div> <!-- </slideShowWindow> -->
</div> <!-- </slideshow> -->
マイCSS：
img {
display: block;
width: 100%;
height: auto;
}
p{
background:none;
color:#ffffff;
}
#slideShow #slideShowWindow {
width: 650px;
height: 450px;
margin: 0;
padding: 0;
position: relative;
overflow:hidden;
margin-left: auto;
margin-right:auto;
}
#slideShow #slideShowWindow .slide {
margin: 0;
padding: 0;
width: 650px;
height: 450px;
float: left;
position: relative;
margin-left:auto;
margin-right: auto;
}
#slideshow #slideshowWindow .slide{
position:absolute;
bottom:18px;
left:0;
width:100%;
height:auto;
margin:0;
padding:0;
color:#ffffff;
font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
.slideText {
background: rgba(128, 128, 128, 0.49);
text-align:center;
bottom:0;
padding:10px;
}
#slideshow #slideshowWindow .slide .slideText h2,
#slideshow #slideshowWindow .slide .slideText p {
margin:10px;
padding:15px;
}
.slideNav {
display: block;
text-indent: -10000px;
position: absolute;
cursor: pointer;
}
#leftNav {
left: 0;
bottom: 0;
width: 48px;
height: 48px;
background-image: url("../Images/plus_add_minus.png");
background-repeat: no-repeat;
z-index: 10;
}
#rightNav {
right: 0;
bottom: 0;
width: 48px;
height: 48px;
background-image: url("../Images/plus_add_green.png");
background-repeat: no-repeat;
z-index: 10;
}
.hiding{
display:none;
}
.showing{
display:block;
}
私のjQueryの：あなたの助けの人たちのための先進的で
$(document).ready(function() {
var currentPosition = 0;
var slides = $('.slide');
var slideWidth = 650;
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
//Assign a timer, so it will run periodically
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float': 'left' });
//set #slidesHolder width equal to the total width of all the slides
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
$('#slideShowWindow')
.prepend('<span class="slideNav" id="leftNav">Move Left</span>')
.append('<span class="slideNav" id="rightNav">Move Right</span>');
manageNav(currentPosition);
//tell the buttons what to do when clicked
$('.slideNav').bind('click', function() {
//determine new position
currentPosition = ($(this).attr('id') === 'rightNav')
? currentPosition + 1 : currentPosition - 1;
//hide/show controls
manageNav(currentPosition);
clearInterval(slideShowInterval);
slideShowInterval = setInterval(changePosition, speed);
moveSlide();
});
function manageNav(position) {
//hide left arrow if position is first slide
if (position === 0) {
$('#leftNav').hide();
}
else {
$('#leftNav').show();
}
//hide right arrow is slide position is last slide
if (position === numberOfSlides - 1) {
$('#rightNav').hide();
}
else {
$('#rightNav').show();
}
}
//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
function changePosition() {
if (currentPosition === numberOfSlides - 1) {
currentPosition = 0;
manageNav(currentPosition);
} else {
currentPosition++;
manageNav(currentPosition);
}
moveSlide();
}
//moveSlide: this function moves the slide
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
}
});
おかげで、何か質問があるか、さらに必要な場合は、私に知らせる情報：