<!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. mybatis中的缓存问题

    关于mybatis基础我们前面几篇博客已经介绍了很多了,今天我们来说一个简单的问题,那就是mybatis中的缓存问题.mybatis本身对缓存提供了支持,但是如果我们没有进行任何配置,那么默认情况下系 ...

  2. 记一次Eureka启动报Failed to start bean 'eurekaAutoServiceRegistration' 。。。错误

    在一次项目迁移的过程中,新导入了两个依赖,结果项目启动就报错,如下: 主要原因是:Failed to start bean 'eurekaAutoServiceRegistration'; neste ...

  3. 基于Dockerfile镜像制作的基本操作

    一.使用Dockerfile制作镜像 前面的博客中已经介绍了如何基于容器制作镜像,此方法的原理是使用一个正在运行的容器,根据生产所需进行配置更改等操作后,使其满足生产环境,再将这个容器打包制作为镜像, ...

  4. .Net语言 APP开发平台——Smobiler学习日志：如何快速实现手机上的资源上传功能

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的“Smobil ...

  5. VSTO中Word的查找方式

    VSTO中Word的查找方式 前言 使用C#在VSTO开发Word插件的过程,经常需要对文档中的内容进行查找和替换.在Word中进行文本的查找替换,和一般对纯文本的查找替换却不太一样.因为Word文档 ...

  6. Web.config中customErrors异常信息配置

    开发工具:Visual Studio 2017 15.7.5 开发平台:Windows 10 新建WebApi项目,Web.config配置文件中,system.web下级节点中默认没有customE ...

  7. python学习笔记(十 一)、GUI图形用户界面

    python图形用户界面就是包含按钮.输入框.选择框等组件的窗口.主要依赖与工具包进行代码编写.python GUI工具包并发互斥的,你可以选择多个工具包进行安装,有极大选择空间.每个工具包都有不同用 ...

  8. 环境搭建 - Tomcat（Windows）

    Tomcat环境搭建 本文以Windows7下搭建tomcat-8.5.15为示例 下载tomcat压缩包 网址:Tomcat 非C盘根目录新建文件夹:Tomcat D:\tomcat 将tomcat ...

  9. 程序员50题（JS版本）（四）

    程序16:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字.例如2+22+222+2222+22222(此时共有5个数相加),几个数相加有键盘控制 var s=0; var num ...

  10. bootstrap思考一

    bootstrap是一种热门的Web前端流行框架,如果要兼容PC端.手机端和响应式布局,那他一定是我的首选.bootstrap内容很多,功能强大,其中最好入门也是很重要的就是他的栅格系统.他有四个典型 ...