如何将下一个/上一个按钮添加到幻灯片中
Hyper-mega-noob-question，我一直在讨论如何将下一个/前一个按钮添加到Soh Tanaka发现的简单滑块上，并希望在此次活动中寻求您的帮助。 到目前为止，我已经让滑块使用工具提示并从xml加载图像（根据我的要求），但我是jQuery的新手，无法使下一个/上一个按钮工作:( ..这是到目前为止我得到了什么：
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 = ''; 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
所有的图像和按钮都是从XML中提取的，而且工作正常，但是下一个/上一个按钮是我的主要问题:(。
这是我在JSFiddle上进行测试的原始非XML版本， EDIT，原始版本 http://jsfiddle.net/scPqJ/1/
你们其中一个忍者可以向我展示正确的方向吗？
编辑
对于寻找解决方案的下一代人来说，sohtanaka.com上的用户评论帮助我解决了问题，这里是JsFiddle， http：//jsfiddle.net/scPqJ/3/
这是按钮的Js（你在原始JS的末尾设置它，在结束括号之前：
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 });
设置完之后，您所要做的就是在html中定义下一个/上一个div，如下所示：
HTML
和瞧！
这个应该工作（虽然它远非完美，请参阅下面的评论）：
$('#next').click(function(){ var $pagingLinks = $('.paging a'); var $nowActive = $('.paging a.active'); var nextIndex = $nowActive.index()+1; if(nextIndex == $pagingLinks.length) nextIndex = 0; $active = $pagingLinks.eq(nextIndex); //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor });
我在这里假设你有一个id’next’的链接在这里继续前进。 您会注意到此代码的第二部分（以“重置计时器”开头）取自您的代码（用于单击分页链接的事件处理程序）。
评论：
-
在你的’分页’链接的代码中（我复制了一部分）你正在处理一个变量’$ active’。 这个变量是全局定义的（作为全局对象的属性），通常应该避免使用。 你在这里使用jquery，所以将你的’滑块’代码封装在它自己的插件中肯定是有意义的（请参阅jquery docs以获得帮助）
-
您可以使用.data（）将此信息添加到插件的某个主要元素，而不是设置’$ active’变量