自写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 ...
随机推荐
- 简述HTTP协议
引言 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网服务器传输超文本到本地浏览器的传送协议.HTTP 是基于 TCP/IP 协议通信协议 ...
- 关于微信小程序使用canvas生成图片，内容图片跨域的问题
最近有个项目是保存为名片(图片),让用户发送给朋友或朋友圈,找了很多方案都不适用,绞尽脑汁之后还是选了使用canvas,但是用这玩意儿生成图片最大的缺点就是,如果你的内容中有图片,并且这个图片是通过外 ...
- 在C 与 C++混编中, 出现error LNK2019: 无法解析的外部符号 "int __cdecl main_(int,char * *)" (?main_@@YAHHPEAPEAD@Z)，该符号在函数 main 中被引用
main_ 这个函数的头文件 应该做标准化输出 : extern "C" int main_(int argc, char **argv);
- [转帖]SAP一句话入门：Production Planning
SAP一句话入门:Production Planning http://blog.vsharing.com/MilesForce/A617692.html SAP是庞大的,模块是多多的,功能是强大的, ...
- [转帖]Huge Page 是否是拯救性能的万能良药？
Huge Page 是否是拯救性能的万能良药? 本文将分析是否Huge Page在任何条件下(特别是NUMA架构下)都能带来性能提升. 文章欢迎转载,但转载时请保留本段文字,并置于文章的顶部 作者:卢 ...
- Setting property 'source' to 'org.eclipse.jst.jee.server:hczm' did not find a matching property
- js判断一个图片是否已经存在于缓存
如下代码: var url = "http://......../image.jpg"; var img = new Image(); img.src = url; if(im ...
- flutter-StatelessWidget与StatefulWidget
StatelessWidget和StatefulWidget是flutter的基础组件,日常开发中自定义Widget都是选择继承这两者之一. 两者的区别在于状态的改变,StatelessWidget面 ...
- websocket协议握手详解
最近使用tornado做长链接想着怎么着也要试试websocket协议吧.所以说干就干. 首先要知道websocket是基于http协议的,为什么这么说?因为从协议来说,websocket是借用了一部 ...
- python数据结构与算法第十二天【快速排序】
1. 原理如图所示: 2.代码实现 def quick_sort(alist, start, end): """快速排序""" # 递归的退 ...