1

スライダーからdivを削除しない次のコードがあります：

$("#slider-next").click(function(){         
    $("#shortslide img").animate({'width':'0px', 'left':'0'});
    $("#dandr-slider #shortslide").remove();
});

誰かが私が間違っていることを教えてもらえますか？前もって感謝します。

これはHTMLの一部です。

<div id="dandr-scroller" style="border:1px solid lime;width:790px;height:477px;position:absolute; right:-790px; top:0px;z-index:2000;" class="hide">
    <div id="slider-nav">
        <a href='#' id='slider-prev' style="position:absolute; top:265px; height:27px; left:10px; width:20px; z-index:100; cursor:pointer;"><img src="dandr-arrow-left.png" style="border:0; height:27px; width:20px;" /></a>
        <a href="#" id="slider-next" style="position:absolute; top:265px; left: 740px; height:27px; width:20px; z-index:100; cursor:pointer;"><img src="dandr-arrow-right.png" style="border:0; height:29px; width:22px;" /></a>
    </div>

    <div id="dandr-slider">
        <div id="shortslide" ><img src="trendessential_2.png"  style="border:0; cursor:pointer;"   /></div>
        <div><img src="dandr-0.jpg" style="width:790px; height:477px; border:0; cursor:pointer;" /></div>
        <div><img  src="dandr-1.jpg" style="width:790px; height:477px; border:0; cursor:pointer;" /></div>
        <div><img  src="dandr-2.jpg" style="width:790px; height:477px; border:0; cursor:pointer;" /></div>
        <div><img  src="dandr-3.jpg" style="width:790px; height:477px; border:0; cursor:pointer;" /></div>
        <div><img src="dandr-4.jpg" style="width:790px; height:477px; border:0; cursor:pointer;" /></div>
        <div><img src="dandr-1.jpg" style="width:790px; height:477px; border:0; cursor:pointer;" /></div>
    </div>
</div>

これがスクリプト全体です。

<script language="javascript" type="text/javascript">
  fadeInterval = 2000;
  $("#dandr-right-arrow").hide();
  $("#dandr-left-arrow").hide();
  $("#dandr-scroller").hide();
  $("#dandr-slider").hide();
  $(document).ready(function () {
    $("#dandr-container").css('display', '');
    $("#message").hide();
    $("#message").delay(600).fadeIn(fadeInterval);
    $("#dandr-copy1").delay(1500).animate({ "right": "+=790px" }, "slow");
    $("#dandr-copy2").delay(1600).animate({ "right": "+=790px" }, "slow");
    $("#dandr-copy3").delay(1700).animate({ "right": "+=790px" }, "slow");
    $("#dandr-copy4").delay(1800).animate({ "right": "+=790px" }, "slow");
    $("#dandr-copy5").delay(1900).animate({ "right": "+=790px" }, "slow");
    $("#dandr-copy").delay(1400).animate({ "right": "+=790px" }, "slow", function () {
      setTimeout('ScrollInit()', 1000);
    });
  });
  function ScrollInit() {
    $("#slider-prev").hide();
    $("#dandr-scroller").delay(1000).animate({ "right": "+=390px" }, "slow").show();
    $("#slider-next").css({'position': 'absolute',  'top': '265px', 'left': '350px'});
    $("#slider-next").click(function(){
      $("#test").hide();
      $("#shortslide img").animate({'width':'0px', 'left':'0'});
      $("#dandr-slider #shortslide").remove();
      $("#dandr-copy").hide();
      $("#message").hide();
      $("#dandr-copy1").hide();
      $("#dandr-copy2").hide();
      $("#dandr-copy3").hide();
      $("#dandr-copy4").hide();
      $("#dandr-copy5").hide();
      $("#dandr-scroller").animate({ "right": "0" }, "slow");
      $("#slider-prev").show();
      $("#slider-next").css({'position': 'absolute',  'top': '265px', 'left': '740px'});
    });
    $('#dandr-slider').cycle({
      fx: 'scrollHorz',
      speed: 1200,
      timeout: 0,
      next: $('#slider-next'),
      prev: $('#slider-prev'),
      startingSlide: 0,
      easing: "easeInOutQuint"
    });
  }
</script>
4

1 に答える 1

0

この問題の回避策は、最初のスライドで画像を左にフロートさせ、右にアニメーション化することでした+ = 390（半分の幅）

于 2013-01-31T22:28:46.987 に答える