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 ...
随机推荐
- DG - physical standby switchover切换过程
一.切换前检查1.检查备库已经全部接收到主库的redo如果是最大可用性.最大保护性模式,可以在primary端查看v$archive_dest_status,确认是否所有的redo已经传送到备库#在主 ...
- XCODE中的蓝色文件夹与黄色文件夹
XCODE中的蓝色文件夹与黄色文件夹 黄色文件夹比较常见 - group , 在XCODE中以文件夹的形式存在,有层次感,但是实际文件在工程下是散乱的,没有层级结构.是XCODE中虚拟目录. 蓝色文件 ...
- 使用javap反编译class文件
一个普通的Java类: package org.ccnt.concurrence; public class VolatileTest { public static volatile int rac ...
- redhat vim编辑器永久添加行号
cd ~ vim .vimrc 第一行加入: set nu :wq 保存退出,即可 如果想取消设置,同理删除set nu即可
- J2EE sitemesh使用
maven包含sitemesh: <dependency> <groupId>opensymphony</groupId> <artifactId>si ...
- zabbix监控企业esxi虚拟机
zabbix监控企业esxi虚拟机 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我来公司有一段时间了,最近也发现模型部有测试和开发反应某台机器登陆不上去了,结果登陆esxi服务器 ...
- C++builder 图像字符流的存储和加载
__fastcall TForm6::TForm6(TComponent* Owner) : TForm(Owner) { #if 1 //for debug AllocConsole(); Atta ...
- [原创]java WEB学习笔记79:Hibernate学习之路--- 四种对象的状态,session核心方法:save()方法,persist()方法,get() 和 load() 方法,update()方法,saveOrUpdate() 方法,merge() 方法,delete() 方法,evict(),hibernate 调用存储过程,hibernate 与 触发器协同工作
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- Python学习总结10:获取shell输出结果
Python中获取shell命令的输出结果的常见方法如下几种: 1. import subprocess output = subprocess.Popen(['ls','-l'],stdout=su ...
- 【皇甫】☀那些事儿......STEP
写项目之前呢,先来缕缕思路,既然要写学生管理系统,那肯定上不了从数据库中读取信息,然而想要从数据库中拿到你想要的东西,就要先登录,得到他的权限才行,所以我们第一步就要先搞出一个登录页面并且能连接到数据 ...