无法使用多个jquery库

时间:2013-04-07 14:31:12

标签: jquery

我是新来的,使用HTML / CSS / Js /...

我需要使用(我猜是这样)多个jquery库,但它们不能一起工作。 标签中的第一个(用于平滑滚动“jquery scrollto”),标签中的第二个(用于CSS3滑块)。 我已经在这里搜索了解决方案,但没有结果!

我尝试使用jquery-no冲突(如here)但它不起作用,或者我可能无法以正确的方式使用它。

(对不起我的英语我是意大利语)

无论如何这是代码(粗体和斜体是我的评论):

<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>[...]</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta [...]>
<link rel="shortcut icon" href="../favicon.ico"> 
<link rel="stylesheet" type="text/css" href="css/style2.css"/>
<script type="text/javascript" src="scripts/modernizr.custom.28468.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/nojs.css"/>
</noscript>
<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>     **1st JQUERY**
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.noConflict(true);   *IF I DELETE THIS THE SMOOTH SCROLLING STOP WORKING AND THE CSS3 SLIDER WORKS FINE*
    $('#nav_home').localScroll(800);
    $('#nav_about').localScroll(800);
    $('#nav_servizi').localScroll(800);
    $('#nav_contatti').localScroll(800);
    <!--#############################-->
    $('#home').parallax("50%", 0.1);
    $('#about').parallax("50%", 0.1);
    $('#servizi').parallax("50%", 0.3);
    $('#contatti').parallax("50%", 0.3);
})
</script>
</head>
<!---->
<body>

<div id="menu">
<div class="home" id="nav_home"><a href="#home"><img src="img/freccia_mini.png" border="0"/></a></div>
<div class="pulsanti" id="nav_about"><a href="#about">Chi siamo</a></div>
<div class="pulsanti" id="nav_servizi"><a href="#servizi">I nostri servizi</a></div>
<div class="pulsanti" id="nav_contatti"><a href="#contatti">Contatti</a></div>
</div><!--fine menu-->

<div id="home">[...]
</div><!--fine home-->

<div id="about">[...]
</div><!--fine about-->

<div id="servizi">
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2 class="margin">Grafica</h2>
<p class="margin"></p>
<div class="da-img"><img src="img/tavolozza.png"/></div>
</div><!--div id="da-slider" class="da-slider"-->
<div class="da-slide">
<h2  class="margin">Web</h2>
<p class="margin_h2"></p>
<div class="da-img"><img src="img/tazzina.png"/></div>
</div>
<div class="da-slide">
<h2  class="margin">Media</h2>
<p class="margin_h2"></p>
<div class="da-img"><img src="img/reflex.png"/></div>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.7.1.js"></script>     **2nd JQUERY**
<script type="text/javascript" src="scripts/jquery.cslider.js"></script>
<script type="text/javascript">
        $(function() {
        $('#da-slider').cslider({
        autoplay    : true,
        bgincrement : 450
        });
    });
</script>   
</div><!--fine servizi-->

<div id="contatti">[...]
</div><!--fine contatti-->

</body>
</html>

感谢

2 个答案:

答案 0 :(得分:0)

这里只是一个猜测,但您是否考虑过使用最新的jquery库? 1.3.2可能存在兼容性问题。

答案 1 :(得分:0)

我认为这些插件都不需要特定的版本。 也许你只使用一个 jQuery版本(例如1.8.3)。

<head>
    ...
    <!-- (change)  -->
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>     **1st JQUERY**

    ...
    <script>
       ...
       <!-- remove-->
       $.noConflict(true);
       ...
    </script>
</head>    
<body>
    <!-- (remove) -->
    <script type="text/javascript" src="scripts/jquery-1.7.1.js"></script>     **2nd JQUERY**
    ...
</body>
祝你好运


