Question

我正在尝试更改幻灯片放映的方向。我已经做了一个基本的例子小提琴，我想做的就是当幻灯片放映到达图像4时（在这个例子中）从纵向改变为横向。我想更改命名的div：main-container，slider，slider＆gt; div但不确定如何！当滑块在＃4上时，div会改变以便正确显示图像。他们将与其他div一起改变。在玩了几个小时后，我已经让自己屈服于需要帮助的脸！这是小提琴（请注意，按钮不适用于小提琴！它们在主站点和本地工作正常）：http://jsfiddle.net/Margate/zT29L/7/

非常感谢您的帮助：）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
    #main-container {width: 350px; height: 400px; position: relative; top: 10px; border: 1px solid #000; margin: 0px auto;}
    #slider{width: 240px; height: 320px; overflow: hidden; position: absolute; top: 40px; left: 55px;}
    #slider>div{width: 240px; height: 320px; float: left; display: none;}
    #prev-next-div{position: absolute; top: 450px; margin: 0px auto; width: 350px; height: 25px;}
    a.previous, .next{padding: 0; text-decoration: none; color: #000;}
    a.previous{position: absolute; top: 0; left: 40px; width: 80px; height: 25px; text-align: center; line-height: 25px;}
    a.next{position: absolute; top: 0; left: 230px; width: 80px; height: 25px; text-align: center; line-height: 25px;}
    </style>
</head>

<body>

<div id="main-container">

<div id="slider">
    <div id="1"><img src="http://www.darrenmorton.com/ExampleImages/ImageOne.jpg" width="240px" height="320px"></div>
    <div id="2"><img src="http://www.darrenmorton.com/ExampleImages/ImageTwo.jpg" width="240px" height="320px"></div>
    <div id="3"><img src="http://www.darrenmorton.com/ExampleImages/ImageThree.jpg" width="240px" height="320px"></div>
    <div id="4"><img src="http://www.darrenmorton.com/ExampleImages/ImageFour.jpg" width="320px" height="240px"></div>
</div>

<div id="prev-next-div">
    <a href="#" class="previous" onclick="prev(); return false;">Previous</a>
    <a href="#" class="next" onclick="next(); return false;">Next</a>
</div>

</div>
<script src="global.js"></script>
</body>
</html>






sliderInt=1;
sliderNext=2;

$(document).ready(function(){
    $("#slider>div#1").fadeIn(300);
    startSlider();
});

function startSlider(){
    count=$("#slider>div").size();

loop=setInterval(function(){

if(sliderNext>count){
    sliderNext=1;
    sliderInt=1;
}

$("#slider>div").fadeOut(300);
$("#slider>div#" + sliderNext).fadeIn(300);

sliderInt=sliderNext;
sliderNext=sliderNext+1

},8000)
}

function prev(){
    newSlide=sliderInt-1;
    showSlide(newSlide);
}

function next(){
    newSlide=sliderInt+1;
    showSlide(newSlide);
}


function stopLoop(){
    window.clearInterval(loop);
}

function showSlide(id){
    stopLoop();
    if(id>count){
    id=1;
}else if(id<1){
id=count;
}

$("#slider>div").fadeOut(300);
$("#slider>div#" + id).fadeIn(300);

sliderInt=id;
sliderNext=id+1;
startSlider();
}

$("#slider>div").hover(
function (){
    stopLoop();
},
function(){
startSlider();
}
);

在jQuery幻灯片中更改多个元素

0 个答案: