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

簡単にするために、クラス 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 に答える