自写juqery插件实现左右循环滚动效果图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,li{list-style-type: none;}
.slide{
position: relative;
overflow: hidden;
border: 1px solid #ddd;
margin: 0 auto;
}
.slide li{
line-height: 400px;
text-align: center;
font-size: 50px;
font-weight: bold;
} /*翻页*/
.prev,.next{
font-size: 50px;
position: absolute;
width: 50px;
height: 80px;
line-height: 80px;
top: 50%;
margin-top: -50px;
text-align: center;
cursor: pointer;
display: none;
}
.slide:hover .prev,.slide:hover .next{
background: rgba(100,100,100,.3);
display: block;
}
.next{right: 0;}
/*pagetion*/
.pagetion{
width: 100%;
height: 20px;
position: absolute;
bottom: 10px;
right: 0;
}
ul.page{
padding-left: 50px;
}
ul.page li{
float: left;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255,255,255,.3);
margin-right: 5px;
border: 1px solid #ddd;
cursor: pointer;
}
ul.page li.curr{background: #F90650;}
</style>
</head>
<body>
<div class="slide">
<ul class="imgBox">
<li><img src="http://hcjp.github.io/work/demo/wfgd/1.jpg"></li>
<li><img src="http://hcjp.github.io/work/demo/wfgd/2.jpg"></li>
<li><img src="http://hcjp.github.io/work/demo/wfgd/3.jpg"></li>
</ul>
</div>
</body>
<script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
$(function(){
$('.slide').slide({
'type': 1,
'lr' : true,
'pt' : true
});
});
</script>
</html>
$(function(){
$.fn.slide = function(options) {
var defaults = {
'width' : 800,
'height': 400,
'curr' : 0,
'type' : 0,
'lr' : false,
'pt' : false
};
var _this = this;
var _ul = _this.find('ul.imgBox');
var _lg = _ul.find('li').length;//实际个数
var timer = null;
var settings = $.extend({},defaults, options);
return this.each(function(){
init(act);
});
/*构造*/
function init(callBack){
_ul.html(_ul.html()+_ul.html());
setStyle();
if(settings.lr){
addLr();
}
if(settings.pt){
addPt();
}
callBack();
}
/*添加翻页*/
function addLr(){
_this.append('<span class="prev"><</span><span class="next">></span>');
_this.find('.prev').on('click',prev);
_this.find('.next').on('click',next);
}
/*添加页码*/
function addPt(callBack){
var _html = '';
for(var i = 0;i < _lg;i++){
_html += '<li></li>';
}
_this.append('<div class="pagetion"><ul class="page">' + _html + '</ul></div>');
$('.pagetion li').each(function(index){
if(index == settings.curr){
$(this).addClass('curr');
}
$(this).on('click',function(){
clearTimeout(timer);
settings.curr = index;
change(settings.type);
act();
});
});
}
/*滚动*/
function act(){
timer = setInterval(function(){
settings.curr++;
if(settings.curr == _lg + 1){
settings.curr = 1;
_ul.css({'left':'0px'});
}
change(settings.type);
},3000);
}
/*下一张*/
function next(){
clearTimeout(timer);
settings.curr++;
if(settings.curr == _lg + 1){
settings.curr = 1;
_ul.css({'left':'0px'});
}
change(settings.type);
act();
}
/*上一张*/
function prev(){
clearTimeout(timer);
settings.curr--;
if(settings.curr == -1){
settings.curr = _lg - 1;
_ul.css({'left':'-' + settings.width * _lg + 'px'});
}
change(settings.type,'prev');
act();
}
/*设置样式*/
function setStyle(){
var _li = _ul.find('li');
_this.css({
'width': settings.width + 'px',
'height' : settings.height + 'px'
});
_ul.css({'width' : settings.width * _li.length + 'px','position':'absolute'});
_ul.find('li').each(function(){
$(this).css({
'width': settings.width + 'px',
'height' : settings.height + 'px',
'float' : 'left'
});
});
}
function change(_type,lr){
var _p = settings.curr;
if(!_type){
_ul.css({'left':'-' + settings.width * settings.curr + 'px'});
}else{
_ul.stop(true,false).animate({'left':'-' + settings.width * settings.curr + 'px'});
}
if(_p == _lg){
_p = 0;
}
$('.pagetion li').eq(_p).addClass('curr').siblings().removeClass('curr');
}
}
});
更多http://hcjp.github.io/work/demo/
自写juqery插件实现左右循环滚动效果图的更多相关文章
- 前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
- 跟着《beginning jquery》学写slider插件并借助自定义事件改进它
<beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现 ...
- Jquery制作--循环滚动列表
自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...
- IOS实现自动循环滚动广告--ScrollView的优化和封装
一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...
- 什么？你还不会写JQuery 插件
前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...
- 写JQuery 插件 什么？你还不会写JQuery 插件
http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...
- ul 仿 table 循环滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- 写jQuery插件
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
随机推荐
- Redis教程(Linux)
这里汇总了从简单的安装到较为复杂的配置,由浅入深的学习redis... 一 , 安装 1) redis扩展安装 从官网上下载扩展压缩包 wget http://pecl.php.net/get/red ...
- Redis教程(Windows)
安装 1)下载redis压缩包并 , 推荐地址:https://github.com/MSOpenTech/redis/releases Redis 支持 32 位和 64 位.这个需要根据你系统平 ...
- C#的修饰符
C#的修饰符 废话少说,直接上总结: 一.在命名空间下: 类:默认修饰符为internal 接口:默认的修饰符为internal 结构体:默认的修饰符为internal 枚举:默认的修饰符为inter ...
- python爬虫之redis环境简单部署
Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久 ...
- python爬虫之git的安装
一.初始 1.发展历史 *最开始没有对代码的管理,导致很多东西混乱和丢失. *后来大家想了一个办法,用最简单最笨的方法,各种复制文件夹. *然后就出现了版本控制的工具. 1.单机版:RCS(198 ...
- umount -fl用法
umount, 老是提示:device is busy, 服务又不能停止的.可以用"umount -fl"解决! 挂载: mount - mount a filesystem mo ...
- 18个Python高效编程技巧，Mark！
初识Python语言,觉得python满足了我上学时候对编程语言的所有要求.python语言的高效编程技巧让我们这些大学曾经苦逼学了四年c或者c++的人,兴奋的不行不行的,终于解脱了.高级语言,如果做 ...
- idea创建maven项目的一点关键
maven中的一些概念: POM:项目对象模型(Project Object Model),是项目的一些关键元信息的集合.主要包含项目管理信息.具体的项目描述.开发小组的构 成.源代码库(如CVS)和 ...
- chrome中 GET /undefined 404
Chrome中调试网站,会出现 这是由 crxMouse Chrome™ 手势 引起的,关闭即可
- Fourier Transform Complex Conjugate Discussion
FT of function $f(t)$ is to take integration of the product of $f(t)$ and $e^{-j\Omega t}$. By separ ...