1

我知道这不能用 CSS 完成，但可以用 Javascript 完成吗？

我需要绝对定位图像，因为它是幻灯片的一部分。当我删除绝对定位时，每个新图像都会显示在最后一张图像的右侧。我在网上找到了一些代码，说您可以对 div 执行此操作，但我无法找到有关应用 javascript 来了解图像高度的任何信息。

CSS

.slideshowContainer {
border:5px solid #c7eafb;
background:#ebebec;
padding:0px;
margin:0px;
width:90%;
clear:both;
}

#slideshow {
    position:relative;
    width:100%;
height:300px;
padding:none;
margnin:none;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
width:100%;
height:auto;
padding:none;
margin:none;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

HTML

<div class="slideshowContainer">
    <ul id="horizontal-style">
        <li><a href=# >Home</a></li>
        <li><a href=# >About Us</a></li>
        <li><a href=# >Online Courses</a></li>
        <li><a href=# >Registration</a></li>
        <li><a href=# >Faculty</a></li>
        <li><a href=# >Calendar</a></li>
        <li><a href=# >Store</a></li>
        <li><a href=# >Testimonials</a></li>
        <li><a href=# >Online Lectures</a></li>
        <li><a href=# >Contact Us</a></li>
        <li><a href=# >Forum</a></li>
    </ul>
    <div id="slideshow">
        <img src="images/DSC00537.JPG" class="active"/>
        <img src="images/DSC00407.JPG" />
        <img src="images/DSC00566.JPG" />
        <img src="images/JIM_1871.JPG" />
    </div><!-- End slideshow-->
</div> <!-- End slideshowContainer-->

查询

$(function() {
    var $slideshow = $('#slideshow'),
    $slides = [],
    active = null;

// build the slides array from the children of the slideshow.  this will pull in any children, so adjust the scope if needed
$slideshow.children().each(function(i) {
    var $thisSlide = $(this);

    // if its the active slide then set it to this index
    if ( $thisSlide.hasClass('active') ) active = i;

$slides.push( $thisSlide );
    });

// if no active slide, take the last one
if ( active === null ) active = $slides.length - 1;

function slideSwitch() {
    // add the last-active class to the previously active slide
    var $lastActive = $slides[active];
    $lastActive.addClass('last-active');

    // find the next slide
    active++;

    // set to zero if it's too high
    if ( active >= $slides.length ) active = 0;

    var $nextActive = $slides[active];

    $nextActive.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $lastActive.removeClass('active last-active');
        });
}

// start the interval
setInterval( slideSwitch, 5000 );
});
4

1 回答 1

0

我想到了。

我在幻灯片放映后添加了一个与幻灯片图像相同比例的空白图像，并将其 z-index 设置为 -1。这允许父 div 适合空白图像并围绕幻灯片进行相应调整。

HTML

<div class="slideshowContainer">
    <ul id="horizontal-style">
      <li><a href=# >Home</a></li>
      <li><a href=# >About Us</a></li>
      <li><a href=# >Online Courses</a></li>
      <li><a href=# >Registration</a></li>
      <li><a href=# >Faculty</a></li>
      <li><a href=# >Calendar</a></li>
      <li><a href=# >Store</a></li>
      <li><a href=# >Testimonials</a></li>
      <li><a href=# >Online Lectures</a></li>
      <li><a href=# >Contact Us</a></li>
      <li><a href=# >Forum</a></li>
    </ul>
   <div id="slideshow">
        <img src="images/DSC00537.JPG" class="active"/>
        <img src="images/DSC00407.JPG" />
        <img src="images/DSC00566.JPG" />
        <img src="images/JIM_1871.JPG" />

        </div><!-- End slideshow-->
        <!-- I ADDED THE CODE BELOW TO SOLVE THE ISSUE -->
        <div class="test">
            <img src="images/slideshowFiller.JPG" />
        </div>
</div> <!-- End slideshowContainer-->

附加 CSS

.test {
    margin:none;
    padding:none;
    z-index:-1;
}
.test img {
    width:100%;
    height:auto;
}
于 2013-08-26T19:33:01.037 回答