Как создать слайд-шоу в jquery

Question

Как создать слайд-шоу в jquery

0

Я пытаюсь заставить свое слайд-шоу работать. Первое изображение fadein и fadeout, но после этого все остальные изображения не появятся. Я использую Notepad++ на всякий случай, если вы, ребята, должны это знать. Пожалуйста, помогите с этим. Я уверен, что это небольшая ошибка, я просто не могу ее найти. Заранее благодарю

<!DOCTYPE html>
<html>
<head>
<title>Rwandan Genocide Gallery</title>
<meta charset="utf-8" />
<link href="images.css" type="text/css" rel="stylesheet"/> 
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Abril+Fatface"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="text/javascript">
function Slider(){

$(".slider #1").fadeIn(500);

$(".slider #1").delay(3000).hide("slide",{direction:"left"},500);

var counter=$(".slider img").length();
var count=2;

setInterval(function(){
$(".slider #"+count).fadeIn(500);
$(".slider #"+count).delay(3000).hide("slide",{direction:"left"},500);

if(count == counter){
count = 1;
}
else
{
count = count+1;
},4000);

}

}
</script>
</head>
<body onload="Slider();">



<div class="slider">
<img id="1" src="images/genocide1.jpg" alt="image number 1"/>       
<img id="2" src="images/genocide5.jpg" alt="image number 4"/>   
<img id="3" src="images/genocide2.jpg" alt="image number 5"/>   
<img id="4" src="images/genocide11.jpg" alt="image number 6"/>  
</div>      



</body>
</html>

user3513160 16 апр. 2014, в 00:22

Источник

Теги:

jquery

html

css

2 ответа

Ещё вопросы

Trebor · Answer 1 · 2014-04-15T20-02-00.000Z

Вы можете использовать этот плагин jQuery под названием Flexslider для слайд-шоу.
Это намного лучше и менее проблематично.
Не теряйте время, когда у вас есть готовые решения.

Kyle Needham · Answer 2 · 2014-04-15T19-11-00.000Z

У вас было несколько ошибок ввода в вашей функции Slider, обратите внимание на мои комментарии, чтобы узнать, что не так:

function Slider ()
{
    $(".slider #1").fadeIn(500);

    $(".slider #1").delay(3000).hide("slide", {
        direction: "left"
    }, 500);

    var counter = $(".slider img").length; // This should be a property, not a function.
    var count = 2;

    setInterval(function ()
    {
        $(".slider #" + count).fadeIn(500);
        $(".slider #" + count).delay(3000).hide("slide", {
            direction: "left"
        }, 500);

        if (count == counter) {
            count = 1;
        } else {
            count = count + 1;
        }
    }, 4000); // You were passing the interval time to the end of the else.
}

могу ли я исчезнуть в одном из направлений, скажем, слева направо
@ user3513160 К сожалению, вы не можете с fadeIn .
есть ли другой способ сделать это ???