使用jQuery将鼠标悬停在缩略图导航上时，如何更改横幅图像？

时间：2013-07-16 13:23:23

标签： php jquery html slider banner

我继承了另一个开发者的网站构建，他在主页上构建了一个图像滑块，它基本上循环显示了五个图像，并且滑块底部有缩略图导航，当相应的大图像可见时，缩略图突出显示滑块视口。

他使用HTML，PHP和jQuery完成了一个完全自定义的工作，这可能是使用带有修改（？）的预制滑块的更好解决方案。

该功能不允许任何类型的分页功能，因此如果您要查看任何特定内容（非酷），则必须等待幻灯片继续淡入淡出。此外，单击时缩略图将转到站点内的内页，而不是显示相应的幻灯片。

我想要实现的是基本上保持滑块自动旋转但是当通过任何缩略图进行HOVERING时使主图像发生变化（使用淡入淡出）然后我想要将缩略图上的点击事件链接到链接到内页。当鼠标悬停离开缩略图时，我希望滑块从该点自动继续。

这是对以下代码的简单修复吗？我应该把它拆开并从头开始吗？是否有任何预先构建的滑块可以开箱即用或进行少量修改？

我查看了各种带有缩略图导航的滑块，但他们似乎需要缩略图上的点击事件来更改幻灯片。

任何帮助都将非常感激 - 对滑块方法的意见也很好，因为我不相信使用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>

0 个答案:

没有答案
相关问题
最新问题