我是新来的,使用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>
感谢
答案 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 <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>
希望这会有所帮助。 此致