$(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. 《30天自制操作系统》03_day_学习笔记

    harib00a: 添加的部分从P46开始,制作IPL准备开始从磁盘装载程序了 笔者讲解了软盘的驱动的构造,以及汇编语言读取软盘的方法 MOV AX,0x0820 MOV ES,AX ; 柱面0 ; ...

  2. Tomcat 部署:工程下 META-INF 目录下的 Context.xml

    tomcat 在META-INF 文件夹中添加context.xml,使项目自动应用更新文件 Meta-inf文件夹下新建context.xml. <Context path="/FU ...

  3. HTML部分标签和代码

    1.1.1 一般标签.格式控制标签 所谓HTML就是 Hyper Text Markup Language(超无文本标记语言) <html>   开始标签 <head> 网页上 ...

  4. UVa 10088 - Trees on My Island (pick定理)

    样例: 输入:123 16 39 28 49 69 98 96 55 84 43 51 3121000 10002000 10004000 20006000 10008000 30008000 800 ...

  5. codevs 1202 求和

    http://codevs.cn/problem/1202/ 1202 求和  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 青铜 Bronze 题解       题目描述 D ...

  6. [转]SecureCRT使用配置详细图文教程

        Secure CRT是一款支持 SSH2.SSH1.Telnet.Telnet/SSH.Relogin.Serial.TAPI.RAW 等协议的终端仿真程序,最吸引我的是,SecureCRT ...

  7. 构造器Constructor是否可被override?

    构造器Constructor是否可被override? 构造器Constructor不能被继承,因此不能重写Overriding,但可以被重载Overloading.

  8. Android -- 背景虚化

    1,在项目中我们常有这样的需求,就是在个人中心的时候,当用户登录后,要显示用户登陆后的头像,然后背景是用户头像的虚化 ,接下来就来实现一下这个功能,先看一下效果 2,实现起来也挺简单的,没什么难度 , ...

  9. java mybatis XML文件中大于号小于号转义

    因为这个是xml文件不允许出现类似“>”这样的字符 用了转义字符把>和<替换掉,然后就没有问题了. <=   相当于 <= >=  相当于 >= XML转义字 ...

  10. js 获取选中的多选框

    前台html <span class="spbox"> <input type="checkbox" name="category& ...