Hyper-mega-noob-question, i've been racking my brain over how to add next/ previous buttons to a simple slider i found by Soh Tanaka and wanted to ask for your help in this endevour. So far i have gotten the slider to work with a tooltip and to load the images from an xml (per my requirement) but i'm pretty new to jQuery and can't get the next/previous buttons working :(..Here is what i got so far:
CSS
body {
margin: 0; padding: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
*{outline: none;}
img {border: 0;}
.container {
width: 322px;
padding: 0;
margin:30px 10px 0 10px;
}
/*--Main Container--*/
.main_view {
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:270px; width: 320px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
z-index:1;
}
/*--Paging Styles--*/
.paging {
position: relative;
width: 320px; height:35px;
text-align: center;
line-height: 35px;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 0 2px;
text-decoration: none;
color: #000;
}
.paging a.active {
color: #fff;
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
.box {
margin:0;
padding:0;
display: block;
width:318px;
height:268px;
float: left;
border:1px solid #ddd;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
.box h3 {
font-size: 16px;
text-align:center;
white-space:wrap;
}
.box img {
margin-left:40px;
margin-bottom:-5px;
}
.box .slider-title {
color: red;
margin-bottom:4px;
margin-top:6px;
}
.box .slider-subtitle {
width:320px;
float:left;
margin-bottom:4px;
}
.box .input_Default {
width:320px;
display:block;
float:left;
text-align:center;
}
.loading {
background: url(loading.gif) no-repeat 0 0;
position: absolute;
top: 30px;
left: 30px;
z-index: 9999;
}
.subt {
color: #fff;
background:#1d1d1d;
padding:10px;
position:absolute;
z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.moreinfo .subt { display:none; }
JS
$(document).ready(function() {
$.ajax({
type: "GET",
cache: false,
url: "ads.xml",
data: 'xml',
success: function (d) {
$(d).find('promo').each(function(){
var $promo = $(this);
var title = $promo.find('title').text();
var subtitle = $promo.find('subtitle').text();
var image = $promo.attr('image');
var link = $promo.attr('link');
var index = $promo.attr('index');
var ads = '' + title + ' ';
ads += '
test sub ';
//ads += '
' + subtitle + ' ' ;
ads += '';
ads += ' ' + index + ' ';
$('.image_reel').append($(ads));
$('.paging').append($(pager));
//$('.loading').fadeOut(1400);
});
}
});
$('.image_reel').ajaxStop(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window").width();
var imageSum = $(".box").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".image_reel").animate({
left: -image_reelPosition
}, 800 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 7000);
};
rotateSwitch();
$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
$(".next a").click(function() {
$active = $('.paging a.active').parent().next().find('a');
if ( $active.length === 0) { //If paging reaches the end…
$active = $('.paging a:first'); //go back to first
}
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
$(".prev a").click(function() {
$active = $('.paging a.active').prev();
if ( $active.length === 0) { //If paging reaches the end…
$active = $('.paging a:first'); //go back to first
}
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
$('.moreinfo').each(function() {
var subt = $(this).find('.subt');
$(this).hover(
function() { subt.appendTo('body'); },
function() { subt.appendTo(this); }
).mousemove(function(e) {
var x = e.pageX + 20,
y = e.pageY + 20,
w = subt.width(),
h = subt.height(),
dx = $(window).width() - (x + w),
dy = $(window).height() - (y + h);
if ( dx < 20 ) x = e.pageX - w - 20;
if ( dy < 20 ) y = e.pageY - h - 20;
subt.css({ left: x, top: y });
});
});
});
});
HTML
All the images and buttons are pulled from an XML, and that works just fine but the next/prev buttons are my main issue :(.
Here is the original, non-XML version on JSFiddle i put up for testing, *EDIT, original version* http://jsfiddle.net/scPqJ/1/
Can one of you ninjas out there show me the right direction?
**EDIT**
for any future generation looking for a solution, a user in sohtanaka.com comments helped me out and got it working, here is the JsFiddle, http://jsfiddle.net/scPqJ/3/
This is the Js for the buttons (you set it in the end of the original JS, before the end brackets:
JS
$(".previous a").click(function() {
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
$(".next a").click(function() {
$active = $('.paging a.active').prev();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:last'); //go back to first
}
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
After you set that up, all you have to do is define the next/previous divs in the html, like so:
HTML
and Voila!. 以上就是How to add next/prev buttons to a slideshow的详细内容，更多请关注web前端其它相关文章！
上一篇How to add padding to elements in jQuery Mobile 下一篇preload images with a specific class with jquery
