首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >单击时删除div和内容

单击时删除div和内容
EN

Stack Overflow用户
提问于 2013-01-27 10:11:19
回答 1查看 208关注 0票数 1

我有以下代码,它不会从滑块中删除div:

代码语言:javascript
复制
$("#slider-next").click(function(){         
    $("#shortslide img").animate({'width':'0px', 'left':'0'});
    $("#dandr-slider #shortslide").remove();
});

有人能告诉我我做错了什么吗?提前谢谢。

这是HTML的一部分:

代码语言:javascript
复制
<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>

这是整个脚本:

代码语言:javascript
复制
<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>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-01 06:28:47

此问题的解决方法是将第一张幻灯片中的图像向左浮动,设置右侧+=390(半宽)的动画

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14543760

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档