/**
* jQuery.hhNewSilder 滚动图片插件
* User: huanhuan
* QQ: 651471385
* Email: th.wanghuan@gmail.com
* 微博: huanhuan的天使
* Date: 13-7-4
* Time: 下午5:20
* Dependence jquery-1.7.2.min.js
*/
$(function(){
$.fn.hhNewSilder = function(infor){
var defaults = {
autoTimer:6000,
speed:1000,
picBox:'thDSpic',
circleBox:'thDSnumber',
leftEle:'thDSprev',
rightEle:'thDSnext',
preLoadSrc:'images/loading.gif',
autoPlay:true,
imgBox:function(){return GetBox();},
imgBoxSize:function(){return GetSize();}
};
var option = $.extend(defaults, infor || {}),
circleLi = option.imgBox().circleLi,
imgList = option.imgBox().imgList,
imgSize = option.imgBoxSize(),
_thisAll = $(this),
n = 1;
$('.'+option.circleBox).find('li:eq(0)').addClass('thScrusor');
//拿到li
function GetBox(){
this.circleLi = $('.'+option.circleBox,_thisAll).find("li");
this.imgList =$('.'+option.picBox,_thisAll).find("li");
return this;
}
//设置宽度、高度
function GetSize(){
this.w = $('.'+option.picBox,_thisAll).width();
this.h = $('.'+option.picBox,_thisAll).height();
return this;
}
var s = GetSize;
s.w
//设置ul的宽度
$('.'+option.picBox, _thisAll).find('ul').css({
width : imgList.width() * imgList.length
});
/*function getSiz(){
var w = $('.'+option.picBox,_thisAll).width();
var h = $('.'+option.picBox,_thisAll).height();
return { w: w, h: h}
}
var size = getSiz();
size.w*/
return this.each(function(){
//初始化时给li添加class="show"
imgList.eq(0).addClass('show').css({'left':0}).siblings().removeClass('show').css({'left':imgSize.w});
function Play(){
if(imgList.is(':animated')) return; //如果在运动则返回
var _index = $('.'+option.picBox).find('li.show').index(); //得到当前的
_index = _index == "-1" ? 0 : _index;
if(imgList.eq(n).hasClass('show')) return; //如果有show class则返回
circleLi.eq(n).addClass('thScrusor').siblings().removeClass('thScrusor'); //圆点
imgList.slice(_index,_index+1).animate({'left':-imgSize.w},option.speed,function(){
$(this).css({'left':imgSize.w});
}).removeClass('show');
imgList.eq(n).animate({left:0},option.speed).addClass('show'); //当前li添加show属性
//追加
if(imgList.length-1>n){
n++;
}else{
n=0;
}
}
_init = function(){
var x=null;
$('.'+option.picBox).find('li:gt(0)').css('left',imgSize.w);
if(option.autoPlay) x=setInterval(Play,option.autoTimer);
circleLi.click(function(){
n = $(this).index();
Play();
if(option.autoPlay){
clearInterval(x);
x=setInterval(Play,option.autoTimer);
}
});
//左右按钮绑定事件
$('.'+option.leftEle+',.'+option.rightEle).css({'opacity':'0.3'}).live({
mouseover:function(){
$(this).stop(true,false).animate({'opacity':'1'},400);
},
mouseout:function(){
$(this).stop(true,false).animate({'opacity':'0.3'},400);
},
click:function(){
var _index = $('.'+option.picBox).find('li.show').index();
if($(this).attr('class')==option.leftEle){
n = _index==0?(imgList.length-1):_index-1;
}else{
n = _index==(imgList.length-1)?0:_index+1;
}
Play();
if(option.autoPlay){
clearInterval(x);
x=setInterval(Play,option.autoTimer);
}
}
});
}
return _init();
});
}
});
- jQuery.hhLRSlider 左右滚动图片插件
/** * jQuery.hhLRSlider 左右滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- jQuery页面滚动图片等元素动态加载实现
一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...
- [转]jQuery页面滚动图片等元素动态加载实现
本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...
- 自己写一个jQuery垂直滚动栏插件(panel)
html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...
- [JQuery]ScrollMe滚动特效插件
最近考完试,一切顺利,昨晚闲着无聊把最近要用的一个插件翻译了一下:ScrollMe. (╯‵□′)╯︵┻━┻地址请戳: /* ScrollMe -李明夕翻译(╯‵□′)╯︵┻━┻ */ ScrollM ...
- jQuery scrollFix滚动定位插件
[插件功能] 当用户向上或向下滚动页面到一定位置时,目标元素开始固定定位(position:fixed),当回滚到原位置时目标元素恢复到原状态,可以定制触发滚动相对屏幕位置和触发滚动方向,兼容IE6 ...
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
随机推荐
- MyEclipse与Mysql数据库的连接
1.载入MySql驱动程序 Class.forName("com.mysql.jdbc.Driver"); // 载入MySql驱动程序 2.建立Connection连接对象 ...
- nape.geom.MarchingSquares
Nape中的MarchingSquares类很简单,只有一个静态函数run,不过这对绘制那些简单的形状来说,已经足够了(当然MarchingSquares能做的不只这些).下面是这个run方法的结构: ...
- PrintJ的设计模式之旅——1.模式之父
好奇设计模式的源头,做了一番搜索和调查,于是便开启了这个系列“PrintJ的设计模式之旅”. 1.模式之父 GOF(Gang of Four) Erich Gamma.Richard Helm.Ral ...
- Effective C++ 条款45
本节条款的题目是运用成员模板接受全部兼容类型 作者阐述自己的观点是通过智能指针的样例. 在学习本节条款之前我们要先明确关于隐式转化的问题 例如以下代码: #include<iostream> ...
- PAT 1017
1017. Queueing at Bank (25) Suppose a bank has K windows open for service. There is a yellow line in ...
- Middleware
Middleware The middleware gives a single shot to the views associated into Controllers, before execu ...
- Swift基础学习01
相关网站:http://www.cnblogs.com/tt_mc/p/3871295.html 相关辅助操作: 可以在右边直接查看输出值 可能出现的常见问题: 1.凡是=注意左右间距一样 2 ...
- Spring-boot使用Ehcache配置
1.配置类 @Configuration @EnableCaching public class CacheConfiguration {// implements CachingConfigurer ...
- axel源码学习(0)——程序逻辑
axel简介 axel是一个命令行下的轻量级http/ftp 下载加速工具,支持多线程下载和断点续传,支持从多个镜像下载同一文件. axel的用法如下: 图 0.1 axel usage axel 粗 ...
- Unix网络编程(3)——C/S模型几种情况
UNP第五章描述了在客户端和服务器连接建立之后会出现的几种情况,并给出了解决方案,做一个简单的总结. 先给出这个简单的回射C/S程序的模型如下图. 1.客户端和服务器正常终止连接 客户端从标准输入 ...