$(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. Highcharts选项配置详细说明文档(zz)

    http://www.helloweba.com/view-blog-156.html Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明 ...

  2. Eclipse中进行Gradle+Jetty部署的web项目的断点调试

    1.自行配置好build.gradle文件和按照gradle的web项目目录结构规范建立java.resourece和webapp文件夹 可在build.gradle文件中自由设定“http端口” 1 ...

  3. 转:python webdriver 环境搭建

    第一节 环境搭建准备工具如下:-------------------------------------------------------------下载 python[python 开发环境]ht ...

  4. nyist 593 Take it easy

    http://acm.nyist.net/JudgeOnline/problem.php?pid=593 Take it easy 时间限制:1000 ms  |  内存限制:65535 KB 难度: ...

  5. csuoj 1390: Planting Trees

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1390 1390: Planting Trees Time Limit: 1 Sec  Memory ...

  6. 认真学习shell的第一天-数学运算

    shell中的数学运算有三种方式: (1)let,用let的时候,变量名称前不用添加$ (2)[],[]中变量可使用也可不使用$ (3)(())变量名之前必须添加$

  7. C++新手之培养良好的编程风格

    内功深厚的武林高手出招往往平淡无奇.同理,编程高手也不会用奇门怪招写程序.良好的编程风格是产生高质量程序的前提. 下面以C++为例,来给大家介绍. 一. 命名约定 有不少人编程时用拼音给函数或变量命名 ...

  8. 取客户的银行帐号SQL

    SELECT ibybanks.bank_name, --银行 ibybanks.bank_branch_name, --分行 ibybanks.bank_account_num_electronic ...

  9. async fifo

    异步fifo,解决跨时钟域的数据传输问题. 由binary,gray两种counter组成,在读写domain之间,只传输gray code. 主要的设计难点在empty和full的产生中. empt ...

  10. C# 文件读取(二)

    将我的电脑中的文件夹信息显示到TreeView控件上. 方法很多种,下面这种方法添加了我的文档. public partial class Form1 : Form { public Form1() ...