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

　　

//代码如下

<!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. .NET Runtime at IP 791F7E06 (79140000) with exit code 80131506.

    事件類型: 錯誤 事件來源: .NET Runtime 事件類別目錄: 無 事件識別碼: 1023 日期: 2015/12/15 時間: 上午 10:18:52 使用者: N/A 電腦: KM-ERP ...

  2. linux 从一台机器复制文件到另一台linux机器上去

    1.功能说明scp就是security copy,用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下.scp传输数据用的是SSH协议,保证了数据传输的安全,其格式如下:scp 远程用户 ...

  3. Selenium 页面加载慢

    Selenium 页面加载慢 问题描述: 使用Selenium获取网页,发现webdriver.get方法会阻塞直到网页全部加载完成,官方提供的三种wait方法仅对网页的ajax有比较明显的效果.对于 ...

  4. 文件图标SVG

    ​<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink ...

  5. k种球若干，取n个球，输出所有取球方案 （模拟）

    有K种颜色的小球(K<=10),每种小球有若干个,总数小于100个. 现在有一个小盒子,能放N个小球(N<=8),现在要从这些小球里挑出N个小球,放满盒子. 想知道有哪些挑选方式.注:每种 ...

  6. HDU 5570：balls 期望。。。。。。。。。。。。。。。

    balls  Accepts: 19  Submissions: 55  Time Limit: 6000/3000 MS (Java/Others)  Memory Limit: 65536/655 ...

  7. 2月送书福利：ASP.NET Core开发实战

    大家都知道我有一个公众号“恰童鞋骚年”,在公众号2020年第一天发布的推文<2020年,请让我重新介绍我自己>中,我曾说到我会在2020年中每个月为所有关注“恰童鞋骚年”公众号的童鞋们送一 ...

  8. C++中函数访问数组的方式

    在书写C++代码时,往往为了令代码更加简洁高效.提高代码可读性,会对定义的函数有一些特殊的要求:比如不传递不必要的参数,以此来让函数的参数列表尽可能简短. 当一个函数需要访问一个数组元素时,出于上述原 ...

  9. 移动端禁止缩放<meta>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale= ...

  10. 设计模式课程 设计模式精讲 15-2 桥接模式Coding

    1 代码演练 1.1 代码演练1 1.2 代码演练2   1 代码演练 1.1 代码演练1 需求: 打印出从银行获取的账号类 优点: a 假如我只用用一个银行接口 去获取账号的内容,银行实现类要有定期 ...