Question

我是jquery的新手，并为图片滑块找到了这个插件。它适用于图像，但我在图像旁边添加了文字以供描述。在我这样做之后，我的第一张图片和相应的描述在第一块面板上显示得很好，但是下面两张图片没有显示，因为它们是垂直排列而不是水平排列。这意味着当第一个滑块让位于下一个时，第一个图片下面的所有下面的图像也会滑动，第一个滑块会将其他面板留空。这是一个link。如何将所有图像显示在各自的幻灯片中？

这是我的jquery：

$(document).ready(function() {
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size() 
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

}; 

//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
}); 

//On Click
$(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
});
});

这是我的滑块css：

.window, .single{
position: relative;
height: 400px;
width: 880px;
margin-top: 10px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
background-color: #000000;

}

ul.image_reel {
    position: relative; 
}

ul.image_reel li {
    color: #ffffff;
    overflow:hidden;
    padding: 10px 0 10px 10px;  
    position: relative;
}


ul.image_reel h1, ul.image_reel p{
    padding-left: 10px;
    width: 260px;
    margin-left: 580px;
}


ul.image_reel img {
    float: left;
}

这是我的HTML代码：

<div class="window">

                <ul class="image_reel">
                    <li>
                        <img src="images/first.jpg" alt="" />
                        <h1>What do we develop?</h1>
                    <p>Obsia develops and manufactures natural stone and road sealers to preserve it forever.<br /> 
                    <br />All your projects, whether internal or external, are made stain-proof, dust-proof and weather-proof.  <br />
                    <br /></p>
                    </li>

                    <li>
                        <img src="images/second.jpg">
                        <h1>How does it work?</h1>
                        <p>The sealer penetrates the stone upto a depth of 6mm completely sealing the stone. The liquid mimics the natural crystalline structure of the stone improving the reflectivity. <br /> <br />The binder hardens and strengthens the structure of the stone including the weaker spots.</p>
                    </li>
                    <li><img src="images/third.jpg"></li>
                    <li></li>
                </ul><!-- end of image_reel -->

        </div><!-- end of window -->

            <div class="paging">
                <a href="#intro" rel="1">1</a>
                <a href="#problems" rel="2">2</a>
                <a href="#solution" rel="3">3</a>
                <a href="#savings" rel="4">4</a>
            </div><!-- end of paging -->
  </div>

任何帮助或回应都将不胜感激。

Answer 1

也许你需要：

ul.image_reel { 
    float: left; 
}

我在jquery滑块中的所有窗口都垂直排列而不是水平排列

1 个答案: