Question

我试图将图像滑入左侧：

<html>
<head>
<title>JQuery Slider</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script>
  $(document).ready(function(){
     $("#one").show("fade",500);
     $("#one").delay(5500).hide("slide",{direction:'left'},500);
  });  
});
</script>
</head>

<body>
<div class="slider">
   <img id="one" src="img/banner01.jpg" alt="first image"/>
   <img id="two" src="img/banner02.jpg" alt="first image"/>
   <img id="three" src="img/banner03.jpg" alt="first image"/>
 </div>
</body>
</html>

它在浏览器控制台上出错未捕获的TypeError：对象＃的属性'＃'不是函数请帮助我

Answer 1

您的代码中存在语法错误：

  $(document).ready(function(){
     $("#one").show("fade",500);
     $("#one").delay(5500).hide("slide",{direction:'left'},500);
  });  
}); // <--- remove this line

编辑：

您正在加载jQuery UI 1.7.2，我不认为此版本支持jQuery 1.4.2，请尝试加载更新版本的jQuery Core库。

Answer 2

您可以使用任何jquery插件，如下所示

nivo slider

Answer 3

的JQuery / CSS

<script>
        $(function() {      
            $("#slideshow > div:gt(0)").hide(); 
            setInterval(function() { 
              $('#slideshow > div:first')
                .fadeOut(1500)
                .next()
                .fadeIn(1500)
                .end()
                .appendTo('#slideshow');
            },  3000);          
        });
    </script> 
        <style>
            #slideshow {position: absolute; width: 264px; height: 104px; padding: 0px; overflow: hidden;}
            #slideshow > div { position: absolute; overflow: hidden;}   
        </style>

HTML

<div class="tile tile-white">
   <div id="slideshow">
   <div>
     <img src="tpl/main/img/pic1.png" />
   </div>
   <div>
     <img src="tpl/main/img/pic2.png" />
   </div>
      <div>
     <img src="tpl/main/img/pic3.png" />
   </div>
   <div>
     <img src="tpl/main/img/pic4.png" />
   </div>
      <div>
     <img src="tpl/main/img/pic5.png" />
   </div>
   <div>
     <img src="tpl/main/img/pic6.png" />
   </div>
   </div>
   </div>

如何在jQuery中滑动图像

3 个答案: