JS代碼
$(function () { $(".dummy").click(function () { return false; }); var flipDelay = 5500; var flipCount = $("div.banner_footer a").size(); // 圖片總數 var flipId = 1; var flipId1 = 0; var flipTimer = null; var flipTimer1 = null; var i = 0; var flip = function () { if (flipCount < 2) return; $("div.banner_footer a").removeClass("current"); $($("div.banner_footer a").get(flipId)).addClass("current"); $($("div.banner_footer a").get(flipId)).css("current"); $("div.banner > a:visible").fadeOut(); $($("div.banner a").get(flipId)).fadeIn("slow"); flipId = (flipId + 1) % flipCount; flipTimer = window.setTimeout(flip, flipDelay); } flipTimer = window.setTimeout(flip, flipDelay); $("div.banner_footer a").click(function () { clearTimeout(flipTimer); flipId = $("div.banner_footer a").index(this); flip(); return false; }); var flipserver = function () { $("div.index_server_box > a:visible").fadeOut(); $($("div.index_server_box a").get(flipId1)).fadeIn("slow"); } $("a.index_server_left").click(function () { flipId1 = (flipId1 - 1) % 3; flipserver(); return false; }); $("a.index_server_right").click(function () { flipId1 = (flipId1 + 1) % 3; flipserver(); return false; }); var documentWidth = $(window).width(); var left = (documentWidth - 310) / 2; var right = left + 306; $("div.services_box div.left").css("width", left + "px"); $("div.services_box div.right").css("width", right + "px"); $(window).resize(function () { var documentWidth = $(window).width(); var left = (documentWidth - 310) / 2; var right = left + 306; $("div.services_box div.left").css("width", left + "px"); $("div.services_box div.right").css("width", right + "px"); });});
html樣式
<div class="banner_box"> <div class="banner"> <a href="" class="banner1"><img src="img/banner1.jpg" alt="視覺為您解決網站建設中企業品牌形象問題" /></a> <a href="" class="banner2"><img src="img/banner2.jpg" alt="獨具匠心的網頁設計讓您的網站與總部同" /></a> <a href="" class="banner3"><img src="img/banner3.jpg" alt="針對用戶需求，提供高品質網站設計服務" /></a> <a href="" class="banner4"><img src="img/banner4.jpg" alt="網站建設公司團隊的力量" /></a> <a href="" class="banner5"><img src="img/banner5.jpg" alt="招聘網頁設計師" /></a> <div class="banner_footer"> <a class="a1 current"><img src="img/a13.jpg" alt="" /></a> <a class="a2" ><img src="img/a14.jpg" alt="" /></a> <a class="a3"><img src="img/a15.jpg" alt="" /></a> <a class="a4"><img src="img/a16.jpg" alt="" /></a> <a class="a5"><img src="img/a17.jpg" alt="" /></a> </div> </div> </div>
css樣式
div.banner_box{height:430px; overflow:hidden; background:url(../img/b1.jpg) repeat-x;}div.banner_box div.banner{width:990px; height:430px; overflow:hidden; margin:auto; position:relative;}div.banner_box div.banner a{border:0;}div.banner_box div.banner a.banner1 img{margin-left:200px;}div.banner_box div.banner a.banner2 img{margin-left:236px;}div.banner_box div.banner a.banner3 img{margin-left:250px;}div.banner_box div.banner a.banner4 img{margin-left:231px;}div.banner_box div.banner a.banner5 img{margin-left:245px;}div.banner_box div.banner div.banner_footer{position:absolute;width:120px;height:20px;top:30px; right:0;z-index:100; }div.banner_box div.banner div.banner_footer a{float:left; width:19px; height:19px; cursor:pointer; }div.banner_box div.banner div.banner_footer a.current{background:url(../img/a13_1.jpg) center center no-repeat;}div.banner_box div.banner div.banner_footer a img{border:0; margin:3px 0 0 3px;}
希望能幫到您！祝您好運！
這樣可以麽？