<style>

li{list-style-type:none ;

   display:inline;

    width:90px;

    height:160px;

    float:left;

    }

.pic-all{ width:100px;

 height:180px;

  position:relative;

   overflow:hidden;

   margin-left:200px;

  }

ul{ position:absolute;

   left:0;

   top:0;

   width:310px;

   }

</style>

<script>

var imgindex=0;

var imgindex1=0;

/*$(document).ready(function(){

$("#pic").click(function(){

  changeimg();

  }); 

});*/

setInterval("changeimg()", 1000);

setInterval("changeimg1()", 2000);

function changeimg()

{

 imgindex++;

  if(imgindex==0)

  {

  $("ul").stop().animate({left:"0px"});

  }

  if(imgindex==1)

  {

  $("ul").stop().animate({left:"-150px"});

  }

  if(imgindex==2)

  {

  $("ul").stop().animate({left:"-300px"});

  }

  if(imgindex==2)

  {

  imgindex=-1;

  }

}

function changeimg1()

{

  imgindex1++;

  if(imgindex1==0)

  {

    $("#imga").attr("src", "images/$F2[P67(QAUOCZ810C)YHRX.png");

  }

  if(imgindex1==1)

  {

  $("#imga").attr("src", "images/T1_8YvBKJT1RXrhCrK.jpg");

  }

  if(imgindex1==2)

  {

  $("#imga").attr("src", "images/T1a3DvB7hv1RXrhCrK!150x150.jpg");

  }

  if(imgindex1==2)

  {

  imgindex1=-1;

  }

}

</script>

<body>

<div class="pic-all">

<ul>

<li ><img src="images/$F2[P67(QAUOCZ810C)YHRX.png"/></li>

<li ><img src="images/T1_8YvBKJT1RXrhCrK.jpg"/></li>

<li ><img src="images/T1a3DvB7hv1RXrhCrK!150x150.jpg"/></li>

</ul>

</div>

<br />

<!--<button id="pic" style="width:100px; height:100px;">按钮</button>-->

<img id="imga" src="images/$F2[P67(QAUOCZ810C)YHRX.png" />

</body>

jq 轮播图 转载-周菜菜的更多相关文章

  1. jq轮播图插件

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

  2. jq 轮播图

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

  3. jq轮播图

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

  4. jq轮播图插件—手写

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

  5. jq 轮播图 上下自动滚动

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

  6. jq轮播图实现

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

  7. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

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

  8. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  9. 用原生的javascript 实现一个无限滚动的轮播图

    说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...

随机推荐

  1. tomcat启动完成执行 某个方法 定时任务（Spring）

    第一步引入接口: ServletContextListener @RestController @RequestMapping("/schedule") public class ...

  2. json文件 乱码问题 根本解决办法

    1 工具→自定义:2 点击 命令 标签:3 在上方单选区选中 菜单栏,下拉列表选 文件:4 点击 添加命令5 在类别中,找到文件,在右侧找到高级保存选项,确定6 然后可以通过下移调整该选项在文件菜单中 ...

  3. 千万不要用window自带文本编辑器编辑配置文件或者代码

    1 引言 用windows自带的text文本在最前面会带入看不到的BOM,导致异常 2 代码 package main import ( "strings" "fmt&q ...

  4. [ROR] 如何在mixin模块中定义类方法(Howto define class methods in a mixin module)

    方法一: 修改模块的include方法 module Bbq def self.included(base) base.send :include, InstanceMethods base.exte ...

  5. Spring Cloud的常规组件和简单实战（一）

    最近一段时间在学习Spring Cloud,从Eureka到Hystrix,常用的配置和方法都有涉及一些,以此笔记来记录一下学习到的东西,也分享一下.内容以实战为起点,主要以介绍常规用法为主,最后也会 ...

  6. [摘抄] 3.AMD规范与CommonJS规范的兼容性

    3. AMD规范与CommonJS规范的兼容性 CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作. AMD规范则是非同步加载模块,允许指定回调函数. 由于Node.js ...

  7. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  8. JavaScript 之 创建元素

    方式一: 使用  document.write() 语法格式: document.write('新设置的内容<p>标签也可以生成</p>'); 注意:在使用方式的时候,writ ...

  9. 你能想象未来的MES系统是什么样吗？

    “智能制造”热潮席卷神州大地,在工业4.0热潮,以及国家大力推进中国制造2025的背景下,建设智能工厂,推进智能制造已成为制造企业共同的目标.作为承上启下的车间级综合信息系统,MES系统得到了制造企业 ...

  10. web由http升级为https搭建

    nginx实现http访问 server { listen default_server; listen [::]: default_server; server_name _; root /usr/ ...