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 ...
随机推荐
- SQL注入攻击之关键字检测
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来.我们都知道计算机技术发展日新月异,速度惊人的快,你我稍不留神,就会被慢慢淘汰!因此:每日不间断的学习是避免被 ...
- RAC GI安装,报"Task resolv.conf Integerity"验证失败
安装12.1.0.2 rac测试环境的时候,报"Task resolv.conf Integerity"验证失败 解决方案: 因为测试环境,没有使用DNS,删除resolv.con ...
- Function call process
摘自自博客网址 http://www.cnblogs.com/bangerlee/archive/2012/05/22/2508772.html ax(accumulator): 可用于存放函数返回值 ...
- 通用窗口类 Inventory Pro 2.1.2 Demo1(下)
本篇想总结的是Inventory Pro中通用窗口的具体实现,但还是要强调下该插件的重点还是装备系统而不是通用窗口系统,所以这里提到的通用窗口类其实是通用装备窗口类(其实该插件中也有非装备窗口比如No ...
- UML: 活动图
摘自http://www.umlonline.org/school/thread-36-1-1.html 活动图和流程图很类似,我们看看一个流程图的例子: 活动图是用来描述流程的一种图,它与流程图的不 ...
- mac tomcat
alampsdeMacBook-Pro:bin alamps$ ./startup.sh Using CATALINA_BASE: /Users/alamps/Library/apache-tomca ...
- paper 73 :HDR(High Dynamic Range Imaging)在摄影中指高动态范围成像
HDR(High Dynamic Range Imaging)在摄影中指高动态范围成像.国内的教程基本语焉不详,找到一篇比较详尽的国外教程翻译出来,希望对大家有帮助.^_^ 原文地址:http://p ...
- logstash中的redis插件
redis作为logstash中的官方broker,既有input插件,还有output插件. redis input插件 data_type属性: 有三种类型, list -> BLPOP - ...
- linux_c学习笔记之curl的使用一
参考文档 使用libcurl发送PUT请求上传数据以及DELETE请求删除数据 http://blog.163.com/lixiangqiu_9202/blog/static/535750372014 ...
- COM编程之二 接口
[1]接口 DLL的接口是它所输出的那些函数. C++类的接口是该类的一个成员函数集. COM接口是包含一个函数指针数组的内存结构. 每一个数组元素包含的是一个由组件所实现的函数的地址. 在COM中接 ...