$(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. ORA-19693: 已包括备份片段

    使用rman异机恢复数据时,报"ORA-19693: 已包括备份片段..."错误. 执行的rman命令: RMAN> run{ 2> allocate channel ...

  2. Oracle sqlldr导入导出txt数据文件详解

    一.sqlldr导入txt 1.预备 a).txt文件 这里要保存成无签名的UTF-8 b).oracle建表 2.编写控制文件input_test.ctl LOAD DATA CHARACTERSE ...

  3. CMOS and BIOS

    1,cmos简介.   cmos是主板上一块可读写的RAM芯片.用途:主要用来保存当前系统的硬件配置和操作人员对某些参数的设定.cmos芯片是由一块纽扣电池供电.因此在关机状态内部信息也不会丢失. 2 ...

  4. poj 1417(并查集+简单dp)

    True Liars Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2087   Accepted: 640 Descrip ...

  5. [原创]java WEB学习笔记76:Hibernate学习之路---Hibernate介绍,hibernate 环境的搭建

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. Java基础(9):Java生成随机数一定范围内的数的一个典型例子

    题目:编写一个JAVA程序,创建指定长度的 int 型数组,并生成 100 以内随机数为数组中的每个元素赋值,然后输出数组 note: 通过 (int)(Math.random() * 100) 生成 ...

  7. C++之路进阶——codevs2313(星际竞速)

    2313 星际竞速 2010年省队选拔赛山东  时间限制: 3 s  空间限制: 128000 KB  题目等级 : 大师 Master     题目描述 Description 10 年一度的银河系 ...

  8. run()和star()区别

    run()和star()区别 run()-->只是thread类的一个普通方法调用 star()-->用来启动线程,实现多线程运行

  9. Windows服务安装异常:System.Security.SecurityException: 未找到源,但未能搜索某些或全部事件日志。不可 访问的日志: Security

    Windows服务安装异常:System.Security.SecurityException: 未找到源,但未能搜索某些或全部事件日志.不可 访问的日志: Security 2种方法处理: 一.右键 ...

  10. java mvc控制器基本传值方式

    控制器----- @RequestMapping(value = "MatchDetail", method = RequestMethod.GET) public ModelAn ...