Question

我正在寻找可以帮助我将自动幻灯片与手动幻灯片相结合的人，现在我只是在做自动滑动或手动滑动，但是我不知道如何组合它，在这里我只是在做自动滑动。

var element=document.getElementById("slider");
var myImgs = [ 
    "../banner4.jpg",
    "../bannerdc.jpg",
    "../bannerknot.jpg",
    "../mr7banner.jpg",
    "../kornbanner.jpg"
];
function mySlide(element, myImgs){

    setInterval(function(){
    var Random = Math.floor(Math.random()*myImgs.length);
    element.src=myImgs[Random];
     },3000);
}

mySlide(element, myImgs);

Answer 1

保存SetInterval变量，以便稍后可以清除超时，然后使用事件处理“手动滑块”。

示例代码：

 $tarray = json_decode($sjson);
$newarray = array('sample'=>array());
foreach($tarray->name as $ix => $name) {
    $newarray['catalog'][]=array(
        'name'  => $tarray->name[$ix],
        'image' => $tarray->image[$ix],
        'price' => $tarray->price[$ix],
    );
}
$sjson = json_encode($newarray);

注意：请注意，您还应该测试极限条件-当您在最后一张图像上并尝试向右移动时，当您在左侧图像上并尝试向左移动时！

类似的东西：

var interval;
var element=document.getElementById("slider");
var myImgs = [ 
    "../banner4.jpg",
    "../bannerdc.jpg",
    "../bannerknot.jpg",
    "../mr7banner.jpg",
    "../kornbanner.jpg"
];
function mySlide(element, myImgs){

    interval=setInterval(function(){
    var Random = Math.floor(Math.random()*myImgs.length);
    element.src=myImgs[Random];
     },3000);
}

mySlide(element, myImgs);
//a button you create for manual changing the slider
$("#arrow-right").click(function(){
    clearInterval(interval) //Stop the "auto slider"
    var index=myImgs.indexOf(element.src);
    element.src=myImgs[index+1];
    mySlide(element, myImgs); //Restart the "auto slider" can also do this in another button
})
//a button you create for manual changing the slider
$("#arrow-left").click(function(){
    clearInterval(interval) //Stop the "auto slider"
    var index=myImgs.indexOf(element.src);
    element.src=myImgs[index-1];
    mySlide(element, myImgs); //Restart the "auto slider" can also do this in another button
})

我该如何将自动滑块与手动滑块相结合的javascript代码？

1 个答案: