Hi, friends i m developing a website and i m using 3 jquery 1 for menu 2nd for background image scroll and 3rd for the banner changing. Before i have using slideshow menu and background image working properly but when i used banner changing slide show it stops my background image changing jquery and very slow performance in ie7 - Pls help me out
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Full Page Background Image | CSS #1</title>
<!-- ####################################### Slideshow inclusion starts ####################################### -->
<script type="text/javascript" src="bsn.js"></script>
<!-- ####################################### Slideshow inclusion ends ####################################### -->
<!--Style Sheet for menu starts-->
<style type="text/css">
div#menu {
top:40px;
left:40px;
width:350px;
/*padding:0 auto;
margin: 0 auto;*/
}
div#copyright { display: none; }
</style>
<!--Style Sheet for menu ends-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function thebackground() {
$('div.background img').css({opacity: 0.0});
$('div.background img:first').css({opacity: 1.0});
setInterval('change()',5000);
}
function change() {
var current = ($('div.background img.show')? $('div.background img.show') : $('div.background img:first'));
if ( current.length == 0 ) current = $('div.background img:first');
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.background img:first') :current.next()) : $('div.background img:first'));
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
$(document).ready(function() {
thebackground();
$('div.background').fadeIn(1000); // works for all the browsers other than IE
$('div.background img').fadeIn(1000); // IE tweak
});
</script>
<!--Style Sheet linking for menu starts-->
<link type="text/css" href="menu.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
<!--Style Sheet linking for menu ends-->
<link href="website.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="background" style="">
<img src="images/bg.jpg" width="1400" height="819" alt="pic1" style="opacity: 1; " class="show">
<img src="images/bg1.jpg" width="1401" height="934" alt="pic2" style="opacity: 0; " class="">
<img src="images/bg2.jpg" width="1400" height="934" alt="pic3" style="opacity: 0; " class="">
<img src="images/bg3.jpg" width="1400" height="934" alt="pic4" style="opacity:0; " class="">
</div>
<div id="page-wrap"><!-- Pagewrap Starts-->
<div id="header"> <!-- Header starts -->
<div id="logo_left"><img src="img/logo.png" width="312" height="165"></div>
<div id="logo_right">
<div id="logotext">
SCAN REMEDIES PVT. LTD.
</div>
</div>
</div> <!-- Header ends -->
<div id="menuouter"> <!-- Menuouter starts -->
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
</li>
<li><a href="#" class="parent"><span>Company Profile</span></a>
</li>
<li><a href="#" class="parent"><span>Products</span></a>
<div><ul>
<li><a href="cefchilo.html"><span>Cefchil-O</span></a></li>
<li><a href="floragut.html"><span>Floragut - SBZ</span></a></li>
<li><a href="scanrd.html"><span>ScanR - D</span></a></li>
<li><a href="fluscanp.html"><span>Fluscan - P</span></a></li>
<li><a href="fluscands.html"><span>Fluscan - DS</span></a></li>
<li><a href="ascanp.html"><span>Ascan - P</span></a></li>
<li><a href="vitazincplus.html"><span>Vitazinc - Plus</span></a></li>
<li><a href="plethora.html"><span>Plethora</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Inquiry</span></a></li>
<li class="last"><a href="#"><span>Contacts</span></a></li>
</ul>
</div>
<div id="copyright">Copyright © 2012 <a href="http://apycom.com/">Apycom jQuery Menus</a></div>
</div> <!-- Menuouter ends -->
<!-- Slideshow Starts from here -->
<div id="slide">
<div id="slideinner">
<img src="ssimg/005.png" alt="" name="cf1" width="951" height="151" id="cf1" />
<img src="ssimg/006.png" alt="" name="cf2" width="951" height="151" id="cf2" />
<img src="ssimg/007.png" alt="" name="cf3" width="951" height="151" id="cf3" />
<img src="ssimg/008.png" alt="" name="cf4" width="951" height="151" id="cf4" />
<script type="text/javascript">
var cf = new Crossfader( new Array('cf1','cf2','cf3','cf4'), 1200, 3000 );
</script>
<!-- <img src="img/slide.jpg" width="951" height="151"> -->
</div>
</div>
<!-- Slideshow ends here -->
<!-------------------------- Content Starts from here ----------------------------------------- -->
<div id="content"> <!-- Content starts -->
<div id="leftouter"> <!-- Leftouter Starts -->
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div> <!-- Leftouter ends -->
<div id="right"> <!-- Right starts -->
<br>
</div> <!-- Right ends -->
</div> <!-- Content ends -->
<div id="footerouter">
<div id="footer"> <!-- Footer Starts -->
<div id="icon"> <!-- Social Contact starts -->
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50"><img src="img/facebook.png" width="48" height="48"></td>
<td width="400"><img src="img/twitter.png" width="48" height="48"></td>
</tr>
</table>
</div> <!-- Social contact ends -->
</div> <!-- Footer ends -->
</div> <!-- Footer outer ends -->
</div> <!-- Pagewrap Ends -->
</body>
</html>