js 控制Div循环显示非插件版

 <!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=gb2312" />

     <title>js 控制Div循环显示 非插件版</title>

     <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

     <script src="Scripts/picCycle.js" type="text/javascript"></script>

     <link href="Css/PicCycle.css" rel="stylesheet" type="text/css" />

     <link href="Css/Comm.css" rel="stylesheet" type="text/css" />

 </head>

 <body>

     <p>

             js 控制Div循环显示 <br/>

             烦透了网上都是插件模式js,内容又多，改起来也麻烦<br/>

         </p>

         <p>

              所以自己写个,使用function 函数调用 <br/>

             使用function 函数调用,需要用的时候再去调用,不用一加载就需要注册<br />

             可以自动轮播

             <br />

             <br />

             图片网上随便乱抓的,也不知道存不存在什么版权问题 嘿嘿

         </p>

     <div id="box_Orange" class="divPic">

     </div>

 </body>

 </html>

 <script type="text/javascript">

     $(document).ready(function () {

         var count = 6;

         var ulHtml = "<ul>";

         var divHtml = "";

         $("#box_Orange").html("");

         for (var j = 1; j < count; j++) {

             divHtml += '<div class="pic"><a href="http://www.cnblogs.com/Orange-C/"><img height="240px" width="500px;" src="Images/' + j + '.jpg"  /></a></div>';

             ulHtml += '<li> ' + j  + '</li>';

         }

         ulHtml += "</ul>";

         $("#box_Orange").append(divHtml);

         $("#box_Orange").append(ulHtml);

         picCycle("#box_Orange")

     });

 </script>

效果图：

js 控制Div循环显示非插件版

老规矩，附件下载地址http://files.cnblogs.com/Orange-C/CycleDemo.zip

出处http://www.cnblogs.com/Orange-C/p/4087110.html

js 控制Div循环显示 非插件版

js 控制Div循环显示非插件版