<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 1200px;
margin: auto;
}
.CarFigure_container ul {
list-style: none;
}

.CarFigure_container {
position: relative;
width: 100%;
}
.CarFigure_outer {
position: relative;
width: 100%;
overflow: hidden;
}
.CarFigure_cont {
position: relative;
overflow: hidden;
left: 0;
transition: all 0.5s ease;
}
.CarFigure_cont li {
float: left;
box-sizing: border-box;
}
.CarFigure_cont li img {
width: 100%;
}
.CarFigure_pagation {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.CarFigure_pagation_item.active {
background: red!important;
}
.CarFigure_pagation .CarFigure_pagation_item {
display: inline-block;
width: 10px;
height: 10px;
background: cadetblue;
margin: 0 10px;
border-radius: 100%;
cursor: pointer;
}
.CarFigure_button .CarFigure_button_left,.CarFigure_button .CarFigure_button_right {
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
background: #000000;
border-radius: 100%;
overflow: hidden;
top: 0;
bottom: 0;
margin: auto;
color: #ffffff;
text-align: center;
font-size: 25px;
cursor: pointer;

}
.CarFigure_button_left {
left: -40px;
}
.CarFigure_button_right {
right: -40px;
}
</style>
</head>
<body>
<div id="box">
<div class="CarFigure_container">
<div class="CarFigure_outer">
<ul class="CarFigure_cont">
<li class="CarFigure_slider">
<img src="test.jpg">
</li>
<li class="CarFigure_slider">
<img src="test.jpg">
</li>

<li class="CarFigure_slider">
<img src="test.jpg">
</li>
<li class="CarFigure_slider">
<img src="test.jpg">
</li>
<li class="CarFigure_slider">
<img src="test.jpg">
</li>

<li class="CarFigure_slider">
<img src="test.jpg">
</li>
<li class="CarFigure_slider">
<img src="test.jpg">
</li>
</ul>
</div>
<div class="CarFigure_button"></div>
<div class="CarFigure_pagation"></div>
</div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.CarFigure.js"></script>
<script>
$(function (){
var myCarFigure = new CarFigure('.CarFigure_container');
myCarFigure.init({
space : 20,
size : 1
});
});
</script>
</html>

插件地址：https://blog-static.cnblogs.com/files/iwzyuan/jquery.CarFigure.js

jq轮播图插件—手写的更多相关文章

  1. 轮播图--JS手写

    轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...

  2. jq轮播图插件

    /* * 使用说明  *    *   1:需要提供一个标签   *   2:lis:图片的个数 *   3:轮播图的大小 width ,height *   4:图片的地址imgs[0].carou ...

  3. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  4. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  5. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  6. vue轮播图插件之vue-awesome-swiper

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...

  7. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  8. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  9. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

随机推荐

  1. 实现无缝兼容ajax/websocket网页应用和服务

    为了让用户体验更好,页面前端往往是通过ajax来进行数据处理:由于浏览器的设计原因每个域名下的连接有限,这样导致了同时进行ajax数据请求效率无法得到有效地提升,为了提高效率和传统HTTP协议上的限制 ...

  2. 外接程序 VMDebugger 未能加载或导致了异常 修复

    单击进入 是 visual studio   在 VMWARE 菜单栏上 单击 右键,出现如图,然后选择  自定义(C)...   打开 自定义 工具栏 里 选中 VMware 然后单击 删除 按钮 ...

  3. LocalDateTime反序列化，LocalDateTime格式化

    使用mybatis-plus的时候出现了LocalDateTime类(jdk8 中新出现的类 那么我在反序列化的时候出了问题. 我在springboot 2.1.3 中使用以下类结局问题) 用到了下面 ...

  4. java nginx等代理或网关转发请求后获取客户端的ip地址，原理

    在没有网关或者反向代理软件情况下,java里获取客户端ip地址的方法是request.getRemoteAddr() 先解释下http协议和TCP协议: 网页默认是进行http连接了,http协议即超 ...

  5. 【ASP.NET Core快速入门】（五）命令行配置、Json文件配置、Bind读取配置到C#实例、在Core Mvc中使用Options

    命令行配置 我们通过vs2017创建一个控制台项目CommandLineSample 可以看到现在项目以来的是dotnet core framework 我们需要吧asp.net core引用进来,我 ...

  6. docker 安装LAMP环境

    LAMP:Linux.Apache.MySQL.PHP docker hub 上会有配好的LAMP环境docker,部署到本地并运行起来 sudo docker pull linode/lamp 然后 ...

  7. uabntu18.04 安装mysql5.7

    原以为安装mysql就是一键的事情,结果还弄了有一阵子... 首先需要安装mysql的服务器.客户端和依赖, sudo apt-get install mysql-serversudo apt ins ...

  8. 【API知识】一种你可能没见过的Controller形式

    前言 这里分享一下我遇到的一个挺有意思的Controller形式,内容涉及@RequestMapping注解的原理. 实际案例 一.基本描述 项目甲中有多个模块,其中就有模块A和B.(这里的模块指的是 ...

  9. kubernetes进阶之一：简单例子

    kubernetes 从一个简单例子开始 参考 <kubernetes 权威指南>一节的 从一个简单例子开始,操作实录. 一.Java Web 应用结构 二.启动MySql服务 1.首先为 ...

  10. Mysql加锁过程详解（8）-理解innodb的锁(record,gap,Next-Key lock)

    Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...