Wordpress PHP Condition - php

Question

My homepage has a vertical slider that displays the titles of 5 posts at the top of my homepage. Each post that displays has a background image that is shown behind it. It is currently working well, although I would to display a different background image behind each post display. I have no clue as to how to do this using PHP code. I have posted the code below that shows the file that contains the JCarousel functionality. I'm guessing I need to setup some type of condition that allows a new background image to display with each 'list' item?
Here's the code:
<div id="home-gallery-wrapper">
<ul id="home-gallery" class="jcarousel-skin-home clearfix">
<?php
global $post;
if ( get_option('minimax_hl_show') == '1' ) {
$my_query = get_pages('include='.get_option('minimax_hl_ID').'');
} else {
$my_query = get_posts('include='.get_option('minimax_hl_ID').'');
}
foreach($my_query as $post) :
setup_postdata($post);
?>
<li style="width:910px"><div style="
background:url('<?php bloginfo('template_directory'); ?>/images/banner3.png')
center top no-repeat;">
<table align="center" style="width:910px;
height:200px">
<tr>
<td style="vertical-align:top">
<div style="width:90%; display:block; margin-left:auto; margin-right:auto">
<h2 style="text-align:center; border:none; text-decoration:none; font-family:calligraffiti;
margin-top:15px; font-size:1.8em; line-height:35px; color:#fff; position:relative; z-index:10">
<a style="color:#fff; border:none; text-decoration:none"
title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink(); ?>"
rel="bookmark"><?php the_title(); ?></a></h2>
</div>
</td></tr>
</table></div>
<?php
$key="show-video";
if ( get_post_meta($post->ID, $key, true) != '' ) {
?>
<div class="video"><?php echo get_post_meta($post->ID, $key, true); ?></div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("embed").attr("wmode", "transparent");
});
</script>
<?php
} else if ( has_post_thumbnail() ) {
?>
<a title="Permanent Link to <?php the_title(); ?>"
href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
<?php } ?>
</li>
<?php
endforeach;
?>
</ul>
</div><!-- end home-gallery-wrapper -->
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#home-gallery').jcarousel({
vertical: true,
scroll: 1,
easing: 'easeInOutBack',
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback,
animation: 800
});
});
</script>

Answer 1

Create 5 different banners with the colours of your choice and call them banner1.png, banner2.png, banner3.png etc.
Then replace
foreach($my_query as $post) :
setup_postdata($post);
?>
<li style="width:910px"><div style="
background:url('<?php bloginfo('template_directory'); ?>/images/banner3.png')
center top no-repeat;">
With this
$i = 0;
foreach($my_query as $post) :
setup_postdata($post);
?>
<li style="width:910px"><div style="
background:url('<?php bloginfo('template_directory'); ?>/images/banner<?php $i++; ?>.png')
center top no-repeat;">