-1

jQuery と HTML を使用してスライドショーを作成していますが、問題が発生しています。1 つの画像が表示され、他のスライドは表示されません。問題がどこにあるのかわかりません。誰かが同様の問題を経験しましたか?

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery Slider</title>
    <style type="text/css">
      .slider{
        width:800px;
        height:350px;
        overflow:hidden;
        margin:30px auto;
      }
      .slider img{
        width:800px;
        height:350px;
        display:none;
      }
    </style>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
 function Slider(){
 $('#img1').show("fade", 500);
 $('#img2').delay(5500).hide("slide", {direction:"left"}, 500);

 var sc=$(".slider img").size();
 var count=2;

 setInterval(function(){

     $(".slider#"+count).show("slide", {direction:"right"}, 500);
     $(".slider#"+count).delay(5500).hide("slide", {direction:"left"}, 500);

     if(count == sc){

     count=1;
     }else{
        count=count+1;
     }
     }, 6500);
 }

</script>
</head>

<body onload="Slider();">

<div class="slider">

<img id="img1" src="img/13052012438.jpg"border="0"alt="image1" />
<img id="img2" src="img/25052012442.jpg"border="0"alt="image2" />

<img id="img3" src="img/13052012439.jpg"border="0"alt="image3" />
<img id="img4" src="img/25052012441.jpg"border="0"alt="image4" />

</div>

</body>
</html>
4

1 に答える 1

0

これを使って...

$(document).ready(function(){
 $('#img1').show("fade", 500);
 $('#img2').delay(500).hide("slide", {direction:"left"}, 500);
 var sc=$(".slider img").size();
 var count=2;

 setInterval(function(){
     $("#img"+count).show("slide", {direction:"right"}, 500);
     $("#img"+count).delay(500).hide("slide", {direction:"left"}, 500);
     if(count == sc){
         count=1;
     }else{
        count=count+1;
     }
     }, 6500);
 });

そして、このjSfiddleの例を見てください

于 2013-02-22T23:04:47.253 に答える