Jquery制作插件---内容切换
//需求：点击左右导航箭头，实现内容的切换
//代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.box,.box1{
width: 220px;
overflow: hidden;
position: relative;
height: 200px;
}
ul{
width: 1000px;
position: absolute;
}
ul li{
width: 100px;
height: 200px;
float: left;
background-color: red;
margin-right: 20px;
}
.prev,.next{
position: absolute;
width: 30px;
height: 50px;
text-align: center;
line-height: 50px;
top: 75px;
background-color: rgba(200,200,200,0.4);
color: #333;
text-decoration: none;
/*display: none;*/
}
.prev{
left: 0;
}
.next{
right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
</div>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
</div>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
// count：窗口显示的内容个数
// num:每次切换的内容的个数
// speed:切换完成需要的时间
changeImg:function change(count,num,speed){
// $(this) 调用该方法的jq对象
console.log($(this));
var $ul = $(this).find("ul");
var $li = $(this).find("ul li");
var $prev = $(this).find(".prev");
var $next = $(this).find(".next");
// liWidth,每一个li的宽度（包括margin）
var len = $li.length;
var liWidth =$li.eq(0).outerWidth(true);
$ul.css("width",len*liWidth);
$(this).css("width",count*liWidth-20);
// 当前位于最左侧的li元素的索引
var index = 0;
$next.click(function(){
//原索引加上改变值得到新索引
index+=num;
// 最后一li可以显示的索引为li的长度-窗口显示li的个数
if (index>len-count) {
index=0;
}
$ul.animate({
left:(-1)*index*liWidth,
},speed);
});
$prev.click(function(){
index-=num;
if (index<0) {
index=len-count;
}
$ul.animate({
left:(-1)*index*liWidth,
},speed);
})
}
});
$(".box").changeImg(2,2,2000);
$(".box1").changeImg(4,4,2000);
</script>
</body>
</html>
Jquery制作插件---内容切换的更多相关文章
- 一个简单的jquery左右列表内容切换应用
选中左边某个选项点击添加,即可将选中项添加到右边文本框中,点击选中全部即可将全部选项移到右边,移除按钮功能相同. html代码: <div id="main"> < ...
- jQuery上下滑动内容切换选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery鼠标悬停内容动画切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 分享一款页面视差滚动切换jquery.localscroll插件
今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...
- jquery - 通过点击切换文字内容
今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...
- jquery实现页面内部的内容切换
html页面 .box-body-1-3 li{ margin: 20px; cursor: pointer; //实现鼠标放在上面是小手状态 } 点击列表 <div class=" ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- jQuery实现页面导航内容定位效果，并支持内容切换
需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...
- 移动开发必备！15款jQuery Mobile插件
移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...
随机推荐
- JSONObject、 JsonObject、阿里fastJson、谷歌gson区别
JSON:JavaScript Object Notation Java对象表示法 Java中并没有内置的 JSON 解析,需要使用第三方类库.常用的类库如下 一.Gson : 古河开发的JSON 库 ...
- Codeforces Round #608 (Div. 2) - D. Portals(贪心)
题意:你起初有一支军队,有$k$个士兵,现在有$n$座城堡,你若想占领第$i$座城堡,至少得有$a[i]$个士兵才能占领$($占领后士兵不会减少$)$,占领了第$i$座城堡后,你将得到$b[i]$个士 ...
- yp寒假训练一
19年东北四省省赛 做了J G C 补了E H J签到题 G 题意: 给n个正方形的两个斜对角点坐标,问最小的移动可以重叠(移动上下左右一格) 思路: 一开始想的是中心pos移动,但是可能有小数,而且 ...
- 安装 Python 虚拟环境 (Linux)
我的 Ubuntu 18.04 预安装了 python 3.6,但是没有安装 pip,所以先进行安装: apt-get install python-pip 1. 安装虚拟环境所需包: pip ins ...
- vagrant up启动centos7时出现"rsync" could not be found on your PATH. Make sure that rsyncis properly ins
(1)问题1:"rsync" could not be found on your PATH. Make sure that rsyncis properly ins 解决方法: ...
- ubuntu16.04下安装docker和docker-compose
开始安装 由于apt官方库里的docker版本可能比较旧,所以先卸载可能存在的旧版本:$ sudo apt-get remove docker docker-engine docker-ce dock ...
- python学习第一课
第一课: 1.不要使用来路不明的软件 2.下载杀毒软件 3.不懂技术的人在技术人面前会显得愈发无知 4.python无所不能 需要掌握的知识: 1.python基本语法 2.文件处理 3.函数 4.模 ...
- C/C++ - 多线程
前几天简单对C和C++中的创建多线程的函数进行了测试,这篇随笔就简单介绍一下创建线程的相关函数. C中三个创建线程函数:pthread_create()._beginthread().CreateTh ...
- FFmpeg笔记--vcodec和-c:v,-acodec和-c:a的区别？
在看ffmpeg命令的时候经常会看到有些地方使用--vcodec指定视频解码器,而有些地方使用-c:v指定视频解码器,那这两个有没有区别呢? ffmpeg的官方文档: -vcodec codec (o ...
- MyEclipse JSP页面中文字符不能保存
问题: 就是写HTML+JSP代码时有些中文,保存时提示sava could not be completed. Reason: some characters cannot be mapped ...