<!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. Java 编译与反编译

    编程语言 在介绍编译和反编译之前,我们先来简单介绍下编程语言(Programming Language).编程语言(Programming Language)分为低级语言(Low-level Lang ...

  2. printf的实型

    参  数 说  明 %f 按实数格式输出,整数部分按实际位数输出,6位小数 %m.nf 总位数m(含小数点),其中有n位小数 %-m.nf 同上,左对齐 %0.xf 输出小数点后x位   %f 后面如 ...

  3. MVC系列学习(七)-模板页

    1.新建一个MVC项目,选择基本 2.查看文件 看到VS为我们生成了一些东西 布局页面,Layout 指定了模板页 3.开始实例 首先控制器中的代码如下: 视图中代码如下: 1.在/Views/_Vi ...

  4. java练习题-求int类型N值的阶乘

    //求int类型N值的阶乘 public static int getNumsJieCheng(int i){ int rs = 1; if(i==0||i==1){ return i; } if(i ...

  5. SAS进阶《深入解析SAS》之对多数据集的处理

    SAS进阶<深入解析SAS>之对多数据集的处理 1. 数据集的纵向串接: 数据集的纵向串接指的是,将两个或者多个数据集首尾相连,形成一个新的数据集. 据集的横向合并: 数据集的横向合并,指 ...

  6. jQuery——切换toggle

    toggle()-----显示隐藏 toggleClass-------添加类或者删除类 <!DOCTYPE html> <html lang="en"> ...

  7. Coding iOS客户端应用源码

    Coding是国内的一家提供Git托管服务的产品,它们的客户端提供了项目和任务管理.消息和用户中心,以及一个类似论坛的功能,已经在App Store上线: https://itunes.apple.c ...

  8. 仿iphone动态萤火虫锁屏应用安卓源码

    该源码是仿iphone动态萤火虫锁屏应用源码,源码SkyLock,这也是最近弄了一款锁屏,苦于市场百般阻拦与锁屏应用数量实在太多,于是将它拿出来开源:废话不多说,希望大家能够希望,更多说明请看下面的吧 ...

  9. 【转】SSH中 整合spring和proxool 连接池

    [摘要:比来做的一个项目中应用到了毗邻池技巧,大概我们人人比拟认识的开源毗邻池有dbcp,c3p0,proxool.对那三种毗邻池来讲,从机能战失足率来讲,proxool轻微比前两种好些.本日我首要简 ...

  10. (转)Arcgis for Js之Graphiclayer扩展详解

    http://blog.csdn.net/gisshixisheng/article/details/41208185 在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种 ...