轮播图适应代码jQ
(function(){
var i = 0;
var time ;
$('.page-size').html('1');
var obj = $('.xst-scroll>li');
var imgChange = function(){
$('.page-size').html(i+1);
obj.animate({
opacity: '0'},
100, function() {
obj.css({
display: 'none'
});
obj.eq(i).css({
display: 'block'
});
obj.eq(i).animate({
opacity: '1'},
100);
});
}
var imgAuto = function(){
i++;
if(i>=obj.length){
i=0;
};
imgChange();
}
var imgLeft = function(){
clearInterval(time);
i--;
if(i<0){
i=obj.length-1;
}
imgChange();
time = setInterval(imgAuto, 5000);
}
var imgRight = function(){
clearInterval(time);
i++;
if(i>=obj.length){
i=0;
};
imgChange();
time = setInterval(imgAuto, 5000);
}
$('.page-sum').html(obj.length);
time = setInterval(imgAuto, 5000);
$('.previous').click(function(event) {
imgLeft();
});
$('.next').click(function(event) {
imgRight();
});
})();
//轮播图代码
使用说明:.page-size显示当前页码(第几张图),.page-sum显示总共页码(共几张图);.previous上一张,.next下一张,.xst-scroll>li存放图片,
轮播图适应代码jQ的更多相关文章
- 轮播图js版&jQ版
JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...
- Flask实战第52天:cms添加轮播图前端代码逻辑完成
首页我们在模态框中的保存按钮加一个id,这样方便我们选取这个按钮 <button type="button" class="btn btn-primary" ...
- Flask实战第51天:cms添加轮播图后端代码逻辑完成
首先,我们需要给轮播图设计一张表,因为轮播图前端要展示,CMS要管理,所以我们在apps下新建个models.py 编辑apps.models.py from exts import db from ...
- 基于JQ的简单左右轮播图
// 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- CSS3——animation的基础(轮播图)
作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...
- jQuery实现todo及轮播图
内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
随机推荐
- hihoCoder 1432 : JiLi Number(吉利数)
hihoCoder #1432 : JiLi Number(吉利数) 时间限制:1000ms 单点时限:1000ms 内存限制:256MB Description - 题目描述 Driver Ji l ...
- 关于Tomcat在eclipse上的配置
一:安装JDK(建议版本比较新的jdk,因为有很多集成于jdk软件需要的jdk版本比较高): jdk官网下载位置:http://www.oracle.com/technetwork/java/java ...
- fiddler_技巧01
1.选择一个包后,要点击 "Inspectors"标签页 才能有"Raw"标签页 才能看到原始的详细信息 2. 3. 4. 5.
- SQL DDL
Sql语言被分为四大类:数据查询语言(DQL),数据操纵语言(DML),数据定义语言(DDL),数据控制语言(DCL). 1. 数据查询语言(DQL) 数据查询语言基本结构由select子句,from ...
- IP首部校验和的计算
ip抓包结果:0000: 00 e0 0f 7d 1e ba 00 13 8f 54 3b 70 08 00 45 00 0010: 00 2e be 55 00 00 7a 11 51 ac de ...
- Python压缩
ru=lambda x:x.decode('u8') rp=lambda x:x.replace('\\','/') gb=lambda x:x.decode('gbk') class ZIP: de ...
- session和cookie
第一次听到cookie这个词的时候着实兴奋了一段时间,以为是小饼干呢~快喝一杯82年的java压压惊!哈哈~ 与cookie的第一次邂逅——清缓存和清cookie 刚毕业的时候上班,做二次开发,明明后 ...
- Unity 3D 正交相机(Orthographic)
1. Camera.aspect 表示摄像机显示区域的纵横比.宽高比,摄像机初始化的时候会默认设置成当前屏幕的宽高比,可以更改,也可以通过 Camera.ResetAspect 来重置. 2. Cam ...
- 不断弹出svchost.exe错误框
同事的一台电脑,xp系统,启动后就弹出svchost错误的对话框,不论确定还是取消,关闭后立刻又弹出. 打开任务管理器,尝试对一些后安装的软件结束进程,结束一个,关闭一次,看看结束哪一个,关闭后不再弹 ...
- Const关键字
const const是一个C语言的关键字,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的安全性和可靠性.另外,在观看别人代码的时候,清晰理解const所起的作用,对理解对方的程 ...