自写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 ...
随机推荐
- 软件工程(FZU2015) 助教总结
SE_FZU目录:1 2 3 4 5 6 7 8 9 10 11 12 13 本次构建之法-SE助教工作,和福州大学张老师协作,福大学生基本发挥出了一定水平,在此做个小结. 教师 张老师本身的SE教学 ...
- mysql 无法退出sql命令行编辑
mysql 无法退出sql命令行编辑 | ANBOBhttp://www.anbob.com/archives/579.html mysql 无法退出sql命令行编辑 - 码农甲乙丙 - CSDN博客 ...
- VMware虚拟机与Windows文件共享
开发中,我们经常的需求是这样的:我想再Windows中进行快捷开发,但是想在linux中运行,那么需要将文件方便在linux中管理,基本可以分成两种方式: 1. 使用网络工具:vmware_tool工 ...
- Javascript与C#对变量的处理方式
先来看一下Javascript的情况(下面所说的基本类型和简单类型是一个意思): Javascript中变量会存在两种情况,一种是基本类型的,一共有五种,有null.Bollean.undefin ...
- java.lang包【Object类】
基本描述: (1)Object类位于java.lang包中,java.lang包包含着Java最基础和核心的类,在编译时会自动导入: (2)Object类是所有Java类的祖先.每个类都使用 Obje ...
- java学习之—数组的曾删改查
/** * 数组的曾删改查 * Create by Administrator * 2018/6/8 0008 * 上午 9:54 **/ public class HighArray { priva ...
- C/S和B/S应用程序的区别
一.C/S和B/S介绍: 1.C/S介绍: Client/Server架构,即客户端/服务器架构.是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销 ...
- 如何在MAC上运行exe程序
1. 首先下载并运行CrossOver 运行CrossOver需要收费,试用期为14天,运行CrossOver 2. 选择exe应用程序,新建容器,安装exe程序 3.安装成功后,运行exe应用程序启 ...
- 莫烦theano学习自修第八天【分类问题】
1. 代码实现 from __future__ import print_function import numpy as np import theano import theano.tensor ...
- fiddler 学习笔记1-下载安装、开启、关闭抓包功能
1 下载安装(安装于C盘之外的空间中) https://www.telerik.com/fiddler 2 开启抓包功能:安装后默认为开启状态 点击 file-capture 或左下角capture ...