(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. consul模板的说明2

    保证模板的正常执行 使用||true $ consul-template -template "in.ctmpl:out.file:service nginx restart || true ...

  2. Sublime Text 3 支持的热门插件推荐(转载)

    SublimeText是一款非常精巧的文本编辑器,适合编写代码.做笔记.写文章.它用户界面十分整洁,功能非同凡响,性能快得出奇.这些非常棒的特性 包括任意跳转(Goto Anything).多重选择( ...

  3. 安卓跳转到GPS设置界面

      /** * 监听GPS */ private void initGPS() { LocationManager locationManager = (LocationManager) this . ...

  4. WPF界面布局——各种控件

    Grid是最常用的动态布局控件,也是所有动态布局控件中唯一可按比例动态调整分配空间的控件. label : 标签,用来显示文本内容.可以为其他控件如文本框等添加一些描述性的信息. TextBox : ...

  5. 121. Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  6. onInterceptTouchEvent / onTouchEvent响应事件的详析

    onInterceptTouchEvent(),onTouchEvent() 默认返回false 注:事件分发机制是由 dispatchTouchEvent() 开始分发的 onInterceptTo ...

  7. contiki-定时器etimer

    Contiki内核是基于事件驱动和Protothreads机制,事件既可以是外部事件(比如按键,数据到达),也可以是内部事件(如时钟中断).定时器的重要性不言而喻,Contiki提供了5种定时器模型, ...

  8. hdu acm 简单暴力1004

    字符串匹配函数strcmp 直接使用来判断两字符串是否完全相等 用数组存每个单词的个数时  初始化为零就错 初始化为一时就正确  也不知道为什么

  9. 如何让nginx显示文件夹目录

    1. 如何让nginx显示文件夹目录 vi /etc/nginx/conf.d/default.conf 添加如下内容: location / {           root /data/www/f ...

  10. 20155229-付钰涵-分析自我技能延展到c语言学习状况

    我的小技能 我记得幼儿园时表演的舞蹈,也记得从水彩到素描的学习,还记得小学和初中获得的钢琴省级奖项. 舞蹈止于一年级,绘画止于三年级,钢琴从学前班到高一那十年的时间里有过断续. 03年-04年的那个冬 ...