Question

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

你可以在这里看到演示 - ＆gt; 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");
});

Answer 1

变化

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");

Answer 2

为了方便起见，您应该将下一个类和prev添加到锚点按钮。但后来我认为你可以改变

var after_bt = obj.find("a.next"); 
var before_bt = obj.find("a.prev");

Answer 3

你没有提到你正在改变的事情。如果要更改图片，只需将现有图片替换为本地目录中的所选图片即可。但不要改变真实姓名。

如果您想更改滑动系统，您可以更改＆＃34;浮动，位置，对齐等等。试试自己。＆＃34;

jquery滑动横幅

3 个答案: