其实我一直都很希望能用jquery做一个图像滑块,以前在各个网站上看到的都是利用FLASH制作的。能否有一个简单实用的呢?今天我想我找到了。

这里是DEMO:http://webdesigntutsplus.s3.amazonaws.com/105_JuicyTabbedSlider/coded/Tabbed_Slider/demo/demo.html

然后这里是web教程:http://net.tutsplus.com/tutorials/design-tutorials/code-your-own-juicy-tabbed-slider-using-the-nivo-slider/

再然后这里是photoshop教程:http://webdesign.tutsplus.com/tutorials/site-elements/create-your-own-juicy-tabbed-slider-free-psd/

很久没有更新教程类的文章了,我想这次能做一下。慢慢做,没关系。

第一步:下载Nivo Slider,从http://nivo.dev7studios.com/这里下,只需要下载免费版本。压缩包下载后里面有很多东西,而这里我们需要的仅仅是jquery.nivo.slider.pack.js,nivo-slider.css,style.css,default.css,demo.html以及所有的图像文件。当然,这里我用的默认主题,如果想用其他主题的话选择对应主题的CSS就好。

第二步:拆解,简化。打开demo.html,你会看到如下代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</head>
<body>
    <div id="wrapper">

        <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>

        <div class="slider-wrapper theme-default">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>

    </div>

</body>
</html>

我们看到<head>中都是CSS和JS的调用,这里只保留jquery.nivo.slider.pack.js,nivo-slider.css,default.css的调用,因为你的网页中本身已经有style.css了,所以不要调用它的。但是,在它的style.css中,有几条是这个程序所需要的,我们只需把style.css中下面这几条粘贴到nivo-slider.css,default.css任一个里面就可以

.theme-default #slider {
    margin:100px auto 0 auto;
    width:618px; /* Make sure your images are the same size */
    height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
    margin-top:150px;
}
上面三项中选择你所要的主题复制即可。
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}

然后对demo.html进行修改。这里关于上面那些调用就不说了,请直接放到你本身的<head>里,当然路径也要修改成你的新路径。至于jquery-1.6.1.min.js可以直接http到jquery官网,目前最新的是1.6.4。其他的可以直接精简成下面这些

<div class="theme-default">
    <div id="slider" class="nivoSlider">
        <img src="images/toystory.jpg" alt="" />
        <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
        <img src="images/walle.jpg" alt="" />
        <img src="images/nemo.jpg" alt="" />
    </div>
</div>

这便是直接调用代码。

好了到目前为止,只要你所有文件都正常调用,格式不错的话就可以正常显示了。然后若想做一些自定义的话,很明显调用代码中的图像就是滚动的图片,图片大小在刚刚从style.css粘出来的那几条代码中写得很清楚。通过上面代码的格式也很容易看出没个图片都可以做link。至于其他的样式可以直接去nivo-slider.css,default.css里进行修改。如何修改就不说了,实在不会一点一点试也能试明白的。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

左半红印发表于2011.09.18th