<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. 【题解】PERIOD - Period [POJ1961] [SP263]

    [题解]PERIOD - Period [POJ1961] [SP263] 在进入这道题之前,我们需要了解 kmp 算法 不知道的童鞋可以去看一下Silent_EAG(一个可爱的女孩纸)的讲解. 关于 ...

  2. Java学习：线程的安全问题

    线程的安全问题 模拟卖票案例创建三个的线程,同时开启,对共享的票进行出售 public class RunnableImpl implementsc Runnable{ //定义一个多线程共享的票源 ...

  3. 补习系列(17)-springboot mongodb 内嵌数据库【华为云技术分享】

    目录 简介 一.使用 flapdoodle.embed.mongo A. 引入依赖 B. 准备测试类 C. 完善配置 D. 启动测试 细节 二.使用Fongo A. 引入框架 B. 准备测试类 C.业 ...

  4. Asp.Net 技术

    Asp.Net 技术Nuget 管理器Spring.NET 框架Spring.core 包 微服务Consul .NetCore 框架:Spring.net Nhibernate 框架Dapper.n ...

  5. tensorflow中使用变量作用域及tf.variable(),tf,getvariable()与tf.variable_scope()的用法

    一 .tf.variable() 在模型中每次调用都会重建变量,使其存储相同变量而消耗内存,如: def repeat_value(): weight=tf.variable(tf.random_no ...

  6. Mycat分布式数据库架构解决方案--Mycat实现数据库分表

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 准备工 ...

  7. Mybatis源码解析(四) —— SqlSession是如何实现数据库操作的？

    Mybatis源码解析(四) -- SqlSession是如何实现数据库操作的?   如果拿一次数据库请求操作做比喻,那么前面3篇文章就是在做请求准备,真正执行操作的是本篇文章要讲述的内容.正如标题一 ...

  8. Java自学-数字与字符串 格式化输出

    Java 使用printf或format 进行格式化输出 步骤 1 : 格式化输出 如果不使用格式化输出,就需要进行字符串连接,如果变量比较多,拼接就会显得繁琐 使用格式化输出,就可以简洁明了 %s ...

  9. HTNL5-ARIA role属性

    WAI-ARIA Web Accessibility Initiative’s Accessible Rich Internet Applications 无障碍网页倡议–无障碍的富互联网应用,也简称 ...

  10. MES应用案例|新宏泰电器乘上智能制造的东风

    企业背景: 无锡新宏泰电器科技股份有限公司(下文简称:新宏泰电器)创立于1984年,公司主要生产断路器.微型电机.BMC/SMC材料.BMC/SMC模压制品及各类塑料模具的设计制造.已于2016年在沪 ...