2个插件协同工作的示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="keywords" content="javascript, jquery, plugins, scroll, anchor, to, navigation, ajax, scrollTo, smooth, animation, overflow, element, window, effect, lazy, customizable, ariel, flesler">
    <meta name="description" content="Demo of jQuery.LocalScroll. A jQuery plugin to make anchor navigation work with a smooth animation, made by Ariel Flesler.">
    <meta name="robots" content="all">
    <meta name="author" content="Ariel Flesler, aflesler(at)gmail(dot)com">
    <meta name="copyright" content="(c) 2007-2008 Ariel Flesler">
    <title>jQuery.LocalScroll - Regular Demo</title>
    <link rel="shortcut icon" href="http://jquery.com/favicon.ico" type="image/x-icon">
    <link href="http://flesler.com/base.css" type="text/css" rel="stylesheet">
    <link href="http://flesler.com/jquery/localScroll/css/style.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://flesler.com/jquery/localScroll/../scrollTo/js/jquery.scrollTo-min.js"></script>
    <script type="text/javascript" src="http://flesler.com/jquery/localScroll/js/jquery.localscroll-min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>
    <script type="text/javascript" src="http://flesler.com/jquery/localScroll/js/init.js"></script>

    <link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/demo.css">
    <link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/style2.css">

    <!-- Timestamp: 1365350712 -->
