轮播图适应代码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程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
随机推荐
- consul模板的说明2
保证模板的正常执行 使用||true $ consul-template -template "in.ctmpl:out.file:service nginx restart || true ...
- Sublime Text 3 支持的热门插件推荐(转载)
SublimeText是一款非常精巧的文本编辑器,适合编写代码.做笔记.写文章.它用户界面十分整洁,功能非同凡响,性能快得出奇.这些非常棒的特性 包括任意跳转(Goto Anything).多重选择( ...
- 安卓跳转到GPS设置界面
/** * 监听GPS */ private void initGPS() { LocationManager locationManager = (LocationManager) this . ...
- WPF界面布局——各种控件
Grid是最常用的动态布局控件,也是所有动态布局控件中唯一可按比例动态调整分配空间的控件. label : 标签,用来显示文本内容.可以为其他控件如文本框等添加一些描述性的信息. TextBox : ...
- 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 ...
- onInterceptTouchEvent / onTouchEvent响应事件的详析
onInterceptTouchEvent(),onTouchEvent() 默认返回false 注:事件分发机制是由 dispatchTouchEvent() 开始分发的 onInterceptTo ...
- contiki-定时器etimer
Contiki内核是基于事件驱动和Protothreads机制,事件既可以是外部事件(比如按键,数据到达),也可以是内部事件(如时钟中断).定时器的重要性不言而喻,Contiki提供了5种定时器模型, ...
- hdu acm 简单暴力1004
字符串匹配函数strcmp 直接使用来判断两字符串是否完全相等 用数组存每个单词的个数时 初始化为零就错 初始化为一时就正确 也不知道为什么
- 如何让nginx显示文件夹目录
1. 如何让nginx显示文件夹目录 vi /etc/nginx/conf.d/default.conf 添加如下内容: location / { root /data/www/f ...
- 20155229-付钰涵-分析自我技能延展到c语言学习状况
我的小技能 我记得幼儿园时表演的舞蹈,也记得从水彩到素描的学习,还记得小学和初中获得的钢琴省级奖项. 舞蹈止于一年级,绘画止于三年级,钢琴从学前班到高一那十年的时间里有过断续. 03年-04年的那个冬 ...