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 ...
随机推荐
- PostgreSQL trigger (function) examples
postgres=# \c warehouse_db You are now connected to database "warehouse_db" as user " ...
- tostring() 作用
tostring() 作用 -->显示类中属性的值 -->不想显示该类的内存地址
- 。。。Hibernate 查询数据 事务管理。。。
在Hibernate中,查询数据的时候,可能会需要事务的管理,为什么呢?因为在查询数据库的时候,Hibernate将数据从数据库里面查询出来之后,会先把数据放入Hibernate的session缓存里 ...
- android 添加背景音乐
MediaPlayer mediaPlayer=MediaPlayer.create(MainActivity.this,R.raw.qiji); mediaPlayer.start();
- asp上传图片提示 ADODB.Stream 错误 '800a0bbc'的解决方法
asp上传图片提示 ADODB.Stream 错误 '800a0bbc' 有这个提示有很多问题导致.权限是常见一种.这个不多说,还有一个有点怪的就是 windows2008显示系统时间的格式竟然是:2 ...
- C# 控制台程序如何防止启动多个实例
==================================================================================================== ...
- 夺命雷公狗---DEDECMS----2快速入门之玩转dede四大表之间的关系
比如一个小说网站,网站里面有很多类型让我们的小说网他里面有很多种分类,如: 玄幻....奇幻....仙侠....武侠....文学....异界....都市....军事....历史....灵异....悬疑 ...
- Scrum站立会议----11月4日
小组名称:nice! 组长:李权 成员:于淼 刘芳芳韩媛媛 宫丽君 时间:2016.11.4 12:00--12:30 地点:传媒西楼220室 代码地址:Https: https://git ...
- form 表单jquery验证插件使用
第一部分:表单样式 <form action="#" method="post" id="regist"> <tabl ...
- web负载均衡
在有些时候进行扩展是显而易见的,比如下载服务由于带宽不足而必须进行的扩展,但是,另一些时候,很多人一看到站点性能不尽如人意,就马上实施负载均衡等扩展手段,真的需要这样做吗?当然这个问题也只有他们自己能 ...