Question

我试过这样的话：

我有自动图像滑动但现在我尝试手动图像滑动，但我不知道手动滑动

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<head>

</head>
<body>

<div id="slideshow">
   <div>
     <img src="wood.jpg">
   </div>
   <div>
     <img src="spree.jpg">
   </div>
   <div>
     <img src="pic01.jpg">
   </div>
   <div>
     <img src="pic02.jpg">
   </div>
   <div>
     <img src="pic03.jpg">
   </div>

</div>
<style>

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

#slideshow {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

#slideshow li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

#slideshow li:first-child {
  position: relative;
  display: block;
  float: left;
  }

#slideshow img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

</style>

</body>

<script>
$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')

    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

</script>

</html>

以上完成自动滑动。

任何人都可以告诉我有关手动滑动的想法，然后请告诉我在代码中应该做些什么更改？

Answer 1

您的代码是正确的，但您已包含jquery并定义文档就绪事件所以你的slid.js将是：

$(document).ready(function(){
    $("#slideshow > div:gt(0)").hide();
    setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);

})

在关闭body标签之前，你必须插入jquery链接并链接到你的slid.js。

<body>
 <div id="slideshow">
   <div><img src="first.jpg"></div>
   <div><img src="sce.jpg"></div>
   <div> Pretty cool eh? This slide is proof the content can be anything</div>
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="slid.js"></script>
</body>
</html>

如果您希望图片从右向左滑动，则整个代码将

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    overflow:hidden;
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 260px; 
    width:100%;
    height:100%;
    overflow:hidden; 
}

</style>

</head>
<body>
 <div id="slideshow">
   <div><img src="first.jpg"></div>
   <div> <img  src="sce.jpg"></div>
   <div> Pretty cool eh? This slide is proof the content can be anything</div>
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#slideshow > div:first').css({'left':'10px'})
    setInterval(function() { 
      $('#slideshow > div:first')
        .animate({'left':'260px'},1000)
        .next()
        .animate({'left':'10px'},1000)
        .end()
        .appendTo('#slideshow');
    },  3000);

})
</script>
</body>
</html>

我希望这可以帮助你。

javaScript中的手动幻灯片

1 个答案: