(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. Lua热更系统

    1.介绍 使用脚本开发游戏业务逻辑其中一个好处就是代码可线上热更,不停机修复bug.而热更代码的写法与需要被热更的文件的代码又有着密切的关系,本文介绍一种热更方法. 2.热更原理 Lua提供一个叫re ...

  2. [poj2492]A Bug's Life(并查集+补集)

    A Bug's Life Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 34678   Accepted: 11339 D ...

  3. angularjs指令系统系列课程(3):替换replace,内容保留transclude,作用方式restrict

    这一节我们主要看一下replace,transclude,restrict这三个参数 1.replace 可取值:bool 默认为:true 对于replace属性,设置为false表示原有指令标识不 ...

  4. c# 邮件发送功能

    //统一由一个邮箱发送录用通知 string strfrom = "";//发件人邮箱地址 string strpow = "";//邮箱密码 string s ...

  5. 专为控制打印设计的CSS样式

    大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张.Web开发人员 ...

  6. dubbo & zookeeper & springMVC

    一.安装准备 1.环境简介 名称 版本 OS Mac OS X 10.11.5 JDK 1.8.0_51 dubbo 2.5.4 tomcat 8.0.35 Zookeeper 3.4.8 maven ...

  7. asp.net 一句话搞定分页

    rows 是客户端传过来的行数,page是页码,传参就需要就两个参数就行,sql语句中_row 和_page 自己声明的局部变量,值还是相应的row 和page ,为了运算而已. 用数据库类获得它的D ...

  8. 金融IC卡 ARQC和ARPC计算方法和实例(转)

    假设发卡行的IC卡应用密钥如下:   PBOC_IMK_AC               F0C34A8124CEE0A91A0B034AA97D6EAC PBOC_IMK_ENC           ...

  9. Hangfire项目使用

    基本介绍: hangfire 主要用于根据设置时间来执行任务,间隔几分钟执行一次,每天几点钟执行一次,如此执行任务. 方法: backgroundjob.enqueue(()=>"要执 ...

  10. Asp.Net_Mvc_获取当前Url、Controller、Action

    一.URL的获取很简单,ASP.NET通用: [1]获取 完整url (协议名+域名+虚拟目录名+文件名+参数) string url=Request.Url.ToString(); [2]获取 虚拟 ...