(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的更多相关文章

  1. 轮播图js版&jQ版

    JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...

  2. Flask实战第52天:cms添加轮播图前端代码逻辑完成

    首页我们在模态框中的保存按钮加一个id,这样方便我们选取这个按钮 <button type="button" class="btn btn-primary" ...

  3. Flask实战第51天:cms添加轮播图后端代码逻辑完成

    首先,我们需要给轮播图设计一张表,因为轮播图前端要展示,CMS要管理,所以我们在apps下新建个models.py 编辑apps.models.py from exts import db from ...

  4. 基于JQ的简单左右轮播图

    // 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...

  5. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  6. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  7. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  8. CSS3——animation的基础(轮播图)

    作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...

  9. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

随机推荐

  1. 实现LRU的两种方法---python实现

    这也是豆瓣2016年的一道笔试题... 参考:http://www.3lian.com/edu/2015/06-25/224322.html LRU(least recently used)就不做过多 ...

  2. 《简明python教程》笔记一

    读<简明Python教程>笔记: 本书的官方网站是www.byteofpython.info  安装就不说了,网上很多,这里就记录下我在安装时的问题,首先到python官网下载,选好安装路 ...

  3. Deep Learning 24:读论文“Batch-normalized Maxout Network in Network”——mnist错误率为0.24%

    读本篇论文“Batch-normalized Maxout Network in Network”的原因在它的mnist错误率为0.24%,世界排名第4.并且代码是用matlab写的,本人还没装caf ...

  4. 当云遇见APP性能测试会怎样?

    一个测试人员应该明白,无论是在云内部或是外部,对一个应用程序而言,需要进行测试的地方都是一样的.最终用户只关注的是一个无缺陷的高性能的应用程序,而不关心应用程序位于哪里.在大多数的云服务协议里,都会提 ...

  5. Python中Paramiko协程方式详解

    什么是协程 协程我们可以看做是一种用户空间的线程. 操作系统对齐存在一无所知,需要用户自己去调度. 比如说进程,线程操作系统都是知道它们存在的.协程的话是用户空间的线程,操作系统是不知道的. 为什么要 ...

  6. c# webapi发布到windows server 2008 r2 iis上提示404错误

    项目服务端是一组RestFul风格的webapi,发布到本机的iis没有问题,但是发布到服务器以后就提示404错误.本机是win10的,服务器是windows server 2008 R2 64位.之 ...

  7. Oculus安装问题

    1.必须FQ,可采用蓝灯,或其他vpn 2.Your computer doesn't meet Rift's recommended specifications 如果某些硬件达不到推荐配置(比如我 ...

  8. css table-cell实现图文排列水平对齐

    今天遇到一个样式:图文两列排列. 由于图片大小固定,于是就想到了用table-cell实现. <div class="container"> <div class ...

  9. HashMap,LinkedHashMap,TreeMap的区别

    Map主要用于存储健值对,根据键得到值,因此不允许键重复(重复了覆盖了),但允许值重复. Hashmap 是一个最常用的Map,它根据键的HashCode 值存储数据,根据键可以直接获取它的值,具有很 ...

  10. codeforces #369div2 B. Chris and Magic Square

    题目:在网格某一处填入一个正整数,使得网格每行,每列以及两条主对角线的和都相等 题目链接:http://codeforces.com/contest/711/problem/B 分析:题目不难,找到要 ...