Question

我正在使用一个JQuery滑块，在一张幻灯片中显示4个相邻的Wordpress帖子。帖子显示用户可以单击以查看所选服务的服务。有2张幻灯片显示这些服务 - 每张幻灯片4张。每个服务页面都包含顶部的滑块，其下有服务说明。

http://www.richmindonline.com/virtual/service-options/

问题是我希望第二张幻灯片首先加载 - 仅当用户在第二张幻灯片上选择产品时。

如何设置？这是加载滑块的脚本 - 它位于Wordpress中的插件内。

如果需要，我会上传其他代码。

   //$upload_dir = wp_upload_dir();
$output = '<!--Automatic Image Slider w/ CSS & jQuery with some customization-->';
$output .='<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function() {';

//Set Default State of each portfolio piece
if ($pagination_style != '3' ){
    $output .='$j("#rps .paging").show();';
}
$output .='$j("#rps .paging a:first").addClass("active");

$j(".slide").css({"width" : '.$width.'});
$j("#rps .window").css({"width" : '.($width).'});
$j("#rps .window").css({"height" : '.$height.'});

$j("#rps .col").css({"width" : '.(($width/$post_per_slide)-2).'});
$j("#rps .col").css({"height" : '.($height-4).'});
$j("#rps .col p.post-title span").css({"color" : "'.($post_title_color).'"});
$j("#rps .post-date").css({"top" : '.($height-20).'});
$j("#rps .post-date").css({"width" : '.(($width/$post_per_slide)-12).'});';

if (!empty($post_title_bg_color_js)){
    $output .='$j("#rps .col p.post-title").css({"background-color" : "'.($post_title_bg_color_js).'"});';
}

$output .='var imageWidth = $j("#rps .window").width();
//var imageSum = $j("#rps .slider div").size();
var imageReelWidth = imageWidth * '.$paging.';

//Adjust the image reel to its new size
$j("#rps .slider").css({"width" : imageReelWidth});

//Paging + Slider Function
rotate = function(){    
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    //alert(triggerID);
    var sliderPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $j("#rps .paging a").removeClass("active"); 
    $active.addClass("active");

    //Slider Animation
    $j("#rps .slider").stop(true,false).animate({ 
        left: -sliderPosition
    }, 500 );
}; 
var play;
//Rotation + Timing Event
rotateSwitch = function(){      
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
        $active = $j("#rps .paging a.active").next();
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $j("#rps .paging a:first"); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, '.$slider_speed.');
};

rotateSwitch(); //Run function on launch

//On Hover
$j("#rps .slider a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation
}); 

//On Click
$j("#rps .paging a").click(function() { 
    $active = $j(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
}); 
});

</script>';

Answer 1

将此jQuery添加到您的页面将使滑块移动，以便当前产品可见

jQuery(".slider").css("left", jQuery("a[href='" + document.location.pathname + "']").parents().find(".slide").index() * -955);

确保.slide的宽度始终为955px，否则你应该制作955变量。

（这不是使用代码段的最美丽和更少的资源，但它将以最小的努力完成工作; - ）

根据所选链接在页面加载上显示特定幻灯片

1 个答案: