$(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之轮播图的更多相关文章

  1. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  3. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  4. CSS-用伪类制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  6. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  7. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  8. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  9. superSlider实现美女轮播图

    superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...

随机推荐

  1. Oracle Flashback Technologies (总)

    Oracle Flashback Technologies Oracle 9i中增加了闪回查询技术,闪回查询为数据库提供了一种简单.强大.完全无干扰从人为错误中恢复的机制.通过闪回查询,用户可以查看过 ...

  2. asp.net treeview 异步加载

    在使用TreeView控件的时候,如果数据量太大,这个TreeView控件加载会很慢,有时甚至加载失败, 为了更好的使用TreeView控件加载大量的数据,采用异步延迟加载TreeView. 在Tre ...

  3. 为什么要在block用weak self

    block会给内部所有的对象引用计数加一,这一方面会带来潜在的retain cycle,不过我们可以通过Weak Self的手段解决.另一方面比较重要就是,它会延长对象的生命周期. 在block前面写 ...

  4. MyEclipse下如何安装和使用ibatis插件(网上的资料对于myeclipse8.5根本就是没有用的,所以我还是自己选择了装了一个eclipse,然后将插件装在了eclipse中)

    (1)myeclipse→help→Myeclipse configuration center:点击sofeware选项卡,在Browes Software 下有一个输入框,点击add site按钮 ...

  5. paper 32 :svm参数优化的进展

    从今天开始,我的微信公众号“天空之窗”就暂且停止更新内容了,专心搞研究!上午从师姐那儿淘到一份关于faruto讲解的Libsvm-FarutoUltimate3.1 based on libsvm-3 ...

  6. jquery选项卡切换

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  7. Java中的数组操作进阶

    package com.mi.array; import java.util.Arrays; /** * System.arraycopy(i, 0, j, 0, i.length);这种复制会覆盖目 ...

  8. beta-1阶段各组员的贡献分分配

    小组名称:nice! 小组成员:李权 于淼 刘芳芳 韩媛媛 宫丽君 项目内容:约跑app 分数分配规则 个人贡献分=基本贡献分*0.2+特殊贡献分*0.3+个人代码贡献量*0.5 其中 基本贡献分,特 ...

  9. LR Socket 测试demo

    建议像我这样最开始未接触过的,还是先从简单录制开始.录制完之后,分析测试脚本,再学习,再自己根据需要编写测试脚本. 第一:录制. A.    B. 选择需要录制的exe的目录 ,填写完后点击ok. C ...

  10. 【海岛帝国系列赛】No.4 海岛帝国:LYF的太空运输站

    50212228海岛帝国:LYF的太空运输站 [试题描述] 最近,“购物券”WHT在“药师傅”帝国资源大会上提出了“SSTS”太空运输站计划.由于恐怖分子前些日子刚猖狂完,炸毁高楼无数,YSF不得不执 ...