jqeury之轮播图
$(document).ready(function(){ var sWidth = $('#pic1').width();
var len = $('#pic1 .sildebar li').length;
var timer;
var index = 0; var focusBox = '<ul class="focusBox clearfix"></ul>';
$('#pic1').append(focusBox); //生成底部焦点
for(var i=0;i<len;i++){
var li = document.createElement('li');
$('.focusBox')[0].appendChild(li);
} //点击圆点时,进行切换
$('#pic1 .focusBox li').click(function(){
index = $('#pic1 .focusBox li').index(this);
showPic(index);
}).eq(0).trigger('click'); $('#pic1 .sildebar').css("width",sWidth * (len)); //定时器,定时进行切换
$('#pic1').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
showPic(index);
index++;
if(index == len){index = 0;}
},2000);
}).trigger('mouseleave'); function showPic(index){
var nowLeft = -index * sWidth;
$('#pic1 .sildebar').stop(true,false).animate({left:nowLeft},1000);
$('#pic1 .focusBox li').removeClass('cur').eq(index).addClass('cur');
}
});
jqeury之轮播图的更多相关文章
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- 实现下来ScrollView放大轮播图
创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...
- ViewPager轮播图
LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...
- CSS-用伪类制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...
- React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- superSlider实现美女轮播图
superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...
随机推荐
- 让show parameter显示隐含参数(11G)
1.创建视图show_hidden_v$parameter create or replace view show_hidden_v$parameter (INST_ID, NUM , NAME , ...
- Oracle Flashback Technologies - 闪回被drop的表
Oracle Flashback Technologies - 闪回被drop的表 在oracle10g中,drop一个表后,表没有真正被删除,支持被rename后放在recyclebin中. #新建 ...
- 使用已有PDB克隆PDB
使用已有PDB克隆PDB $ sqlplus '/as sysdba' SQL*Plus: Release Production on Tue Jun :: Copyright (c) , , Ora ...
- PHP——生成随机数和日期时间
在PHP里面两个常用的函数 rand(); 生成随机数 当括号内无参数时 系统会以当前时间为种子进行随机数的生成 rand(1,10); 括号里面是生成随机数的范围,在形成的随机数在1~1 ...
- Lucas
C(n,m)%p=C(n%p,m%p)*C(n/p,m/p)%p 迭代递归 n,m非负整数,p质数 证明 最后一个由二项式定理和p进制数性质得出的我并没有看懂...
- linux第10天 msg消息队列
cat /proc/sys/kernel/msgmax最大消息长度限制 cat /proc/sys/kernel/msgmnb消息队列总的字节数 cat /proc/sys/kernel/msgmni ...
- paper 60 :转载关于视觉SCI期刊
ChanLee_1整理的计算机视觉领域稍微容易中的期刊 模式识别,计算机视觉领域,期刊 (1)pattern recognition letters, 从投稿到发表,一年半时间 (2)Pattern ...
- 夺命雷公狗---微信开发55----微信js-sdk接口开发(2)接口功能介绍之签名算法
我们JS-SDK里面其实有不少的接口 startRecord---录音 stopRecord---停止录音 playVoice---播放 pauseVoice---暂停播放 uploadImage-- ...
- logging
#coding=utf8 import sys, logging logging.basicConfig(level=logging.INFO, forma ...
- [Ubuntu] Linux下使用google app engine,无法打开https网站的解决方法
为什么这里写的是 google app engine?原因我就不解释了.步骤如下: 1)安装证书导入工具:$ sudo apt-get install libnss3-tools 2)导入CA.crt ...