//需求：点击左右导航箭头，实现内容的切换

　　

//代码如下

<!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">&lt;</a>

<a href="#" class="next">&gt;</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">&lt;</a>

<a href="#" class="next">&gt;</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制作插件---内容切换的更多相关文章

  1. 一个简单的jquery左右列表内容切换应用

    选中左边某个选项点击添加,即可将选中项添加到右边文本框中,点击选中全部即可将全部选项移到右边,移除按钮功能相同. html代码: <div id="main"> < ...

  2. jQuery上下滑动内容切换选项卡

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 分享一款页面视差滚动切换jquery.localscroll插件

    今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...

  5. jquery - 通过点击切换文字内容

    今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...

  6. jquery实现页面内部的内容切换

    html页面 .box-body-1-3 li{ margin: 20px; cursor: pointer;   //实现鼠标放在上面是小手状态 } 点击列表 <div class=" ...

  7. 基于jQuery日历插件制作日历

    这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...

  8. jQuery实现页面导航内容定位效果，并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  9. 移动开发必备！15款jQuery Mobile插件

    移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...

随机推荐

  1. Hpple -- 一个 HTML 解析工具

    在开发中,大部分会使用 JSON 进行数据解析,偶尔会用到 HTML. 使用 Objective-C 解析 HTML 或者 XML,系统自带有两种方式一个是通过 libxml,一个是通过 NSXMLP ...

  2. phpsduty安装SSL证书，apache不能启动，解决方案

    最近给客户开发微信小程序,因为本人也不太懂服务器的安装,(大神勿喷),顾个人一直使用的集成环境,原来一直是客户提供主机什么的,都是我们和客户说一下需要什么环境啊,配置啊,之类的,这次首次自己动手. 废 ...

  3. Solidity高级用法

    1.内存数组: 将数组与memory结合形成内存数组,在函数调用完后就解释 uint[ ] memory values = new uint[ ](3);//初始化了一个长度为3的内存数组: #内存数 ...

  4. Weka算法算法翻译（部分）

    目录 Weka算法翻译(部分) 1. 属性选择算法(select attributes) 1.1 属性评估方法 1.2 搜索方法 2. 分类算法 2.1 贝叶斯算法 2.2 Functions 2.3 ...

  5. Swift3.0-字符串和字符

    一.简介 Swift中的字符串和字符与OC中在表示上并无大的区别,考虑到字符串在平时的开发工作中属于频繁使用的类型,重点需要掌握的内容是String各种操作函数的写法. 二.Swift与OC的区别 三 ...

  6. C#多态学习总结

    面向对象编程三大特点  封装 继承 多态.今天我把自己学习多态的过程进行总结 多态 就是 同一个方法在不同情况下,会表选不同的效果(多个形态).在代码上表现就是 同一个父类对象 赋予不同的子类对象 就 ...

  7. 【剑指Offer面试编程题】题目1355：扑克牌顺子--九度OJ

    题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他 ...

  8. String_Java

    1.substring() 方法返回字符串的子字符串. 语法 public String substring(int beginIndex)//返回第beginIndex个字符以后的子字符串 或 pu ...

  9. docker的私有化仓库harbor搭建

    目前比较流行的docker私有化仓库是harbor,harbor是一个github开源的项目,直接在github上搜索即可,下载地址:https://github.com/goharbor/harbo ...

  10. springmvc面试问题

    1.讲下SpringMvc和Struts1,Struts2的比较的优势 性能上Struts1>SpringMvc>Struts2 开发速度上SpringMvc和Struts2差不多,比St ...