How to add next/prev buttons to a slideshow

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 += '
' + subtitle + 'test sub
'; //ads += '
'; ads += '

' + subtitle + '

' ; ads += ''; ads += '
'; var pager = '' + 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前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