. banner轮播简易代码 - 长沙天助网
欢迎进入【长沙天助网】一站式网站建设服务平台!
公司官网 服务标准 网站建设
建站上【长沙天助网】建站服务平台企业花一样的钱,做不一样的网站!

全国销售热线:
130-8055-9997

全国客服热线:
0731-83299082

banner轮播简易代码

2017-10-26 10:05:41   来自:tuiweb.cn
下面我把代码贴出来,请注意要引用 Jquery 文件,图片我就不放上来了,自己替换掉,注意图片长宽。
<html xmlns="http://www.w3.org/1999/xhtml" > <head>    <title>无标题页</title>    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>    <style type="text/css">        .clear{overflow:hidden; clear:both; width:0px; height:0px; }        .imgbox{width:640px; margin:0 auto; text-align:center; }        ul{padding:0px; margin:0px;}        ul li{float:left; list-style:none; }        ul li.select{display:block;}        .imgnum span{border-radius:10px; font:normal normal bold 12px/15px 微软雅黑; color:#FFF; margin-left:5px; padding:3px 6px 3px 6px;  background-color:#F90; cursor:pointer;}        .imgnum span.onselect{background-color:#F00;}        .imgnum{text-align:center; float:right; margin:-30px 30px; position:relative;}    </style> </head> <body>    <div class="imgbox">         <ul id="banner_img">             <li><img src="images/banner001.jpg"/></li>                <li><img src="images/banner002.jpg"/></li>                <li><img src="images/banner003.jpg"/></li>                <li><img src="images/banner004.jpg"/></li>                <li><img src="images/banner005.jpg"/></li>            </ul>    <div class="clear"></div>    <div class="imgnum">     <span class="onselect">1</span>        <span>2</span>        <span>3</span>        <span>4</span>        <span>5</span>    </div> </div> <script type="text/javascript">         var time = "";         var index = 1;         $(function () {             showimg(index);             //鼠标移入移出             $(".imgnum span").hover(function () {                clearTimeout(time);                var icon=$(this).text();                $(".imgnum span").removeClass("onselect").eq(icon-1).addClass("onselect");                $("#banner_img li").hide().stop(true,true).eq(icon-1).fadeIn("slow");             }, function () {                index=$(this).text()> 4 ? 1 :parseInt($(this).text())+1;                time = setTimeout("showimg(" + index + ")", 3000);             });         });         function showimg(num) {             index = num;             $(".imgnum span").removeClass("onselect").eq(index-1).addClass("onselect");             $("#banner_img li").hide().stop(true,true).eq(index-1).fadeIn("slow");             index = index + 1 > 5 ? 1 : index + 1;             time = setTimeout("showimg(" + index + ")", 3000);         }    </script> </body> </html>


上一篇:img图片铺满整个背景且不变形 下一篇:CSS3文字描边 CSS3字体外部描边