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

 <title>无标题文档</title>

 <style>

 *{margin:;padding:;font-size:13px;font-family: microsoft yahei}

 li{list-style:none}

 #wrap{width:470px;height:150px;margin:40px auto;   }

 #packet{width:470px;height:150px;overflow:hidden;position:relative}

 #packet ul{ position:absolute;top:;left:}

 #slide li{ width:470px;height:150px;position:relative;top:;left: }

 #packet ol{position:absolute;right:5px;bottom:5px;}

 #packet ol li{width:20px;height:20px;text-align:center;line-height:20px;background:orange; float: left;margin: 2px}

 #packet ol li.active{background:#E54829}

 </style>

 <script src="../../../../jquery-1.11.1.min.js"></script>

 <script>

 window.onload=function(){

 var oPacket=document.getElementById("packet");

 var oUl=document.getElementById("slide");

 var aLi=oUl.getElementsByTagName("li");

 var timer=null;

 var iNow=;

 var iNow2=;

 //创建oL

 var oL=document.createElement("ol");

 var str="";

 for(var i=;i<aLi.length;i++)

 {

     str+="<li>"+(i+)+"</li>"

 }

 oL.innerHTML=str;

 oPacket.appendChild(oL);

 var aLi1=oL.getElementsByTagName("li");

 function init(){

     for(var i=;i<aLi1.length;i++){

         aLi1[i].className=''

     }

     aLi1[iNow].className='active'

 }

 init();

 for(var i=;i<aLi1.length;i++){

     aLi1[i].onmouseover=function(){

         clearInterval(timer);

         $('#slide').stop(true);

         iNow=$(this).index();

         iNow2=$(this).index();

         init();

         $('#slide').animate({'top':-*$(this).index()});

     }

     aLi1[i].onmouseout=function(){

         timer=setInterval(toRun,);

     }

 }

 timer=setInterval(toRun,);

 function toRun(){

     if(iNow==aLi.length-){

         iNow=;

         $(aLi).eq().css({'position':'relative','top':'750px'})

     }else{

         iNow++;

     }

     iNow2++;

     init();

     $('#slide').animate({'top':-*iNow2},,function(){

              if(iNow==){

                 $(aLi).eq().css('position','static');

                  $('#slide').css('top','0px');

                 iNow2=

              }

     })

 }

 }

 </script>

 </head>

 <body>

 <div id="wrap">

             <div id="packet">

                 <ul id="slide">

                         <li><img src="data:images/1.jpg"/></li>

                         <li><img src="data:images/2.jpg"/></li>

                         <li><img src="data:images/3.jpg"/></li>

                         <li><img src="data:images/4.jpg"/></li>

                         <li><img src="data:images/5.jpg"/></li>

                 </ul>

             </div>

         </div>

 </body>

 </html>

jq 轮播图 上下自动滚动的更多相关文章

  1. iOS 图片轮播图（自动滚动）

    iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...

  2. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  3. jq轮播图插件

    /* * 使用说明  *    *   1:需要提供一个标签   *   2:lis:图片的个数 *   3:轮播图的大小 width ,height *   4:图片的地址imgs[0].carou ...

  4. jq 轮播图

    <style> #focus{width:500px;height:200px;overflow:hidden;/*用一个div把图片包含设置超出范围隐藏*/} </style> ...

  5. jq轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jq轮播图插件—手写

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  7. 【微信小程序】：实现轮播图3秒滚动

    wxml模板:(数据一维数组) <scroll-view scroll-y="true"> <swiper autoplay="auto" i ...

  8. jq 轮播图 转载-周菜菜

    <style> li{list-style-type:none ; display:inline; width:90px; height:160px; float:left; } .pic ...

  9. jq轮播图实现

    html基本框架如下: <div class="out"> <ul class="img"> <li><a href= ...

随机推荐

  1. C#使用Parallel处理数据同步写入Datatable并使用BulkInsert批量导入数据库

    项目需要,几十万张照片需要计算出每个照片的特征值(调用C++编写的DLL). 业务流程:选择照片文件夹,分别访问照片-->调用DLL接口传递照片路径-->接收处理返回值-->写入数据 ...

  2. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  3. [转]linux之at指令详解

    转自:http://www.2cto.com/os/201409/336183.html 指令:at定时任务,指定一个时间执行一个任务,只能执行一次. 语法:# at [参数] [时间]at> ...

  4. Elasticsearch之CURL命令的bulk批量操作

    大家,也可去看看我下面的博客 Elasticsearch之批量操作bulk 官网上,是举例了新建一个requests文件. [hadoop@master elasticsearch-]$ pwd /h ...

  5. Tomcat发布项目，域名访问

    域名访问项目 1,去掉访问路径的端口号: 找到 Tomcat 下的 conf 文件中的 server.xml,找到 8080 修改成 80, 2,项目绑定域名: <Host name=" ...

  6. JS高级——递归

    基本概念 1.在函数内调用函数自己,就是递归 2.没有递归结束条件的递归,就是死递归 3.化归思想,将一个问题由难化易,由繁化简,由复杂化简单的过程称为化归,它是转化和归结的简称. 基本使用 1.计算 ...

  7. [Windows Server 2012] 安装SQL Server 2012

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:安装SQL S ...

  8. Python语言之类

    1.一个空类 #Filename : emptyclass.py class Empty: pass e = Empty() print( e ) #<__main__.Empty object ...

  9. Zip, Join, GroupJoin

    Zip 合并兩個序列,產生一個新的對象序列,但連接方式是一对一的(即序列1和第一项连接序列2的第一项),所以最终结果会在较短的序列处终止. Zip在這裏不是壓縮的意思,而是拉鏈,意爲連接兩個序列 Pe ...

  10. 【sqli-labs】 less44 POST -Error based -String -Stacked Blind(POST型基于盲注的堆叠字符型注入)

    盲注漏洞,登陆失败和注入失败显示的同一个页面 可以用sleep函数通过延时判断是否闭合引号成功 这个方法有一点不好的地方在于,并不能去控制延时,延时的时间取决于users表中的数据数量和sleep函数 ...