以下是程序代码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p> <div style="text-align:center;height:40px;line-height:40px;"><a href="//netblog.cn/">我就是秋叶，秋叶就是我</a></div> <p><!--以下是html代码--></p> <div class="main-banner"> <div class="banner-bg"> <ul class="banner-bg-img"></ul> </div> <div class="banner-bg-slide"></div> </div> <p><!--以下是js代码:请按照我的顺序摆放，否则后果自负--> <script src="http://resource.netblog.site/jquery.js"></script> <script> (function($){ var slideBanner = (function(){ var banners = [], currIndex = 0, slideTimeout, isPlaying = false, duration = 1000, imgBox,slideBox; var _render = function(){ var imgHtml=[], slideHtml=[]; $.each(banners, function(i,item){ var isLink = _hasLink(item.link); imgHtml[i] = [ '<li'+(i==0 ? ' class="img-on"':'')+' style="background:url('+item.img+') no-repeat center center '+item.bgcolor+'">', isLink ? '<a href="'+item.link+'" target="_blank"></a>':'', '</li>' ].join(''); slideHtml[i] = '<a class="banner-bg-item'+(i==0?' item-on':'')+'" data-index="'+i+'" href="#" onclick="return false;"></a>'; }) imgBox.html(imgHtml.join('')); slideBox.html(slideHtml.join('')) if(banners.length<2){ slideBox.hide(); } _goto(currIndex); } var _hasLink = function(str){ if(typeof str != "string" || str == "#"){ return false; }else{ return true; } } var _bind = function(){ slideBox.find("a").on("mouseenter click",function(){ clearTimeout(slideTimeout); var index = $(this).attr("data-index"); if(index){ _goto(index|0); } _play(); }) $("body").on("keydown",function(e){ if(e.keyCode == 37){ _goto(currIndex-1); }else if(e.keyCode == 39){ _goto(currIndex+1); } }) } var _call = function(){ _goto(currIndex+1); _play(); } var _play = function(){ clearTimeout(slideTimeout); slideTimeout = setTimeout(function(){ _call(); },5000); } var _goto = function(index){ if(isPlaying) return; index = (index+banners.length) % banners.length; currIndex = index; var currBanner = imgBox.find("li.img-on"); var nextBanner = imgBox.find("li").eq(index); if(currBanner[0] == nextBanner[0]) return; isPlaying = true; nextBanner.css({ opacity: 0 }).show() slideBox.find("a").removeClass("item-on").eq(index).addClass("item-on"); currBanner.animate({ opacity: 0 },{ step:function(p){ nextBanner.css({ opacity : 1-p }) }, complete : function(){ currBanner.hide().removeClass("img-on"); nextBanner.addClass("img-on"); isPlaying = false; } }) } var _init = function(data){ banners = data||[{ link:"#", img:"/static/img/banner_01.jpg" }]; imgBox = $(".banner-bg-img"); slideBox = $(".banner-bg-slide"); _render(); _bind(); _play(); } return { init : _init } })(); $.ext_slides = $.extend({},slideBanner); })(jQuery); </script> <script>(function(){ var page_banners = [{link:"#",img:"http://bs.baidu.com/zhanzhang/083011421233150.png",bgcolor:"#4b4f86"},{link:"#",img:"http://bs.baidu.com/zhanzhang/054431419499089.jpg",bgcolor:"#126ccf"},{link:"#",img:"http://bs.baidu.com/zhanzhang/026771418891368.jpg",bgcolor:"#0b7ef3"},{link:"#",img:"http://bs.baidu.com/zhanzhang/064151409104708.jpg",bgcolor:"#0c88e1"},{link:"//netblog.cn/",img:"http://bs.baidu.com/zhanzhang/083921386241772.jpg",bgcolor:"#b4deff"}]; })();</script> <script>(function(){ $.ext_slides.init(page_banners); })();</script> <!--以下是css样式--></p> <style> *{margin:0;} .main-banner{ height: 472px; background-color: #fff; position: relative; }</p> <p>.banner-content{ width:980px; height: 340px; position: relative; margin:0 auto; } .banner-bg{ height: 100%; position: absolute; width:100%; left:0; top:0; } .banner-bg .banner-bg-img{ text-align: center; height: 100%; overflow: hidden; } .banner-bg .banner-bg-img a { display: block; width: 100%; height: 340px; position: absolute; } .banner-bg .banner-bg-img li{ display: none; position: absolute; overflow: hidden; height: 100%; width:100%; text-align: center; top:0; left:0; background-size:100% 100% !important; box-shadow: 0px 0 6px #999 inset; -webkit-box-shadow: 0px 0 6px #999 inset; -moz-box-shadow: 0px 0 6px #999 inset; } .banner-bg .banner-bg-img .img-on{ display: block; } .banner-bg-slide{ width:300px; left: 50%; margin-left:-150px; position: absolute; bottom: 5px; text-align: center; } .banner-bg-slide .banner-bg-item{ display: inline-block; width: 0; height: 0; overflow: hidden; border-width: 5px; border-color: #c0c2c3; border-style: solid; border-radius: 5px; margin:5px 12px 5px 5px;</p> <p>width:10px\9; height:10px\9; border:none\9; background: url("http://zhanzhang.baidu.com/static/img/banner_slide_bg.png") no-repeat 0 0\9; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/static/img/banner_slide_bg.png',sizingMethod='crop'); } .banner-bg-slide .banner-bg-item.item-on{ border-color: #008CF0; background: url("http://zhanzhang.baidu.com/static/img/banner_slide_bg2.png") no-repeat 0 0\9; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/static/img/banner_slide_bg2.png',sizingMethod='crop'); } </style> <p>

提示：可以先修改部分代码再运行