<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. JDK9对集合添加的优化

    JDK9对集合添加的优化 JDK9的新特性: list接口,Set接口,Map接口:里边增加了一个静态的方法of,可以给集合一次性添加多个元素 static <E> List<E&g ...

  2. 小结 python 实战中遇到的几种需要化名的情境

    笑来在<自学是门手艺>的<2.4.3 化名与匿名>中,讲到了函数的化名.经过几个月的实战,我发现,实际上化名无处不在.我有时也会称之为"别称",意思一样.函 ...

  3. K8S学习笔记之使用Fluent-bit将容器标准输入和输出的日志发送到Kafka

    0x00 概述 K8S内部署微服务后,对应的日志方案是不落地方案,即微服务的日志不挂在到本地数据卷,所有的微服务日志都采用标准输入和输出的方式(stdin/stdout/stderr)存放到管道内,容 ...

  4. mysql 中 and和or 一起使用和之间的优先级

    SELECT address,job_title,education,SUM(recruiting) FROM commerce_jobs WHERE education = '大专' and ( j ...

  5. NetCore2.2开发环境搭建和2008R2部署环境搭建

    开发环境: 开发工具:VS2017 系统:Win10 64位 Skd下载地址: https://dotnet.microsoft.com/download 3个都下载下载,安装dotnet-sdk-2 ...

  6. rest-spring-boot-starter

    rest-spring-boot-starter 基于spring boot,统一业务异常处理,统一返回格式包装 依赖 <dependency> <groupId>tk.fis ...

  7. 【开发笔记】-Ubuntu环境命令初始化

    更新apt-get命令 apt-get update 安装yum命令 首先检测是否安装 build-essential 包 sudo apt-get install build-essential 安 ...

  8. Redux 中间件和异步操作

    回顾一下Redux的数据流转,用户点击按钮发送了一个action,  reducer 就根据action 和以前的state 计算出了新的state, store.subscribe 方法的回调函数中 ...

  9. Python 之 计算psnr和ssim值

    基于python版的PSNR和ssim值计算 总所周知,图像质量评价的常用指标有PSNR和SSIM等,本博文是基于python版的图像numpy的float64格式和uint8格式计算两种指标值(附代 ...

  10. java集合学习(2)：Map和HashMap

    Map接口 java.util 中的集合类包含 Java 中某些最常用的类.最常用的集合类是 List 和 Map. Map 是一种键-值对(key-value)集合,Map 集合中的每一个元素都包含 ...