<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. Linux C++ Socket 高并发短连接 TIME_WAIT 挥之不去解决方法

    近期遇到一个项目 需要在Linux上建立一个Socket 进行 HTTP_GET , 需要线程高并发的 使用TCP Socket 进行Send 发送HTTP_GET请求到 指定网站 . 而且不需要re ...

  2. python函数对变量的作用及遵循的原则

    1.全局变量和局部变量 全局变量:指在函数之外定义的变量,一般没有缩进,在程序执行的全过程有效 局部变量:指在函数内部使用的变量,仅在函数内部有效,当函数退出时变量将不存在 例如: n=1 #n是全局 ...

  3. SpringBoot中使用@scheduled定时执行任务需要注意的坑

    spring boot: 计划任务@ EnableScheduling和@Scheduled @Scheduled中的参数说明 @Scheduled(fixedRate=2000):上一次开始执行时间 ...

  4. 基于百度地图JavaScript API，员工住址统计

    公司一般都有通讯和住址的统计,但是文字化的表格根本就不知道住在哪. 用百度地图就可以轻松解决, 而且公司还经常人员变动,读取excel中的内容,就不用每次还要更改地图文件了. 在遇到需要聚餐在地图中标 ...

  5. 关于visual studio 2015 智能提示英文，而非中文的解决方案

    关于visual studio 2015 智能提示英文,而非中文的解决方案:   找到这个目录 C:\Program Files (x86)\Reference Assemblies\Microsof ...

  6. C# yield checked,unchecked lock语句（C#学习笔记04）

    特殊语句 yield语句 yield用于终止迭代 只能使用在返回类型必须为 IEnumerable.IEnumerable<T>.IEnumerator 或 IEnumerator< ...

  7. APS.NET MVC + EF (05)---控制器

    Controller(控制器)在ASP.NET MVC中负责控制所有客户端与服务端的交互,并且负责协调Model与View之间数据传递,是ASP.NET MVC框架核心.Controller为ASP. ...

  8. opencv简单卷积运用

    import cv2 as cv import numpy as np img=cv.imread('learn.jpg',cv.IMREAD_GRAYSCALE) cv.imshow('first ...

  9. drf之视图类与路由

    视图 Django REST framwork 提供的视图的主要作用: 控制序列化器的执行(检验.保存.转换数据) 控制数据库查询的执行 2个视图基类 APIView rest_framework.v ...

  10. 为什么K8s会成为主流？

    容器技术和K8s是云原生概念的核心和基础.云计算诞生已有超过10年,但云计算时代的应用到底该是什么样子,一直没人能说清楚,也没人能确定云计算的基础架构将会如何发展.在K8s出现之前,没人设想过会有一个 ...