自写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 ...
随机推荐
- JMeter压测分布式部署
监控JMeter压力机的性能
- React-Native之截图组件view-shot的介绍与使用
React-Native之截图组件view-shot的介绍与使用 一,需求分析 1,需要将分享页生成图片,并分享到微信好友与朋友圈. 二,react-native-view-shot介绍 1,可以截取 ...
- CentOS7配置gradle，或配置maven
借鉴博客: https://www.cnblogs.com/imyalost/p/8746527.html 特简单,不多说了,自己看 1.下载gradle4.6版本:wget https://down ...
- idea 最新破解亲测有效
选择License serverLicense server address: 填:http://active.chinapyg.com/ (不能用了) 2018-5-7更新 新增一个 http:// ...
- 设计模式之原型模式（c++）
问题描述 看到这个模式,很容易想到小时候看的<西游记>,齐天大圣孙悟空发飙的时候可以通过自己头上的 3 根毛立马复制出来成千上万的孙悟空, 对付小妖怪很管用(数量最重要). Prototy ...
- python之路--递归, 二分法
一 . 递归 自己调用自己, 递归的入口(参数) 和 出口(return), 树形结构的遍历. def func(): print("我是递归") func() func() ...
- 从Oracle数据库中查询前几个月数据时需要注意的一些问题
在最近的一个项目中,有一个需求就是要查询数据库中前几个月的历史数据,但是由于自己考虑不全面造成了程序的bug,现在将这一块好好作一个总结,希望以后不再犯这种很低级的错误,首先贴出查询中用到的一个子函数 ...
- memcach 命令行
1. cmd上登录memcache # telnet 127.0.0.1 11211 2. 列出所有items stats items 3. 通过itemid获取key 接下来基于列出的i ...
- iOS的非常全的三方库，插件，大牛博客
转自: http://www.cnblogs.com/zyjzyj/p/6015625.html github排名:https://github.com/trending, github搜索:http ...
- Django-urls路由系统
Django的路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. ...