自写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 ...
随机推荐
- C++实现算法常用的STL---整理
algorithm min(a,b)和max(a,b) #include<iostream> #include<algorithm> using namespace std; ...
- 三、Object 对象常用操作方法
Object 构造方法 一.asign vs 扩展运算符 ... 1.共同点:都是浅拷贝 2.开发推荐 扩展运算符... let obj={ name: 'Tom', age: 18 }; let o ...
- [转帖]CS、IP和PC寄存器
https://www.cnblogs.com/zhuge2018/p/8466288.html 之前的理解不对 当然了 现在的理解也不太对.. CS.IP和PC寄存器 CS寄存器和IP寄存器: 首先 ...
- [转帖]学习关于TTL
自己简单试了一下在家里与在公司里面服务器的连接: C:\Users\Administrator>tracert oms.inspur.com 通过最多 个跃点跟踪 到 oms.inspur.co ...
- [2018.05].NET Core 3 and Support for Windows Desktop Applications
.NET Core 3 and Support for Windows Desktop Applications Richard 微软官网的内容...net 3.0 升级任务 任重道远 https:/ ...
- Oracle分析函数row_number()等的使用实例
--分析函数 --rank() over(order by) --值相同,排名相同,序号跳跃 select * from t_account select rank() over(order by u ...
- python学习笔记（11）--文件与数据格式化
文件的概念: 文件是数据的抽象和集合,是存储在辅助存储器上的数据序列,文件是数据存储的一种形式,文件的展现形态,文本文件和二进制文件. 文本文件输出: f.txt文件保存:“我是中国人” >&g ...
- shell expr用法
expr 计算整数变量值 使用方法如下: linux-zpycfm:/home/test/shell # s=+ -bash: +: command not found linux-zpycfm:/h ...
- 使用mysqlbinlog恢复数据
前提:mysql数据库开启了binlog日志,并且有对应的日志文件 起因:今天由于同事对数据库的误操作不小心删除了一条数据 方法一:通过binlog日志文件恢复数据 通过mysqlbinlog恢复My ...
- 老男孩python学习自修【第二天】字符串用法
实时处理增量日志最佳实践 主要使用f.seek()和f.tell()实现 字符串处理函数: s.find(substr, start, end) 查找子字符串,找不到则返回-1,找到则返回对应的索引 ...