<!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. android 垃圾回收机制

    1.垃圾收集算法的核心思想 java语言提供了自动的GC机制,系统会经常检查内存,采用对象引用计数的方式,将引用次数为0的对象回收.这样可以防止两个危险:(1)防止无用对象占用内存资源 (2)防止有用 ...

  2. android studio 调用c/c++工程

    首先新建一个工程 这个工程主要测试通过C程序返回一个字符串显示在界面

  3. C语言数组操作和指针操作谁更高效

    在上一篇博文  代码优化小技巧(持续更新......) 第三条关于数组和指针谁更高效, 意犹未尽, 决定单独拉出一篇来讲 1. 数组和指针操作对比 #include <stdio.h> i ...

  4. 计算机网络通信TCP/IP协议浅析 网络发展简介（二）

    本文对计算机网络通信的原理进行简单的介绍 首先从网络协议分层的概念进行介绍,然后对TCP.IP协议族进行了概念讲解,然后对操作系统关于通信抽象模型进行了简单介绍,最后简单描述了socket   分层的 ...

  5. 浅析MySQL 8忘记密码处理方式

    对MySQL有研究的读者,可能会发现MySQL更新很快,在安装方式上,MySQL提供了两种经典安装方式:解压式和一键式,虽然是两种安装方式,但我更提倡选择解压式安装,不仅快,还干净.在操作系统上,My ...

  6. Springboot 系列（三）Spring Boot 自动配置原理

    注意:本 Spring Boot 系列文章基于 Spring Boot 版本 v2.1.1.RELEASE 进行学习分析,版本不同可能会有细微差别. 前言 关于配置文件可以配置的内容,在 Spring ...

  7. __tostring()和__invoke()的用法

    PHP有很多内置的魔术方法,这里我们聊哈tostring和involk吧. __tostring()魔术方法 将一个对象当做一个字符串来使用时,会自动调用该方法,并且在该方法中,可以返回一定的字符串, ...

  8. 【java】随机生成6位的数字

    int radomInt = new Random().nextInt(999999); int radomInt2 =(int)((Math.random()*9+1)*100000); Syste ...

  9. Android Material Design控件使用（三）——CardView 卡片布局和SnackBar使用

    cardview 预览图 常用属性 属性名 说明 cardBackgroundColor 设置背景颜色 cardCornerRadius 设置圆角大小 cardElevation 设置z轴的阴影 ca ...

  10. Java原型模式

    原型模式 原型模式也称克隆模式.原型模式jian ming zhi yi,就是先创造出一个原型,然后通过类似于Java中的clone方法,对对象的拷贝,克隆类似于new,但是不同于new.new创造出 ...