<script type="text/javascript" src="jquery-latest.pack.js"></script>
    <script type="text/javascript" src="slide.js"></script>  
    <link href="style.css" rel="stylesheet" type="text/css" />

 <div id="menu" class="menu">
	 <ul>
	 <li><a href="javascript:;">Home</a></li>
	 <li><a href="javascript:;">HTML/CSS</a></li>
	 <li><a href="javascript:;">JavaScript</a></li>
        <li><a href="javascript:;">Resources</a></li>
	<li><a href="javascript:;">Tutorials</a></li>
	<li><a href="javascript:;">About</a></li>
	 </ul>
 </div>

/** style need add for slide menu **/	
 
		.menu ul li a span { 
			position: absolute;
			left: 0;
			width: 110px;
		}
 
		.menu ul li a span.out {
			top: 0px;
		}
 
		.menu ul li a span.over,
		.menu ul li a span.bg {  
			top: -45px;
		}
 
		/** image background **/
 
		#menu {
			background:url(bg_menu.gif) scroll 0 -1px repeat-x;
			border:1px solid #CCC;
		}
 
		#menu ul li a {
			color: #000;
		}
 
		#menu ul li a span.over {
			color: #FFF;
		}
 
		#menu ul li span.bg { 
			height: 45px;
			background: url(bg_over.gif) center center no-repeat;
		}
 
		/** color background **/
 
		#menu2 {
			background:#45A8DF;
		}
 
		#menu2 ul li a {
			color:#FFF;
		}
 
		#menu2 ul li a span.over {
			background: #A6DD00;
			color:#333;
		}
		#menu2 ul li.nav1 a span.over {
			background: #fea274;
		}
		#menu2 ul li.nav2 a span.over {
			background: #b0bbba;
		}
		#menu2 ul li.nav3 a span.over {
			background: #a3f091;
		}
		#menu2 ul li.nav4 a span.over {
			background: #86dbf9;
		}
		#menu2 ul li.nav5 a span.over {
			background: #e0caf0;
		}
		#menu2 ul li.nav6 a span.over {
			background: #9dace9;
		}

defaults = {
		contentlist:'.contentlist',
		textlist:'.textlist',
		btnlist:'.btnlist', 
		timeout:2000
	   };

<div class="ifocus">
  <div class="ifocus_pic">
	 <div class="contentlist">
		 <ul>
			 <li>slider content</li>
			 <li>slider content</li>
			 <li>slider content</li>
			 <li>slider content</li>
		 </ul>
	 </div>
	 <div class="ifocus_opdiv"></div>
	 <div class="textlist">
		 <ul>
			 <li class="current">slide up text</li>
			 <li>slide up text</li>
			 <li>slide up text</li>
			 <li>slide up text</li>
		 </ul>
	 </div>
   </div>
  <div  class="btnlist">
		 <ul>
			 <li class="current" ><img src="images/b1.gif" alt="control button 1" /></li>
			 <li><img src="images/b2.gif" alt="control button 2" /></li>
			 <li><img src="images/b3.gif" alt="control button 3" /></li>
			 <li><img src="images/b4.gif" alt="control button 4" /></li>
		 </ul>
  </div>
</div>

    <link href="superslider.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" language="javascript" src="jquery-latest.pack.js" ></script>
    <script type="text/javascript" language="javascript" src="jquery.superslider.js" ></script>
    <script type="text/javascript" language="javascript"  >
    $(document).ready(function(){ 
          $('.ifocus').superSlider();
     });
   </script>

<div class="ifocus">
	<div class="ifocus_pic">
		<div class="contentlist">
			<ul>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a1.jpg" alt="" /></a></li>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a2.jpg" alt="" /></a></li>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a3.jpg" alt="" /></a></li>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a4.jpg" alt="" /></a></li>
			</ul>
		</div>
		<div class="ifocus_opdiv"></div>
		<div class="textlist">
			<ul>
				<li class="current">fire <a href=''>link</a></li>
				<li class="normal">design idea <a href="http://www.brightyoursite.com/blog/" target="_blank">Elegant design</a></li>
				<li class="normal">Beautiful city </li>
				<li class="normal">word of the day</li>
			</ul>
		</div>
	</div>
	<div  class="btnlist">
		<ul>
			<li class="current" id="p0"><img src="images/b1.gif" alt="" /></li>
			<li id="p1"><img src="images/b2.gif" alt="" /></li>
			<li id="p2"><img src="images/b3.gif" alt="" /></li>
			<li id="p3"><img src="images/b4.gif" alt="" /></li>
		</ul>
	</div>
</div>

  $('#slider1,#slider2').superSlider(
     contentlist:'.contentlist',
     textlist:'.textlist',
     btnlist:'.btnlist', 
     timeout:3000
  );

<script type="text/javascript">
(function(){
 
var zooming=function(e){
    e=window.event ||e;
    var o=this,data=e.wheelDelta || -e.detail*40,zoom,size; 
    if(!+'\v1'){//IE
        zoom = parseInt(o.style.zoom) || 100; 
        zoom += data / 12;
        if(zoom > zooming.min) 
            o.style.zoom = zoom + '%';
        e.returnValue=false;
    }else {
        size=o.getAttribute("_zoomsize").split(",");
        zoom=parseInt(o.getAttribute("_zoom")) ||100;
        zoom+=data/12;
        if(zoom>zooming.min){
            o.setAttribute("_zoom",zoom);
            o.style.width=size[0]*zoom/100+"px";
            o.style.height=size[1]*zoom/100+"px";
        }
        e.preventDefault(); 
        e.stopPropagation();//for firefox3.6
    }
};
zooming.add=function(obj,min){// first parameter is for the image need to zoom ,min define the image zoom size ,default to 50
    zooming.min=min || 50;
    obj.onmousewheel=zooming;
    if(/Firefox/.test(navigator.userAgent))//if Firefox
        obj.addEventListener("DOMMouseScroll",zooming,false);
    if(-[1,]){//if not IE
        obj.setAttribute("_zoomsize",obj.offsetWidth+","+obj.offsetHeight);
    }
};
 
window.onload=function(){//must be onload , in order to get the image size
    zooming.add(document.getElementById("test"));
}
})()
</script>

 <img alt='' id='test' src="../demo/pflimg/bcms.gif" />