0

我正在尝试制作一个滑动横幅，它可以控制上一个/下一个按钮...

你可以在这里看到演示 -> http://fiddle.jshell.net/VgMNc/

问题是如果我想从此更改 html 代码...

<p><a href="#">next</a></p>
<p><a href="#">prev</a></p>

到

<a href="#" class="btnNext">next</a>
<a href="#" class="btnPrev">prev</a>

这〜我应该如何更改jquery源？

请帮帮我~:)

（下面的完整来源）

<div class="visualIMG"> 
    <div class="visualList">
        <ul>
            <li>img1</li>
            <li>img2</li>
            <li>img3</li>
        </ul>
    </div>
    <p><a href="#">next</a></p>
    <p><a href="#">prev</a></p>
    <a href="#" class="visualIMG_play">play</a>
    <a href="#" class="visualIMG_stop">stop</a>
</div>



.visualIMG {width:202px; height:135px;}
.visualIMG p {float:left; width:50px; height:50px; margin:1px; background:gray }
.visualIMG .visualList {position:relative; overflow:hidden; float:left; width:118px; height:115px;}
.visualIMG .visualList ul {position:absolute; left:0px; top:0px; width:20000px; height:115px;}
.visualIMG .visualList ul li {float:left; width:118px; height:115px; background:#9CF}



var visualIMG_speed = 300; 
var visualIMG_time; 
var visualIMG_timeSpeed = 1000;
var visualIMG_auto = "Y";
function visualIMG_AC(sel){
    var obj = jQuery("."+sel); 
    var after_bt = obj.find(">p").eq(0); 
    var before_bt = obj.find(">p").eq(1); 
    var bn_play = obj.find(" .visualIMG_play"); 
    var bn_stop = obj.find(" .visualIMG_stop"); 

    obj.attr("clickCheck","on");

    after_bt.click(function(){visualIMG_after(obj);return false;});
    before_bt.click(function(){visualIMG_before(obj);return false;});

    bn_play.click(function(){visualIMG_play(obj);return false;});
    bn_stop.click(function(){visualIMG_stop(obj);return false;});

    if(visualIMG_auto == "Y"){
        visualIMG_play(obj);
    }
}
function visualIMG_after(obj){
    if(obj.attr("clickCheck") == "on"){
        visualIMG_stop(obj);
        obj.attr("clickCheck","off");
        var move_obj = jQuery(obj).find(" > div.visualList > ul"); 
        var move_obj_width = (move_obj.find(">li").width() * -1); 

        move_obj.find(">li").eq(0).clone().appendTo(move_obj);
        move_obj.animate(
            {left:move_obj_width}
            ,visualIMG_speed
            ,function(){

                move_obj.find(">li").eq(0).remove();
                move_obj.css("left","0");
                obj.attr("clickCheck","on");

                if(visualIMG_auto == "Y"){
                    visualIMG_play(obj);
                }
            }
        );
    }
}
function visualIMG_before(obj){
    if(obj.attr("clickCheck") == "on"){
        visualIMG_stop(obj);
        obj.attr("clickCheck","off");
        var move_obj = jQuery(obj).find(" > div.visualList > ul"); 
        var move_obj_width = (move_obj.find(">li").width() * -1);

        move_obj.find(">li:last").clone().prependTo(move_obj);
        move_obj.css("left",move_obj_width+"px");

        move_obj.animate(
            {left:0}
            ,visualIMG_speed
            ,function(){
                move_obj.find(">li:last").remove();
                obj.attr("clickCheck","on");

                if(visualIMG_auto == "Y"){
                    visualIMG_play(obj);
                }
            }
        );
    }
}

function visualIMG_play(obj){
    visualIMG_stop(obj);
    jQuery(obj).attr("timer",setInterval(function(){visualIMG_after(obj)},visualIMG_timeSpeed));
    return false;
} 
function visualIMG_stop(obj){

    clearInterval(jQuery(obj).attr("timer"));
    return false;
}
jQuery(document).ready(function() {
visualIMG_AC("visualIMG");
});
4

3 回答 3

4

改变

var after_bt = obj.find(">p").eq(0); 
var before_bt = obj.find(">p").eq(1);

到

var after_bt = obj.find(".btnNext"); 
var before_bt = obj.find(".btnPrev");
于 2013-07-29T07:16:49.887 回答
1

为了使它更容易，您可能应该将 class next 和 prev 添加到锚按钮。但我认为你可以改变

var after_bt = obj.find("a.next"); 
var before_bt = obj.find("a.prev");
于 2013-07-29T07:21:10.857 回答
0

你没有提到你正在改变什么。如果您想更改图片 - 只需将现有图片替换为您在本地目录中选择的图片。但不要更改真实姓名。

如果您想更改滑动系统，您可以更改“浮动、位置、对齐等。自己尝试”。

于 2013-08-22T05:57:20.330 回答