javascript - jQuery/JavaScript实现smallslider效果

标签 javascript jquery html css

我这周才开始学习 JavaScript/jQuery。我试图实现这种效果但徒劳无功:http://blog.e8it.net/jquery-smallslider/

我正在尝试弄清楚如何通过 JavaScript 显示效果。所以我只是将代码从互联网复制并粘贴到我的 html 文件中。

我确实导入了 smallslider.css、jquery.smallslider.js 和 jquery-1.7.1.min.js。

我是不是忘记了什么?

这是.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/index3_style.css" /> 
        <link rel="stylesheet" type="text/css" href="css/smallslider.css" media="screen"/>
        <script type="text/javascript" src="js/jquery.smallslider.js"></script><D-4>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>         
        <script type="text/javascript">
            $(document).ready(function()
            {
                 $('#photoslide').smallslider
                 ({
                     onImageStop:true,
                     switchEffect:'ease',
                     switchEase:'easeOutSine',
                     switchPath:'left',
                     switchMode:'hover', 
                     showText:true, 
                     textSwitch:2                  
                 });
            });
         </script>       
    </head>
    <body>
        <div id="wraper" style="width:1020px; float:left;">
            <div id="header">
            </div>
            <div id="container" style="width:1020px; float=left;">
                <div id="photoslide">
                    <ul>
                        <li><img src="images/1.jpg" title="" alt="" /></li>
                        <li><img src="images/2.jpg" title="" alt="" /></li>
                        <li><img src="images/3.jpg" title="" alt="" /></li>
                        <li><img src="images/4.jpg" title="" alt="" /></li>
                    </ul>
                </div>
            </div>
            <div id="footer" style="width:1020px; float=left;">
            </div>
        </div>    
    </body>
</html>

smallslider.css:

$Document : smallslider$
$Created on : 2009-7-3, 11:56:24$
$Last Update : 2010-3-15, 11:20:22$
$Author:Sinrow$
$E-Mail : sinrow@yeah.net$
$Description : Stylesheet for smallslider, UTF-8 encoding $

jquery.smallslider.js:

  • SmallSilder JQuery 插件
  • $http://lab.cnscene.com/smallslider/$
  • $文档:jquery.smallslider.js$
  • $创建于 : 2009-7-3, 11:56:24$
  • $最后更新时间:2010 年 3 月 15 日,14:40:16$
  • $作者:辛罗$
  • $电子邮箱:sinrow@yeah.net$
  • $说明

最佳答案

如果这就是您的所有 smallslider.css 和 jquery.smallslider.js,它将无法工作。你为什么不试试像这个这样有据可查的东西呢? http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

关于javascript - jQuery/JavaScript实现smallslider效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9125411/

相关文章:

javascript - event.target 分别采用 react 子组件

javascript - PHP随机页面url自动重新加载

javascript - 多页和谷歌分析插件中的 deviceready

javascript - 基于数据表 Jquery 的插件 - 表 - 表中可折叠的问题 - Javascript/HTML

javascript - 谷歌地图 API v3。功能 showMarkers() 只是隐藏/清除新标记

javascript - 为什么 .css() 的 jQuery 相对值不起作用?

javascript - 使用 jQuery/JavaScript 从 SOAP 响应中解析 XML

javascript - 如何使导航栏从右侧滑动

javascript - 使用 jQuery 在 IE 中获取 JavaScript JSON 代码

javascript - 禁用输入按钮中的回车键