<style type="text/css">@media print { #feedlyMiniIcon { display: none; } }</style></head>
<body data-feedly-processed="yes">
    <h1>jQuery.LocalScroll&nbsp;<strong>by Ariel Flesler</strong></h1>
    <div class="sidebar">
    <h2 class="title">Regular Demo</h2>     <div id="links">
            <h3>Links</h3>
            <ul>
            <li><a target="_blank" href="http://plugins.jquery.com/project/LocalScroll">Project Page</a></li>
<li><a target="_blank" href="http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html">Main blog article</a></li>
<li><a target="_blank" href="http://flesler.blogspot.com/search/label/jQuery.LocalScroll">All articles</a></li>
<li><a href="http://demos.flesler.com/jquery/localScroll/ajax/">AJAX Demo</a></li>
<li><a href="http://demos.flesler.com/jquery/scrollTo/">ScrollTo Demo</a></li>
            </ul>
        </div>
        </div>
        <ul id="navigation">
        <li class="sup">
            <a href="#section1">Section 1</a>
            <ul>
                <li><a href="#section1b">Section 1-b</a></li>
                <li><a href="#section1c">Section 1-c</a></li>
            </ul>                   
        </li>
        <li class="sup">
            <a href="#section2">Section 2</a>
            <ul>
                <li><a href="#section2b">Section 2-b</a></li>
                <li><a href="#section2c">Section 2-c</a></li>
            </ul>   
        </li>
        <li class="sup">
            <a href="#section3">Section 3</a>
            <ul>
                <li><a href="#section3b">Section 3-b</a></li>
                <li><a href="#section3c">Section 3-c</a></li>
            </ul>
        </li>
        <li class="sup">
            <a href="#section4">Section 4</a>
            <ul>
                <li><a href="#section4b">Section 4-b</a></li>
                <li><a href="#section4c">Section 4-c</a></li>
            </ul>
        </li>
        <li class="sup">
            <a href="#section5">Section 5</a>
            <ul>
                <li><a href="#section5b">Section 5-b</a></li>
                <li><a href="#section5c">Section 5-c</a></li>
            </ul>
        </li>
    </ul>                                                           
    <div id="content">
        <div class="section">
            <ul>
                <li class="sub" id="section1">
                    <h2>Section 1</h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum 
auctor neque ac nunc elementum malesuada. Praesent non est sed libero 
vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat
 ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. 
Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet
 lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique 
aliquam quam. Sed neque.</p>
                    <p>Nulla facilisi. Quisque eleifend libero. Sed eros. Morbi vel 
leo. Morbi varius tincidunt sem. Nam sodales volutpat velit. Suspendisse
 potenti. Duis vehicula pede non nisi. Proin elit pede, ultrices non, 
ultrices quis, vulputate sit amet, magna. Praesent sodales pellentesque 
justo. Donec blandit, augue id convallis congue, magna libero hendrerit 
erat, id blandit est lorem a tellus. Vestibulum tincidunt lectus quis 
metus. Pellentesque placerat lacus in urna.</p>
                    <a href="#section1b" class="next">&gt;&gt;</a>
                </li>
                <li class="sub" id="section1b">
                    <h2>Section 1-b</h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum 
auctor neque ac nunc elementum malesuada. Praesent non est sed libero 
vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat
 ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. 
Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet
 lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique 
aliquam quam. Sed neque.</p>
                    <p>Nulla facilisi. Quisque eleifend libero. Sed eros. Morbi vel 
leo. Morbi varius tincidunt sem. Nam sodales volutpat velit. Suspendisse
 potenti. Duis vehicula pede non nisi. Proin elit pede, ultrices non, 
ultrices quis, vulputate sit amet, magna. Praesent sodales pellentesque 
justo. Donec blandit, augue id convallis congue, magna libero hendrerit 
erat, id blandit est lorem a tellus. Vestibulum tincidunt lectus quis 
metus. Pellentesque placerat lacus in urna.</p>
                    <a href="#section1" class="prev">&lt;&lt;</a>
                    <a href="#section1c" class="next">&gt;&gt;</a>                  
                </li>
                <li class="sub" id="section1c">
                    <h2>Section 1-c</h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum 
auctor neque ac nunc elementum malesuada. Praesent non est sed libero 
vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat
 ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. 
Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet
 lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique 
aliquam quam. Sed neque.</p>
                    <p>Nulla facilisi. Quisque eleifend libero. Sed eros. Morbi vel 
leo. Morbi varius tincidunt sem. Nam sodales volutpat velit. Suspendisse
 potenti. Duis vehicula pede non nisi. Proin elit pede, ultrices non, 
ultrices quis, vulputate sit amet, magna. Praesent sodales pellentesque 
justo. Donec blandit, augue id convallis congue, magna libero hendrerit 
erat, id blandit est lorem a tellus. Vestibulum tincidunt lectus quis 
metus. Pellentesque placerat lacus in urna.</p>
                    <a href="#section1b" class="prev">&lt;&lt;</a>
                </li>               
            </ul>
        </div>
        <div class="section">
            <ul>
                <li class="sub" id="section2">
                    <h2>Section 2</h2>
                    <p>Nullam et sem eget massa pellentesque dapibus. Nulla 
sollicitudin enim quis odio. Quisque ipsum lorem, volutpat eget, 
condimentum ac, posuere id, risus. Suspendisse tortor metus, aliquet in,
 varius nec, hendrerit a, libero. Suspendisse iaculis. Fusce commodo 
urna ut enim. Fusce tempus eros. Phasellus sodales tellus id dolor. 
Integer sollicitudin, turpis ac interdum condimentum, enim enim tempus 
metus, sed imperdiet massa diam nec elit. Mauris ante augue, hendrerit 
non, commodo ac, porttitor eu, turpis.</p>
                    <p>In fermentum nibh ut diam. Mauris sagittis, tellus ac molestie 
fermentum, arcu orci pharetra mi, id vehicula massa leo vel pede. Nullam
 semper tincidunt lorem. Proin arcu libero, auctor sed, interdum 
egestas, ullamcorper et, lacus. Donec id lectus eget diam accumsan 
ullamcorper. Donec at urna et lacus condimentum pellentesque. Phasellus 
dapibus hendrerit massa. Sed sed ipsum. Quisque venenatis. Donec vel 
turpis. Vivamus quis augue a turpis facilisis facilisis. Pellentesque 
augue ipsum, bibendum id.</p>
                    <a href="#section2b" class="next">&gt;&gt;</a>  
                </li>
                <li class="sub" id="section2b">
                    <h2>Section 2-b</h2>
                    <p>Nullam et sem eget massa pellentesque dapibus. Nulla 
sollicitudin enim quis odio. Quisque ipsum lorem, volutpat eget, 
condimentum ac, posuere id, risus. Suspendisse tortor metus, aliquet in,
 varius nec, hendrerit a, libero. Suspendisse iaculis. Fusce commodo 
urna ut enim. Fusce tempus eros. Phasellus sodales tellus id dolor. 
Integer sollicitudin, turpis ac interdum condimentum, enim enim tempus 
metus, sed imperdiet massa diam nec elit. Mauris ante augue, hendrerit 
non, commodo ac, porttitor eu, turpis.</p>
                    <p>In fermentum nibh ut diam. Mauris sagittis, tellus ac molestie 
fermentum, arcu orci pharetra mi, id vehicula massa leo vel pede. Nullam
 semper tincidunt lorem. Proin arcu libero, auctor sed, interdum 
egestas, ullamcorper et, lacus. Donec id lectus eget diam accumsan 
ullamcorper. Donec at urna et lacus condimentum pellentesque. Phasellus 
dapibus hendrerit massa. Sed sed ipsum. Quisque venenatis. Donec vel 
turpis. Vivamus quis augue a turpis facilisis facilisis. Pellentesque 
augue ipsum, bibendum id</p>
                    <a href="#section2" class="prev">&lt;&lt;</a>
                    <a href="#section2c" class="next">&gt;&gt;</a>  
                </li>
                <li class="sub" id="section2c">
                    <h2>Section 2-c</h2>
                    <p>Nullam et sem eget massa pellentesque dapibus. Nulla 
sollicitudin enim quis odio. Quisque ipsum lorem, volutpat eget, 
condimentum ac, posuere id, risus. Suspendisse tortor metus, aliquet in,
 varius nec, hendrerit a, libero. Suspendisse iaculis. Fusce commodo 
urna ut enim. Fusce tempus eros. Phasellus sodales tellus id dolor. 
Integer sollicitudin, turpis ac interdum condimentum, enim enim tempus 
metus, sed imperdiet massa diam nec elit. Mauris ante augue, hendrerit 
non, commodo ac, porttitor eu, turpis.</p>
                    <p>In fermentum nibh ut diam. Mauris sagittis, tellus ac molestie 
fermentum, arcu orci pharetra mi, id vehicula massa leo vel pede. Nullam
 semper tincidunt lorem. Proin arcu libero, Donec at urna et lacus 
condimentum pellentesque. Phasellus dapibus hendrerit massa. Sed sed 
ipsum. Quisque venenatis. Donec vel turpis. Vivamus quis augue a turpis 
facilisis facilisis. Pellentesque augue ipsum, bibendum id, scelerisque 
id, venenatis sit amet, nulla.</p>
                    <a href="#section2b" class="prev">&lt;&lt;</a>
                </li>
            </ul>
        </div>
        <div class="section">
            <ul>
                <li class="sub" id="section3">
                    <h2>Section 3</h2>
                    <p>Aliquam erat volutpat. In a neque. Mauris malesuada consectetuer
 metus. Etiam molestie. Cum sociis natoque penatibus et magnis dis 
parturient montes, nascetur ridiculus mus. Integer scelerisque gravida 
libero. Nulla nisi massa, consequat nec, gravida sit amet, imperdiet in,
 est. Nam gravida lacus. Etiam sem tortor, faucibus eget, iaculis 
euismod, molestie consequat, mauris. Phasellus consectetuer lobortis 
eros. Maecenas sit amet arcu. Morbi ut enim. Fusce sem augue, 
consectetuer in, tempus eu, dictum vel, felis. Praesent nisl tortor, 
aliquet a, fermentum ac, molestie vitae, libero.</p>
                    <p>Donec lacinia neque et justo. Vestibulum pretium semper tellus. 
Phasellus lacinia tristique purus. Id, orci. Pellentesque habitant morbi
 tristique senectus et netus et malesuada fames ac turpis egestas. Nulla
 non orci eu felis accumsan blandit. Nam condimentum. Quisque pulvinar. 
Cras nibh. Sed quis lorem id erat feugiat vulputate.</p>
                    <a href="#section3b" class="next">&gt;&gt;</a>  
                </li>
                <li class="sub" id="section3b">
                    <h2>Section 3-b</h2>
                    <p>Aliquam erat volutpat. Pellentesque cursus, vel dignissim dolor 
est eget ante. Pellentesque a purus. Proin quis arcu ut ipsum 
sollicitudin sollicitudin. In a neque. Mauris malesuada consectetuer 
metus. Etiam molestie. Cum sociis natoque penatibus et magnis dis 
parturient montes, nascetur ridiculus mus.Nam gravida lacus. Etiam sem 
tortor, faucibus eget, iaculis euismod, molestie consequat, mauris. 
Phasellus consectetuer lobortis eros. Maecenas sit amet arcu. Morbi ut 
enim. Fusce sem augue, consectetuer in, tempus eu, dictum vel, felis. 
Praesent nisl tortor, aliquet a, fermentum ac, molestie vitae, libero.</p>
                    <p>Donec lacinia neque et justo. Vestibulum pretium semper tellus. 
Phasellus lacinia tristique purus. Sed magna est, auctor quis, egestas 
et, tristique id, orci. Pellentesque habitant morbi tristique senectus 
et netus et malesuada fames ac turpis egestas. Nulla non orci eu felis 
accumsan blandit. Nam condimentum. Sed quis lorem id erat feugiat 
vulputate.</p>
                    <a href="#section3" class="prev">&lt;&lt;</a>
                    <a href="#section3c" class="next">&gt;&gt;</a>  
                </li>
                <li class="sub" id="section3c">
                    <h2>Section 3-c</h2>
                    <p>Aliquam erat volutpat. Pellentesque cursus, pede vel molestie 
tempor, orci mauris pellentesque mauris. Etiam molestie. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
mus. Integer scelerisque gravida libero. Nulla nisi massa, consequat 
nec, gravida sit amet, imperdiet in, est. Nam gravida lacus. Etiam sem 
tortor, faucibus eget, iaculis euismod, molestie consequat, mauris. 
Phasellus consectetuer lobortis eros. Maecenas sit amet arcu. Morbi ut 
enim. Fusce sem augue, consectetuer in, tempus eu, dictum vel, felis. 
Praesent nisl tortor, aliquet a, fermentum ac, molestie vitae, libero.</p>
                    <p>Donec lacinia neque et justo. Pellentesque habitant morbi 
tristique senectus et netus et malesuada fames ac turpis egestas. 
ellentesque cursus, pede vel molestie tempor, orci mauris pellentesque 
mauris. Nulla non orci eu felis accumsan blandit. Nam condimentum. 
Quisque pulvinar. Cras nibh. Sed quis lorem id erat feugiat vulputate. </p>
                    <a href="#section3b" class="prev">&lt;&lt;</a>
                </li>                               
            </ul>
        </div>
        <div class="section">
            <ul>
                <li class="sub" id="section4">
                    <h2>Section 4</h2>
                    <p>Donec eu diam. Etiam pharetra pede id orci. Mauris tellus enim, 
ultrices in, vehicula sed, feugiat eget, pede. Vestibulum odio eros, 
viverra non, posuere sed, elementum blandit, nunc. Fusce sodales cursus 
nibh. Nam ut sem sed tortor lacinia aliquet. Donec lacus arcu, 
consectetuer non, dignissim eget, ultrices sed, ligula. Maecenas 
faucibus lobortis nibh. Ut viverra justo quis felis eleifend ultrices. 
Integer at magna ut lacus malesuada rutrum. Proin in odio a mi tincidunt
 faucibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Nullam nisi massa, facilisis vitae, mollis et, ornare sit amet, dolor.</p>
                    <p>Quisque turpis eros. Vivamus ullamcorper, diam sit amet pharetra
 vehicula, sem nisi scelerisque ante, nec mattis risus augue non nulla. 
Donec elit dui, porttitor eget, ultricies vel, elementum gravida, urna. 
Aliquam erat volutpat. Mauris libero tellus, facilisis et, aliquet non, 
pulvinar sagittis, turpis. Quisque eu augue et dui lacinia gravida. Nam 
in massa a purus blandit mattis. Nulla facilisi.</p>
                    <a href="#section4b" class="next">&gt;&gt;</a>  
                </li>
                <li class="sub" id="section4b">
                    <h2>Section 4-b</h2>
                    <p>Donec eu diam. . Integer viverra ante quis nisi. Vestibulum odio
 eros, viverra non, posuere sed, elementum blandit, nunc. Fusce sodales 
cursus nibh. Nam ut sem sed tortor lacinia aliquet. Donec lacus arcu, 
consectetuer non, dignissim eget, ultrices sed, ligula. Maecenas 
faucibus lobortis nibh. Ut viverra justo quis felis eleifend ultrices. 
Integer at magna ut lacus malesuada rutrum. Proin in odio a mi tincidunt
 faucibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Nullam nisi massa, facilisis vitae, mollis et, ornare sit amet, dolor.</p>
                    <p>Quisque turpis eros, blandit vitae, auctor vel, eleifend nec, 
nisl. Nam justo lacus, elementum vel, rhoncus ut, feugiat id, ante. 
Vivamus ullamcorper,Nec mattis risus augue non nulla. Donec elit dui, 
porttitor eget, ultricies vel, elementum gravida, urna. Aliquam erat 
volutpat. Mauris libero tellus, facilisis et, aliquet non, pulvinar 
sagittis, turpis. Quisque eu augue et dui lacinia gravida. Nam in massa a
 purus blandit mattis. Nulla facilisi.</p>
                    <a href="#section4" class="prev">&lt;&lt;</a>
                    <a href="#section4c" class="next">&gt;&gt;</a>  
                </li>
                <li class="sub" id="section4c">
                    <h2>Section 4-c</h2>
                    <p>Donec eu diam. Morbi molestie purus at velit. Morbi augue eros, 
eleifend nec, bibendum tempor, aliquet a, augue. Integer viverra ante 
quis nisi. Vestibulum odio eros, viverra non, posuere sed, elementum 
blandit, nunc. Fusce sodales cursus nibh. Nam ut sem sed tortor lacinia 
aliquet. Donec lacus arcu, consectetuer non, dignissim eget, ultrices 
sed, ligula. Maecenas faucibus lobortis nibh. Ut viverra justo quis 
felis eleifend ultrices. Integer at magna ut lacus malesuada rutrum. 
Proin in odio a mi tincidunt faucibus. Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Nullam nisi massa, facilisis vitae, mollis
 et, ornare sit amet, dolor.</p>
                    <p>Quisque turpis eros, blandit vitae, auctor vel, eleifend nec, 
nisl. Nec mattis risus augue non nulla. Donec elit dui, porttitor eget, 
ultricies vel, elementum gravida, urna. Aliquam erat volutpat. Mauris 
libero tellus, facilisis et, aliquet non, pulvinar sagittis, turpis. 
Quisque eu augue et dui lacinia gravida. Nam in massa a purus blandit 
mattis. Nulla facilisi.</p>
                    <a href="#section4b" class="prev">&lt;&lt;</a>
                </li>
            </ul>
        </div>
        <div class="section">
            <ul>
                <li class="sub" id="section5">
                    <h2>Section 5</h2>
                    <p>Fusce sit amet nibh sit amet libero pretium rutrum. Phasellus 
arcu. Donec turpis lorem, eleifend ut, cursus at, lacinia eget, dolor. 
Vivamus pulvinar sollicitudin ante. Nulla eu mauris sollicitudin urna 
fermentum tincidunt. Mauris placerat leo ut quam. Vestibulum ante ipsum 
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed in
 risus. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis 
dis parturient montes, nascetur ridiculus mus. Maecenas enim. 
Suspendisse odio odio, cursus ut, egestas eget, lobortis eget, magna.</p>
                    <p>Maecenas ultrices lectus facilisis metus. Fusce imperdiet. 
Aenean bibendum magna a neque. Aenean vel tellus. Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit. Fusce gravida, magna non 
pellentesque interdum, felis odio eleifend ligula, et luctus dolor mi et
 diam. Vivamus varius nisl sed enim. Sed ultricies fermentum urna.</p>
                    <a href="#section5b" class="next">&gt;&gt;</a>  
                </li>
                <li class="sub" id="section5b">
                    <h2>Section 5-b</h2>
                    <p>Fusce sit amet nibh sit amet libero pretium rutrum. Nam iaculis 
enim ac ipsum. Donec turpis lorem, eleifend ut, cursus at, lacinia eget,
 dolor. Vivamus pulvinar sollicitudin ante. Nulla eu mauris sollicitudin
 urna fermentum tincidunt. Mauris placerat leo ut quam. Vestibulum ante 
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
Sed in risus. Aliquam erat volutpat. Cum sociis natoque penatibus et 
magnis dis parturient montes, nascetur ridiculus mus. Maecenas enim. 
Suspendisse odio odio, cursus ut, egestas eget, lobortis eget, magna.</p>
                    <p>Maecenas ultrices lectus facilisis metus. Nunc nec elit vitae 
lectus posuere aliquam. Integer id justo nec elit varius blandit. Aenean
 vel tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Fusce gravida, magna non pellentesque interdum, felis odio eleifend 
ligula, et luctus dolor mi et diam. Vivamus varius nisl sed enim. Sed 
ultricies fermentum urna.</p>
                    <a href="#section5" class="prev">&lt;&lt;</a>
                    <a href="#section5c" class="next">&gt;&gt;</a>  
                </li>
                <li class="sub" id="section5c">
                    <h2>Section 5-c</h2>
                    <p>Fusce sit amet nibh sit amet libero pretium rutrum. Phasellus 
arcu. Morbi justo purus, pellentesque ac, fringilla at, adipiscing non, 
dolor. Suspendisse imperdiet lorem. Nam iaculis enim ac ipsum.  Nulla eu
 mauris sollicitudin urna fermentum tincidunt. Mauris placerat leo ut 
quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
posuere cubilia Curae; Sed in risus. Aliquam erat volutpat. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
mus. Maecenas enim. Suspendisse odio odio, cursus ut, egestas eget, 
lobortis eget, magna.</p>
                    <p>Maecenas ultrices lectus facilisis metus. Nunc nec elit vitae 
lectus posuere aliquam. Integer id justo nec elit varius blandit. Aenean
 vel tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Fusce gravida, magna non pellentesque interdum, felis odio eleifend 
ligula, et luctus dolor mi et diam. Vivamus varius nisl sed enim. Sed 
ultricies fermentum urna.</p>
                    <a href="#section5b" class="prev">&lt;&lt;</a>
                </li>
            </ul>
        </div>
    </div>

    <div id="da-slider" class="da-slider">
        <div class="da-slide">
            <h2 class="margin">Grafica</h2>
            <p class="margin"></p>
            <div class="da-img"><img src="http://img1.fotoalbum.virgilio.it/v/www1-2/176/176513/304872/IMG_0898-vi.jpg"/></div>
        </div><!--div id="da-slider" class="da-slider"-->
        <div class="da-slide">
            <h2  class="margin">Web</h2>
            <p class="margin_h2"></p>
            <div class="da-img"><img src="http://upload.wikimedia.org/wikipedia/commons/c/c6/Great_spotted_Eagle_I_IMG_8362.jpg"/></div>
        </div>
        <div class="da-slide">
            <h2  class="margin">Media</h2>
            <p class="margin_h2"></p>
            <div class="da-img"><img src="http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg"/></div>
        </div>
        <nav class="da-arrows">
            <span class="da-arrows-prev"></span>
            <span class="da-arrows-next"></span>
        </nav>
    </div>
    <script type="text/javascript">
        $(function() {
            $('#da-slider').cslider({
                autoplay    : true,
                bgincrement : 450
            });
        });
    </script>
   </body>
</html>

希望这会有所帮助。 此致