使用多个jquery库时出现问题
我是新来的，有HTML/CSS/Js/ 我需要使用（我想是的）多个jquery库，但它们不能一起工作。 标记中的第一个（用于平滑滚动的“jquery scrollto”），标记中的第二个（用于CSS3滑块）。 我已经在这里搜索了解决方案，但没有结果 我尝试使用jquery无冲突（as），但它不起作用，或者可能无法以正确的方式使用它 （对不起我的英语，我是意大利人） 无论如何，这是代码（粗体和斜体是我的注释）：使用多个jquery库时出现问题,jquery,Jquery,我是新来的，有HTML/CSS/Js/ 我需要使用（我想是的）多个jquery库，但它们不能一起工作。 标记中的第一个（用于平滑滚动的“jquery scrollto”），标记中的第二个（用于CSS3滑块）。 我已经在这里搜索了解决方案，但没有结果 我尝试使用jquery无冲突（as），但它不起作用，或者可能无法以正确的方式使用它 （对不起我的英语，我是意大利人） 无论如何，这是代码（粗体和斜体是我的注释）： [...] **第一JQUERY** $（文档）.ready（函数（）{ $.noC
[...]
**第一JQUERY**
$（文档）.ready（函数（）{
$.noConflict（true）；*如果删除此选项，平滑滚动将停止工作，CSS3滑块工作正常*
$（'nav#u home'）。本地滚动（800）；
$（'nav#u about'）.localScroll（800）；
$（'nav#u servizi'）.localScroll（800）；
$（'nav#u contatti'）.localScroll（800）；
$（#home'）。视差（“50%”，0.1）；
$（'#about'）。视差（“50%”，0.1）；
$（#servizi'）。视差（“50%”，0.3）；
$（#contatti'）。视差（“50%”，0.3）；
})
[...]
[...]
格拉菲卡
网状物
媒体
**第二JQUERY**
$（函数（）{
$（“#da滑块”）.cslider({
自动播放：对，
增长：450
});
});
[...]
谢谢这里只是一个猜测，但是您是否考虑过使用最新的jquery库？1.3.2可能存在兼容性问题。据我所知，这些插件都不需要特定版本。 如果您只使用onejQuery版本（例如1.8.3），可能会出现这种情况
...
**第一JQUERY**
...
...
$.noConflict（真）；
...
**第二JQUERY**
...
两个插件一起工作的示例：
<!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 <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">>></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"><<</a>
<a href="#section1c" class="next">>></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"><<</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">>></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"><<</a>
<a href="#section2c" class="next">>></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"><<</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">>></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"><<</a>
<a href="#section3c" class="next">>></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"><<</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">>></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"><<</a>
<a href="#section4c" class="next">>></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"><<</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">>></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"><<</a>
<a href="#section5c" class="next">>></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"><<</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>
jQuery.LocalScroll-常规演示
@媒体打印{feedlyminicon{display:none；}
jQuery.LocalScroll作者Ariel Flesler
常规演示
链接
-
-
-
-
-
-
第一节
Lorem ipsum dolor sit amet，是一位杰出的领导者。
悬浮物和turpis是一种发酵剂。前庭
拍卖人neque ac nunc elementum malesuada。不受限制的自由
连续前庭。塞德车。我的朋友，我的朋友
乌尔特里斯卢克图斯。舌苔。福斯·维韦拉·维塔维利特。
埃尼安·比本杜姆·尼布·诺勒姆。苏珊迪丝·奎斯·维利特。整数位错
拉克斯。库拉比图特里斯蒂克。莫比·莱克托斯。三体前庭
阿利夸姆。塞德内克
无便利。自由女神。塞德·厄洛斯。莫比维尔
狮子座。Morbi varius tincidunt扫描电镜。Nam sodales和Pat velit。悬钩子
波蒂蒂。非nisi的车辆行驶时间。佩德精英酒店，
麦格纳州埃米特市的乌尔特里斯·奎斯。普莱森特肉食汽水
胡斯托。Donec blandit、augue id convallis congue、magna libero hendrerit
埃拉特，我想这是一个很好的故事。耳垂前庭
梅特斯。乌尔纳的佩伦特斯基鼠腔隙
-
第1-b节
Lorem ipsum dolor sit amet，是一位杰出的领导者。
悬浮物和turpis是一种发酵剂。前庭
拍卖人neque ac nunc elementum malesuada。不受限制的自由
连续前庭。塞德车。我的朋友，我的朋友
乌尔特里斯卢克图斯。舌苔。福斯·维韦拉·维塔维利特。
埃尼安·比本杜姆·尼布·诺勒姆。苏珊迪丝·奎斯·维利特。整数位错
拉克斯。库拉比图特里斯蒂克。莫比·莱克托斯。三体前庭
阿利夸姆。塞德内克
无便利。自由女神。塞德·厄洛斯。莫比维尔
狮子座。Morbi varius tincidunt扫描电镜。Nam sodales和Pat velit。悬钩子
波蒂蒂。非nisi的车辆行驶时间。佩德精英酒店，
麦格纳州埃米特市的乌尔特里斯·奎斯。普莱森特肉食汽水
胡斯托。Donec blandit、augue id convallis congue、magna libero hendrerit
埃拉特，我想这是一个很好的故事。耳垂前庭
梅特斯。乌尔纳的佩伦特斯基鼠腔隙
-
第1-c节
Lorem ipsum dolor sit amet，是一位杰出的领导者。
悬浮物和turpis是一种发酵剂。前庭
拍卖人neque ac nunc elementum malesuada。不受限制的自由
连续前庭。塞德车。我的朋友，我的朋友
乌尔特里斯卢克图斯。舌苔。福斯·维韦拉·维塔维利特。
埃尼安·比本杜姆·尼布·诺勒姆。苏珊迪丝·奎斯·维利特。整数sit am
<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>
<!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 <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">>></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"><<</a>
<a href="#section1c" class="next">>></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"><<</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">>></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"><<</a>
<a href="#section2c" class="next">>></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"><<</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">>></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"><<</a>
<a href="#section3c" class="next">>></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"><<</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">>></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"><<</a>
<a href="#section4c" class="next">>></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"><<</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">>></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"><<</a>
<a href="#section5c" class="next">>></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"><<</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>