<!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>

效果图：

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

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

js 控制Div循环显示 非插件版的更多相关文章

  1. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  2. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  3. js控制div是否显示

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  5. 原生JS的移入溢出控制div的显示与隐藏

    原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性

  6. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  7. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  8. js控制select选中显示不同表单内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 简简单单，jquery中，使用checkbox控制div的显示与隐藏

    今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...

随机推荐

  1. 如何在移动设备上调试html5开发的网页

    在我们用phoengap+html5做的移动app中,经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况,原因是手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台.厂商的不同 ...

  2. struts基于ognl的自动类型转换需要注意的地方

    好吧,坎坷的过程我就不说了,直接上结论: 在struts2中使用基于ognl的自动类型转换时,Action中的对象属性必须同时添加get/set方法. 例如: 客户端表单: <s:form ac ...

  3. linux vps安装kloxo配置全部过程

    第一步如何登录Linux VPS进行远程(SSH)管理 很多人可能用过免费虚拟主机,但绝没有用过好用的免费服务器租用,仅有的少数免费服务器都只针对有较高访问量的大站(以交换广告为条件),而普通小站是无 ...

  4. AFNetwork源码解析

    1.关于AFRequestSerializer: 这里分好几个部分,我们首先从NSMutableRequest的相关方法来出发: 比如我们要上传一个文件,那么需要些很麻烦的请求体: HTTP请求头我们 ...

  5. undefined reference to `libiconv_open 无法编译PHP

    解决方法:#wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.13.1.tar.gz#tar -zxvf libiconv-1.13.1.tar. ...

  6. mock the facade

    mock the facade: Auth::shouldReceive('user')->andReturn($user = m::mock('StdClass')); $user->s ...

  7. Java 获取汉字拼音的方法

    package lius.util;   import java.io.Serializable; import java.util.ArrayList;   public class JString ...

  8. angularJs之http后台访问数据

    AngularJS  XMLHttpRequest $http  是AngularJS中的一个核心服务,用于读取远程服务器的数据. 读取JSON 文件 以下是存储在web服务器上的JSON 文件: h ...

  9. 基于HTML5和JS实现的切水果游戏

    切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由JavaSript和HTML5实现,虽然功能和原版的相差太大,但是基本的功能还是具备了,还是模仿的挺逼真,有一定的J ...

  10. LeetCode Plus One Linked List

    原题链接在这里:https://leetcode.com/problems/plus-one-linked-list/ 题目: Given a non-negative number represen ...