I've been trying to solve this mystery almost 2 hours, this is giving me a headache. I tried 2 plug-ins already and I'm always getting "* is not a function". My code is exactly like examples so I don't know why it's not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>asd</title>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='serial/jquery.scrollTo.js'></script>
<script type='text/javascript' src='serial/jquery.serialScroll.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').serialScroll({
items:'li',
offset:-230, //when scrolling to photo, stop 230 before reaching it (from the left)
start:1, //as we are centering it, start at the 2nd
duration:1200,
force:true,
stop:true,
lock:false,
cycle:false, //don't pull back once you reach the end
easing:'easeOutQuart', //use this easing equation for a funny effect
jump: true //click on the images to scroll to them
});
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li><img width="500" height="500" src="dummy/dummy.jpg" alt="Css Template Preview" /></li>
<li><img width="500" height="500" src="dummy/dummy1.jpg" alt="Css Template Preview" /></li>
<li><img width="500" height="500" src="dummy/dummy2.jpg" alt="Css Template Preview" /></li>
开发者_如何学运维 <li><img width="500" height="500" src="dummy/dummy3.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</body>
</html>
I must be missing something essential there because I see nothing what's wrong. I'm using jQuery 1.4.2. and there are plug-ins I've tried - Easy Slider, jQuery serial scroll
I assume the src
attribute in these two lines:
<script type='text/javascript' src='serial/jquery.scrollTo'></script>
<script type='text/javascript' src='serial/jquery.serialScroll'></script>
Should end with .js
<script type='text/javascript' src='serial/jquery.scrollTo.js'></script>
<script type='text/javascript' src='serial/jquery.serialScroll.js'></script>
精彩评论