<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. 完美解决SpringMVC中静态资源无法找到（No mapping found for HTTP request with URI）问题

    https://blog.csdn.net/kingmax54212008/article/details/79330308 今天遇到一个比较新奇的问题,但是也应该是使用spring MVC框架时由于 ...

  2. 2019 珍岛java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.珍岛等公司offer,岗位是Java后端开发,因为发展原因最终选择去了珍岛,入职一年时间了,也成为了面试官,之 ...

  3. dubbo循序渐进 - yml配置

    Dubbo首先使用com.alibaba.dubbo.config.spring.schema.NamespaceHandler注册解析器,当spring解析xml配置文件时就会调用这些解析器生成对应 ...

  4. C# 静态方法中获取类的名称

    静态方法中用: string className = System.Reflection.MethodBase.GetCurrentMethod().ReflectedType.FullName; 非 ...

  5. android studio学习---快捷键

    快捷键学习  TIPS: 1.异常代码块  或者自定义代码块结构  Ctrl+Alt+T  或者   File | Settings | File and Code Templates When yo ...

  6. Elasticsearch使用DateHistogram聚合

    date_histogram是按照时间来构建集合(桶)Buckts的,当我们需要按照时间进行做一些数据统计的时候,就可以使用它来进行时间维度上构建指标分析.     在前面几篇中我们用到的hitogr ...

  7. 一次 Young GC 的优化实践（FinalReference 相关）

    本文转载自公众号:涤生的博客,阅读时间大约需要11分钟.涤生的文章看起来跟破案一样,很精彩,很有启发. 前言 博客已经好久没有更新了,主要原因是 18 年下半年工作比较忙,另外也没有比较有意思的题材, ...

  8. MongoDB 分片集群实战

    背景 在如今的互联网环境下,海量数据已随处可见并且还在不断增长,对于如何存储处理海量数据,比较常见的方法有两种: 垂直扩展:通过增加单台服务器的配置,例如使用更强悍的 CPU.更大的内存.更大容量的磁 ...

  9. Win10下免安装版JDK8环境变量配置

    1.解压JDK 2.配置JAVA_HOME环境变量 D:\Free\jdk1.8.0_92 3.配置CLASSPATH环境变量 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\to ...

  10. 联想ideapad-330C 在Ubuntu18.04 上安装Realtek 8821CE无线网卡驱动

    在新买的联想ideapad-330C笔记本上,安装Ubuntu 18.04后,悲催的发现,没有无线网络,幸好有线还能用,然后网上搜一波,发现不少人遇到这种问题,也有人给出解决方案 参考的链接: Thi ...