jquery auto cycle with prev and next buttons
I need a to create a slide show with previous and next buttons. So I found an example online. I tried implementing it but there is a part I dont understand: Cufon replacement. I dont know where to add the following code.
// Cufon title replacement
//Cufon.replace('#features .title')('h1')('h2')('#nav-main li a:not(#nav-main li div a)',{ hover: true })('.dropped-list .close')('.nav-segment p')('#hero .content p',{ hover: true })('.date');
//hasSearched = false;
if ($('.starter').length > 0)
{
开发者_C百科 $('.starter').cycle({
fx: 'scrollLeft',
timeout: 10000,
next: '#next',
prev: '#prev'
});
}
<div class="starter">
<img src="images/home_slideshow_1.jpg" alt="Slideshow 1" />
<img src="images/home_slideshow_2.jpg" alt="Slideshow 2" />
</div>
You have to add the Cufon-Javascript to your website:
<head>
(...)
<script type="text/javascript" src="jquery-1.3.2-min.js"> </script>
<script type="text/javascript" src="cycle.js"> </script>
<script type="text/javascript" src="cufon.js"> </script>
<script type="text/javascript" src="yourjs.js"> </script>
(...)
</head>
The Cufon class is here, and yourjs.js will look like this:
$(document).ready(function(){
Cufon.replace('#features .title')('h1')('h2')('#nav-main li a:not(#nav-main li div a)',{ hover: true })('.dropped-list .close')('.nav-segment p')('#hero .content p',{ hover: true })('.date');
if ($('.starter').length > 0)
{
$('.starter').cycle({
fx: 'scrollLeft',
timeout: 10000,
next: '#next',
prev: '#prev'
});
}
});
EDIT:
I see that you also need something like fontname.font.js, which can be generated at Cufon's website
加载中,请稍侯......
精彩评论