style.css
#header{500px;text-align:center;line-height:35px;font-size:12px;color:#fff;background:#ccc;} #main{500px;height:340px;margin:auto;position:relative;border:1px solid #ccc;} #banner {position:absolute; 480px; height:272px; border:1px solid #666; overflow:hidden;left:10px;top:56px;} #bannerList img {border:0px;} #bannerBg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;cursor:pointer; 478px; } #bannerInfo{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer} #bannerText {position:absolute;120px;z-index:1002; right:3px; bottom:3px;} #banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;margin:0; padding:0; bottom:3px; right:5px;} #banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#ccc;cursor:pointer;} #banner ul li.show { background:#900;} #bannerList a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>图片轮播切换</title> <link rel="stylesheet" type="text/css" href="style.css"> <style> </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> var t = 0; var n = 0; var count; $(document).ready(function(){ count=$("#bannerList a").length;//获取用户控制a标签的总数 $("#bannerList a:not(:first-child)").hide();//除了第一个元素都隐藏 $("#banner li").click(function(){//给存放图片的列表添加单击事件 var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4 n = i;//i的值赋值给n if (i >= count){//判断是否大于a标签的总数 return; } var $a = $("#bannerList a").filter(":visible").fadeOut(500); $a.parent().children().eq(i).fadeIn(1000);//根据当前li元素的值显示图片 $("#banner").css("background","");//显示按钮样式 $(this).toggleClass("show");//当前对象删除类show $(this).siblings().removeAttr("class");//当前对象删除类属性 }); t = setInterval("showTime()", 3000);//每隔三秒执行一次方法 $("#banner").hover(function(){//给按钮添加鼠标滑过事件 clearInterval(t)},function(){//鼠标滑过停止播放 t = setInterval("showTime()", 3000);//鼠标滑出继续播放 }); }) function showTime() { if(n>=(count-1)){ n=0; }else{ n=++n; } $("#banner li").eq(n).trigger('click'); } </script> </head> <body> <div id="main"> <div id="header">带动画效果的图片轮播</div> <div id="banner"> <div id="bannerBg"></div> <div id="bannerInfo"></div> <ul> <li class="show">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div id="bannerList"> <a href="#" ><img src="images/img1.jpg" /></a> <a href="#" ><img src="images/img2.jpg" /></a> <a href="#" ><img src="images/img3.jpg" /></a> <a href="#" ><img src="images/img4.jpg" /></a> </div> </div> </div> </body> </html>