html+js轮播图片slide show 2012年1月18日JavaScriptjavascript、slide、轮播图片sheng00 <html> <head> <style> #banner{ border: 1px solid #DADADA; border-radius: 0.6em; height: 220px; overflow: hidden; position: relative; width: 300px; } #banner_bg{ bottom:0; background-color:#000; filter: Alpha(Opacity=30); opacity:0.3; z-index:1; cursor: pointer; position: absolute; width: 100%; height:30px; } #arrowLeft{ background-image: url("http://www.sheng00.com/wp-content/uploads/2012/01/scroll_left_bt.png"); background-position: 16px 180px; background-repeat: no-repeat; cursor: pointer; margin: 0 3px 0 0; padding: 205px 25px 0; position: absolute; width: 24px; z-index: 2; } #arrowRight{ background-image: url("http://www.sheng00.com/wp-content/uploads/2012/01/scroll_right_bt.png"); background-position: 35px 180px; background-repeat: no-repeat; cursor: pointer; margin: 0 3px 0 0; padding: 205px 25px 0; position: absolute; right: 10px; width: 24px; z-index: 1; } #banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer} #banner ul { bottom: 8px; list-style-type: none; opacity: 0.8; position: absolute; right: 48%; z-index: 2; } #banner ul li { background: none repeat scroll 0 0 #FFFFFF; border-radius: 4px; color: #FFFFFF; cursor: pointer; display: block; float: left; height: 8px; margin-right: 4px; overflow: hidden; text-indent: -9999em; width: 8px; } #banner ul li.on { background: url("http://www.sheng00.com/wp-content/uploads/2012/01/popup_bg.png") repeat scroll 0 0 transparent; } #banner_list { border-radius: 0.6em; } #banner_list a { position: absolute; } #banner_list img { border: 0 none; border-radius: 0.6em 0.6em 0.6em 0.6em; } </style> <script src="http://ajax.useso.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> //banner list var t = n = 0, count; var intervalTime = 5000; //time to change picture var fadeSpeed = 500; $(document).ready(function () { count = $("#banner_list a").length; //find count $("#banner_list a:not(:first-child)").hide(); $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt')); $("#banner_info").click(function () { $("#banner_list a:first-child").click() }); $("#banner li").click(function () { var i = $('#banner ul li').index(this); //find index showBanner(i); }); t = setInterval("showAuto()", intervalTime); $("#banner").hover(function () { clearInterval(t); }, function () { clearInterval(t); t = setInterval("showAuto()", intervalTime); }); $("#arrowLeft").click(showPre); $("#arrowRight").click(showNext); }) function showBanner(index) { n = index; if (index >= count) return; $("#banner_list a").filter(":visible").fadeOut(fadeSpeed).parent().children().eq(index).fadeIn(fadeSpeed); document.getElementById("banner").style.background = ""; $("#banner li").eq(index).toggleClass("on"); $("#banner li").eq(index).siblings().removeAttr("class"); } function showPre() { n = n == 0 ? n = (count - 1) : --n; showBanner(n); } function showNext() { n = n >= (count - 1) ? 0 : ++n; showBanner(n); } function showAuto() { n = n >= (count - 1) ? 0 : ++n; showBanner(n); } </script> </head> <body> <div id="banner"> <div id="banner_bg"></div> <div id="arrowLeft"> </div> <div id="arrowRight"> </div> <div id="banner_info"></div> <ul> <li class="on">1</li> <li></li> <li></li> <li></li> <li></li> </ul> <div id="banner_list"> <a href="http://www.sheng00.com" target="_blank"> <img src="http://www.sheng00.com/wp-content/uploads/2012/01/Desertsss.jpg" width="300px" height="220px" alt="Desertsss" /></a> <a href="http://www.sheng00.com" target="_blank"> <img src="http://www.sheng00.com/wp-content/uploads/2012/01/Koalasss.jpg" width="300px" height="220px" alt="Koalasss" /></a> <a href="http://www.sheng00.com" target="_blank"> <img src="http://www.sheng00.com/wp-content/uploads/2012/01/Lighthousesss.jpg" width="300px" height="220px" alt="Lighthousesss" /></a> <a href="http://www.sheng00.com" target="_blank"> <img src="http://www.sheng00.com/wp-content/uploads/2012/01/Penguinssss.jpg" width="300px" height="220px" alt="Penguinssss" /></a> <a href="http://www.sheng00.com" target="_blank"> <img src="http://www.sheng00.com/wp-content/uploads/2012/01/Tulipsss.jpg" width="300px" height="220px" alt="Tulipsss" /></a> </div> </div> </body> <html> 提示：你可以先修改部分代码再运行。 1 相关
