我从另一个开发人员那里继承了一个网站构建，他在主页上构建了一个图像滑块，该滑块基本上循环显示五个图像，并且滑块底部有缩略图导航，当相应的大图像在滑块视口中可见时，缩略图会突出显示。
他使用 HTML、PHP 和 jQuery 将其作为完全自定义的工作完成，这可能是使用带有修改的预构建滑块的更好解决方案（？）。
该功能不允许任何类型的分页功能，因此如果您希望查看任何特定内容（不酷），您必须等待幻灯片继续褪色。此外，单击时的缩略图会转到网站内的内页，而不是显示相应的幻灯片。
我想要实现的基本上是保持滑块自动旋转，但是当悬停在任何缩略图上时使主图像发生变化（淡化），然后我想在缩略图上获得点击事件以链接到内部页。当鼠标悬停离开缩略图时，我希望滑块从该点自动继续。
这是对以下代码的简单修复吗？我应该完全撕开它并从头开始吗？是否有任何预构建的滑块允许此功能开箱即用或稍作修改？
我查看了带有缩略图导航的各种滑块，但它们似乎需要缩略图上的单击事件来更改幻灯片。
任何帮助将不胜感激 - 对滑块方法的意见也会很棒，因为我不相信使用 jQuery 插入背景图像是构建它的最佳方式。
代码如下（抱歉有多少 - 我也不相信 div 命名结构！）：
<?php
// set the array for the values to change etc.
$post_ids = array(6,8,10,124,135);
$links = array(
'title 1',
'title 2',
'title 3',
'title 4',
'title 5',);
$sub_header = array(
'sub title 1',
'sub title 2',
'sub title 3',
'sub title 4',
'sub title 5');
$banner_large_small_images = array(
'thumb title 1',
'thumb title 2',
'thumb title 3',
'thumb title 4',
'thumb title 5');
$banner_content = array(
'description text 1',
'description text 2',
'description text 3',
'description text 4',
'description text 5');
?>
<!-- javascript for banner with fader -->
<script type="text/javascript">
(function($) {
$(document).ready(function() {
// Load the first image and set the first content //
$('#banner-to-go').css('opacity', '0');
$('#banner-to-go').css("background-image", "url(<?php echo get_template_directory_uri(); ?>/images/home-tabs/<?php echo $banner_large_small_images[0];?>_largeheader.jpg)") + $("#banner-text-container").html('<?php echo '<h2>'.$links[0].'<br /><span>'.$sub_header[0].'</span></h2><p>'.$banner_content[0].'</p>';?>');
<?php
// loop through the css buttons
$count_array = count($links); // should be 5 for banners;
$i = 0;
$i2 = 1;
while ($i <= ($count_array - 1))
{
// check for the first value
if ($i == 0)
{
?>
$('#button_banner_<?php echo $i2; ?>').css("background-image", "none)");
<?php
}
else
{
?>
$('#button_banner_<?php echo $i2; ?>').css("background-image", "url(<?php echo get_template_directory_uri(); ?>/images/home-tabs/<?php echo $banner_large_small_images[$i];?>_smallheader.jpg)");
<?php
}
$i++;
$i2++;
}
?>
$('#banner-to-go').fadeTo("slow", 1);
<?php
// loop through the values + javscript
$count_array = count($links); // should be 5 for banners;
$ib = 0;
while ($i <= ($count_array - 1))
{
?>
$('#<?php echo $links[$i];?>').click(function()
{
<?php
// loop through the other buttons to show images just incase
$ib = 0;
$id = 1;
while ($ib <= ($count_array - 1))
{
?>
$('#button_banner_<?php echo $id; ?>').css("background-image", "url(<?php echo get_template_directory_uri(); ?>/images/home-tabs/<?php echo $banner_large_small_images[$ib];?>_smallheader.jpg)");
<?php
$ib++;
$id++;
}
?>
$(this).css("background-image", "none");
// do my image switching logic here.
$('#banner-to-go').fadeTo('slow', 0, function()
{
$("#banner-text-container").html('<?php echo $banner_content[$i];?>');
$(this).css("background-image", "url(<?php echo get_template_directory_uri(); ?>/images/home-tabs/<?php echo $banner_large_small_images[$i];?>_largeheader.jpg)"); }).delay(50).fadeTo('slow', 1);
return false;
});
<?php
$i++;
}
?>
});
})
(jQuery);
</script>
<script language="JavaScript" type="text/javascript">
jQuery(document).ready(function(){
$j=jQuery.noConflict();
// Set the array of banner images //
var imgArr = new Array(
<?php
// loop through the links
$count_array = count($post_ids); // should be 5 for banners;
$i_links = 0;
while ($i_links < $count_array)
{
?>
'<?php echo get_template_directory_uri(); ?>/images/home-tabs/<?php echo $banner_large_small_images[$i_links];?>_largeheader.jpg'
<?php
// check the comment is needed
if ($i_links < ($count_array - 1))
{
?>
,
<?php
}
$i_links++;
}
?>
);
var contentArr = new Array(
<?php
// loop through the links
$count_array = count($post_ids); // should be 5 for banners;
$i_links = 0;
while ($i_links < $count_array)
{
?>
'<h2><?php echo $links[$i_links];?><br /><span><?php echo $sub_header[$i_links];?></span></h2><p><?php echo $banner_content[$i_links];?></p>'
<?php
// check the comment is needed
if ($i_links < ($count_array - 1))
{
?>
,
<?php
}
$i_links++;
}
?>
);
var hyperArr = new Array(
<?php
// loop through the links
$count_array = count($post_ids); // should be 5 for banners;
$i_links = 1;
while ($i_links <= $count_array)
{
?>
'<?php echo get_permalink($post_ids[$i_links - 1]); ?>'
<?php
// check the comment is needed
if ($i_links < $count_array)
{
?>
,
<?php
}
$i_links++;
}
?>
);
var button_number_Arr = new Array(
1, 2 ,3, 4, 5
);
var preloadArr = new Array();
var preloadHyper = new Array();
var preloadHContent = new Array();
var preloadHButton = new Array();
/* preload images */
var i;
for(i=0; i < imgArr.length; i++){
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
preloadHyper[i] = hyperArr[i];
preloadHContent[i] = contentArr[i];
preloadHButton[i] = button_number_Arr[i];
}
var currImg = 1;
var currContent = 1;
var currButton = 1;
var intID = setInterval(changeImg, 5000);
/* image rotator */
function changeImg(){
// Fade out
$j('#banner-to-go').animate({opacity: 0}, 1000, function(){
// Set the content of the banner box
$j("#banner-text-container").html(preloadHContent[currContent++%preloadArr.length]);
// Set the buttons to correct the opacity of the css.
$j('#button_banner_1').css("background-image", "url(<?php echo get_template_directory_uri(); ?>/images/home-tabs/<?php echo $banner_large_small_images[0];?>_smallheader.jpg)");
$j('#button_banner_2').css("background-image", "url(<?php echo get_template_directory_uri(); ?>/images/home-tabs/<?php echo $banner_large_small_images[1];?>_smallheader.jpg)");
$j('#button_banner_3').css("background-image", "url(<?php echo get_template_directory_uri(); ?>/images/home-tabs/<?php echo $banner_large_small_images[2];?>_smallheader.jpg)");
$j('#button_banner_4').css("background-image", "url(<?php echo get_template_directory_uri(); ?>/images/home-tabs/<?php echo $banner_large_small_images[3];?>_smallheader.jpg)");
$j('#button_banner_5').css("background-image", "url(<?php echo get_template_directory_uri(); ?>/images/home-tabs/<?php echo $banner_large_small_images[4];?>_smallheader.jpg)");
$j('#button_banner_' + preloadHButton[currButton++%preloadHButton.length]).css('background-image','none');
// Set the background image and fade in
$j('#banner-to-go').css('background','url(' + preloadArr[currImg++%preloadArr.length].src +')'); }).animate({opacity: 1}, 1000);
return false;
}
});
</script>
<div id="banner-complete-container">
<div id="banner-to-go">
<div id="banner-text-container">
</div>
</div>
<div id="booking-form-generic">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("booking-panel-column") ) : ?>
<?php endif; ?>
</div>
<div id="banner-lower-menu">
<ul>
<?php
// loop through the values + javscript
$count_array = count($post_ids); // should be 5 for banners;
$i = 0;
$i2 = 1;
while ($i <= ($count_array - 1))
{
?>
<?php //echo $links[$i];?>
<li id="button_banner_<?php echo $i2;?>" style="text-align:center; width:<?php echo $i < 4 ? '20':'19.5'; ?>%; float:left; <?php echo $i < 4 ? 'border-right:solid 1px #FFFFFF;':''; ?>"><a href="<?php echo get_permalink($post_ids[$i]); ?>"><strong><?php echo $links[$i];?></strong><br /><?php echo $sub_header[$i];?></a></li>
<?php
$i++;
$i2++;
}
?>
</ul>
</div>
</div>