jq 轮播图
<
style
>
#focus{width:500px;height:200px;overflow:hidden;/*用一个div把图片包含设置超出范围隐藏*/}
</
style
>
<
div
id
=
"focus"
>
<
img
src
=
"xx.jpg"
width
=
"500"
height
=
"200"
>
<
img
src
=
"xx.jpg"
width
=
"500"
height
=
"200"
>
<
img
src
=
"xx.jpg"
width
=
"500"
height
=
"200"
>
</
focus
>
.....引入jQuery
<
script
>
//将script写在最底部避免js阻塞页面加载
var index=0;//当前显示的第几张图,默认开始为0;
var mg=$("#focus img");//将焦点图储存为一个变量方便调用节省下载调用查询时间。
var len=mg.length;//焦点图图片数量
function play(n){
mg.eq(n).fadeIn(200).siblings("img").fadeOt(200);
//eq 表示第几个标签里面的n就是代表的第几个img标签是从0开始数的。这里用siblings而不是先hide全部在fadein,siblings代表的 是除开当前标签以外的所有同级标签。使用siblings来处理这样的情况速度快很多倍。简单来讲siblings就是除开当前显示的这个 以外的所有统计图片全部fadeOut
}
setInterval(function(){
showPics(index);
index++;
if(index==len){//当当前播放的索引值等于总图片数就重置为0,重新开始循环
index=0;
}
},2000);//将function写在setInterval里更简洁。这样写默认开始2秒就开始播放,如果想开始2秒就播放第二张,那就得把最前面的index=1;因为初始显示的就是第一张。所以2秒后应该显示第二张而不是还是第一张
</
script
>
jq 轮播图的更多相关文章
- jq轮播图插件
/* * 使用说明 * * 1:需要提供一个标签 * 2:lis:图片的个数 * 3:轮播图的大小 width ,height * 4:图片的地址imgs[0].carou ...
- jq轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jq轮播图插件—手写
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- jq 轮播图 上下自动滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq 轮播图 转载-周菜菜
<style> li{list-style-type:none ; display:inline; width:90px; height:160px; float:left; } .pic ...
- jq轮播图实现
html基本框架如下: <div class="out"> <ul class="img"> <li><a href= ...
- jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- 用原生的javascript 实现一个无限滚动的轮播图
说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...
随机推荐
- [KOJ6023]合并果子·改
[COJ6023]合并果子·改 试题描述 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多把这些果子堆排成一排,然后所有的果子合成一堆. 每一次合并,多多可以 ...
- 新技能get——斜率优化
好久没写博客了……我终于回来了…… dp总是令我很头疼的问题之一,然而我还是要学一下怎么优化它. 下面请看一道题吧: [bzoj3675][Apio2014]序列分割 试题描述 小H最近迷上了一个分割 ...
- js生成当前时间
js生成当前时间 var today=new Date(); function itArray(){ this.length=itArray.arguments.length for(var i=0; ...
- hiho #1372:平方求 (bfs)
#1372 : 平方求和 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 对于一个非负整数n,最少需要几个完全平方数,使其和为n? 输入 输入包含多组数据.对于每组数据: ...
- 剑指Offer 两个链表的第一个公共结点
题目描述 输入两个链表,找出它们的第一个公共结点. 思路: 题目说的很笼统,应该是有2个链表,找出公共点,第一个公共点后面的链表是共同所有的.可以用map做,直接检测map里有没有出现这个节点. ...
- 交叉编译inetutils并配置telnet服务
inetutils集成了许多网络客户和服务程序,主要有,finger, ftp, ftpd, rcp, rexec, rlogin, rlogind, rsh, rshd, syslog,syslog ...
- 【Eclipse】在Eclipse工具中自定义类注释
直接上图:这个公司基本都已经定制好了,自己写demo的时候可以适当定制自己的注释 package com.zlg.controller; zlg : 此处输入zlg(对应模版的名称) 然后ALT+/ ...
- iOS 中 为UIView添加背景图片
创建UIImage的方法有两种: UIImage *image = [UIImageimageNamed:@"image.jpg"];//这种不释放内存,要缓存 NSString ...
- action 方法的访问
Action中的方法的访问: 访问Action的中的方法,默认情况下只能访问execute方法.那么多次请求就不能提交到一个Action.能不能一个模块的多次请求提交到一个Action中? * 需要使 ...
- ACM/ICPC 之 SPFA练习两道(ZOJ3088-ZOJ3103)
两道题都需要进行双向SPFA,比范例复杂,代码也较长,其中第二题应该可以用DFS或者BFS做,如果用DFS可能需要的剪枝较多. ZOJ3088-Easter Holydays //利用SPFA找出下降 ...