您好我在使用此插件滑动内容时遇到麻烦 http://www.copterlabs.com/demo/contentslider/我已经弄明白了如何将它自动滑动到最后但是当它到达最后一个时它不会回到第一张幻灯片。 请看我的代码。
jquery.ennui.contentslider.js
(function($) {
$.fn.ContentSlider = function(options)
{
var defaults = {
leftBtn : 'images/cs_leftImg.jpg',
rightBtn : 'images/cs_rightImg.jpg',
width : '900px',
height : '400px',
speed : 400,
easing : 'easeOutQuad',
textResize : false,
IE_h2 : '26px',
IE_p : '11px'
}
var defaultWidth = defaults.width;
var o = $.extend(defaults, options);
var w = parseInt(o.width);
var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
var x = -1*w*n+w; // Minimum left value
var p = parseInt(o.width)/parseInt(defaultWidth);
var thisInstance = this.attr('id');
var inuse = false; // Prevents colliding animations
function moveSlider(d, b)
{
var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
if(isNaN(l)) {
var l = 0;
}
var m = (d=='left') ? l-w : l+w;
if(m<=0&&m>=x) {
b
.siblings('.cs_wrapper')
.children('.cs_slider')
.animate({ 'left':m+'px' }, o.speed, o.easing, function() {
inuse=false;
});
if(b.attr('class')=='cs_leftBtn') {
var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
} else {
var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
}
if(m==0||m==x) {
thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); });
}
if(otherBtn.css('opacity')=='0') {
otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing });
}
}
}
function vCenterBtns(b)
{
// Safari and IE don't seem to like the CSS used to vertically center
// the buttons, so we'll force it with this function
var mid = parseInt(o.height)/2;
b
.find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end()
.find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 });
}
return this.each(function() {
$(this)
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
// Add the buttons to move left and right
.prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>')
.append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>')
// Dig down to the article div elements
.find('.cs_article')
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
.end()
// Animate the entrance of the buttons
.find('.cs_leftBtn')
.css('opacity','0')
.hide()
.end()
.find('.cs_rightBtn')
.hide()
.animate({ 'width':'show' });
// Resize the font to match the bounding box
if(o.textResize===true) {
var h2FontSize = $(this).find('h2').css('font-size');
var pFontSize = $(this).find('p').css('font-size');
$.each(jQuery.browser, function(i) {
if($.browser.msie) {
h2FontSize = o.IE_h2;
pFontSize = o.IE_p;
}
});
$(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' });
$(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
$(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
}
// Store a copy of the button in a variable to pass to moveSlider()
var leftBtn = $(this).children('.cs_leftBtn');
leftBtn.bind('click', function() {
if(inuse===false) {
inuse = true;
moveSlider('right', leftBtn);
}
return false; // Keep the link from firing
});
// Store a copy of the button in a variable to pass to moveSlider()
var rightBtn = $(this).children('.cs_rightBtn');
rightBtn.bind('click', function() {
if(inuse===false) {
inuse=true;
moveSlider('left', rightBtn);
}
return false; // Keep the link from firing
});
vCenterBtns($(this)); // This is a CSS fix function.
});
}
})(jQuery)
jscript.js
$(document).ready(function(){
setInterval(function(){
$('.cs_rightBtn').click()
},3000)
});
HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title> Content Slider Demonstration | Ennui Design </title>
<body>
<h1> Content Slider Demonstration </h1>
<h2> Content Slider Version 1 </h2>
<p>
This content slider was implemented with the following code:
</p>
$(function() {
$('#one').ContentSlider({
width : '900px',
height : '400px',
speed : 800,
easing : 'easeInOutBack'
});
});
<div id="one" class="contentslider">
<div class="cs_wrapper">
<div class="cs_slider">
<div class="cs_article">
<h2> <a href="#">Article Number One</a> </h2>
<a href="#">
<img src="images/article01.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Hendrerit tincidunt vero vel eorum claritatem. Soluta
legunt quod qui dolore typi. Vel dolore soluta qui odio
non. Sollemnes minim eorum feugiat nihil nobis. Gothica
dolor in legentis nihil quinta.
</p>
<p>
Iriure parum autem putamus lectores duis. Quam sit quis
me me zzril. Facer etiam in lectores hendrerit etiam.
Exerci lorem liber tincidunt nostrud decima. Mutationem
est zzril ipsum facer nobis.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Two</a> </h2>
<a href="#">
<img src="images/article02.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Nibh nihil et ex accumsan insitam. Qui lius congue
hendrerit quam vero. Demonstraverunt molestie ipsum
magna nobis sequitur. Ex diam euismod quis ii velit.
</p>
<p>
In quam lectores placerat Investigationes illum. Diam
sollemnes nihil lorem claram consectetuer. Eros nam
placerat claritas claritatem congue. Adipiscing ut
clari suscipit nulla habent.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Three</a> </h2>
<a href="#">
<img src="images/article03.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Clari eum vel blandit notare quarta. Autem processus
lectores augue iriure facit. Volutpat aliquip erat
imperdiet ipsum tation. Typi luptatum ut
demonstraverunt eros quam. Ut clari consectetuer
tincidunt liber qui.
</p>
<p>
Modo vel facilisis qui liber est. Eorum Investigationes
processus adipiscing commodo ea. Id iis claritatem vero
ea consequat.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Four</a> </h2>
<a href="#">
<img src="images/article04.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Iis nostrud claritas quis sed qui. Ut nunc facilisi
claritatem quinta sit. Assum ii liber diam zzril nobis.
Qui nibh delenit fiant te illum. Delenit claritas ut
exerci eros typi.
</p>
<p>
Videntur vel euismod ut eleifend quis. Nobis aliquam
nunc vero blandit illum. Lius placerat litterarum
processus quam legere. Accumsan modo non at congue
duis. Odio duis ut blandit feugait in.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
</div><!-- End cs_slider -->
</div><!-- End cs_wrapper -->
</div><!-- End contentslider -->
<h2> Content Slider Version 2 </h2>
<p>
This content slider was implemented with the following code:
</p>
$(function() {
$('#two').ContentSlider({
width : '600px',
height : '266px',
speed : 400,
easing : 'easeOutQuad',
textResize : true
});
});
<div id="two" class="contentslider">
<div class="cs_wrapper">
<div class="cs_slider">
<div class="cs_article">
<h2> <a href="#">Article Number One</a> </h2>
<a href="#">
<img src="images/article01.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Hendrerit tincidunt vero vel eorum claritatem. Soluta
legunt quod qui dolore typi. Vel dolore soluta qui odio
non. Sollemnes minim eorum feugiat nihil nobis. Gothica
dolor in legentis nihil quinta.
</p>
<p>
Iriure parum autem putamus lectores duis. Quam sit quis
me me zzril. Facer etiam in lectores hendrerit etiam.
Exerci lorem liber tincidunt nostrud decima. Mutationem
est zzril ipsum facer nobis.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Two</a> </h2>
<a href="#">
<img src="images/article02.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Nibh nihil et ex accumsan insitam. Qui lius congue
hendrerit quam vero. Demonstraverunt molestie ipsum
magna nobis sequitur. Ex diam euismod quis ii velit.
</p>
<p>
In quam lectores placerat Investigationes illum. Diam
sollemnes nihil lorem claram consectetuer. Eros nam
placerat claritas claritatem congue. Adipiscing ut
clari suscipit nulla habent.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Three</a> </h2>
<a href="#">
<img src="images/article03.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Clari eum vel blandit notare quarta. Autem processus
lectores augue iriure facit. Volutpat aliquip erat
imperdiet ipsum tation. Typi luptatum ut
demonstraverunt eros quam. Ut clari consectetuer
tincidunt liber qui.
</p>
<p>
Modo vel facilisis qui liber est. Eorum Investigationes
processus adipiscing commodo ea. Id iis claritatem vero
ea consequat.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Four</a> </h2>
<a href="#">
<img src="images/article04.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Iis nostrud claritas quis sed qui. Ut nunc facilisi
claritatem quinta sit. Assum ii liber diam zzril nobis.
Qui nibh delenit fiant te illum. Delenit claritas ut
exerci eros typi.
</p>
<p>
Videntur vel euismod ut eleifend quis. Nobis aliquam
nunc vero blandit illum. Lius placerat litterarum
processus quam legere. Accumsan modo non at congue
duis. Odio duis ut blandit feugait in.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
</div><!-- End cs_slider -->
</div><!-- End cs_wrapper -->
</div><!-- End contentslider -->
<p class="footer">
All Content © 2009 Ennui Design | <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict</a>
</p>
<!-- Site JavaScript -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jscript.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.ennui.contentslider.js"></script>
<script type="text/javascript">
$(function() {
$('#one').ContentSlider({
width : '900px',
height : '400px',
speed : 800,
easing : 'easeInOutBack'
});
});
$(function() {
$('#two').ContentSlider({
width : '600px',
height : '266px',
speed : 400,
easing : 'easeOutQuad',
textResize : true
});
});
</script>
<script src="js/jquery.chili-2.2.js" type="text/javascript"></script>
<script src="js/chili/recipes.js" type="text/javascript"></script>
</body>
当它到达最后一张幻灯片时，我甚至无法点击上一个按钮。
答案 0 :(得分：0)
首先，使用setInterval是一个坏主意。这里有两个我建议你使用的函数和一个基本的实现。
$(function() {
//initiate ContentSlider
$('#one').ContentSlider({
width : '900px',
height : '400px',
speed : 800,
easing : 'easeInOutBack'
});
//get total number of slides and create a variable to count
//please note that this is only for one slider, not two on the same page
var total = $('.cs_article').length,
i = 1;
//create an event handler to initiate the automation
$('#auto_btn').click(function(){ clickRight(); });
$('#stop').click(function(){ clearTimeout(t); });
//the functions
function clickRight() {
i++;
$('.cs_rightBtn').trigger('click');
if (i!=total){
var t = setTimeout(function(){clickRight()},3000);
}
if (i==total){
clickLeft();
}
}
function clickLeft(){
i--;
$('.cs_leftBtn').trigger('click');
if (i>=1){
var t = setTimeout(function(){clickLeft()},3000);
}
if (i<1){
clickRight();
}
}
});
我希望这对你来说是个不错的垫脚石。您可能想要更改功能，目前它只是在所有幻灯片中滑动。此外，不只是复制和粘贴，阅读代码并理解它，以便您可以根据自己的需要进行手工定制。