-4

我正在尝试将图像滑入左侧：

<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>

它在浏览器控制台上出现错误 Uncaught TypeError: Property '#' of object # is not a function 请帮助我

4

3 回答 3

4

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

  $(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 库。

于 2013-02-25T14:38:27.180 回答
1

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>
于 2013-02-25T14:39:45.947 回答
0

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

nivo 滑块

于 2013-02-25T14:37:57.850 回答