<!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. Java基础10：全面解读Java异常

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  2. 文本主题模型之非负矩阵分解(NMF)

    在文本主题模型之潜在语义索引(LSI)中,我们讲到LSI主题模型使用了奇异值分解,面临着高维度计算量太大的问题.这里我们就介绍另一种基于矩阵分解的主题模型:非负矩阵分解(NMF),它同样使用了矩阵分解 ...

  3. Asp.Net SignalR - 准备工作

    实时通讯 在做Web的时候经常会有客户端和服务端实时通讯的需求,比如即时聊天等.目前实时通讯有很多种规范和实现方式,但是每一个对浏览器的兼容性或者性能都不是很完美. 目前主流的解决方案有 WebSoc ...

  4. AJAX应用【股票案例、验证码校验】

    一.股票案例 我们要做的是股票的案例,它能够无刷新地更新股票的数据.当鼠标移动到具体的股票中,它会显示具体的信息. 我们首先来看一下要做出来的效果: 1.1服务器端分析 首先,从效果图我们可以看见很多 ...

  5. 痞子衡嵌入式：ARM Cortex-M文件那些事（4）- 可重定向文件(.o/.a)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式开发里的relocatable文件(object, library). 前三节课里,痞子衡都是在给大家介绍嵌入式开发中的input文 ...

  6. Python3.7 dataclass使用指南

    本文将带你走进python3.7的新特性dataclass,通过本文你将学会dataclass的使用并避免踏入某些陷阱. dataclass简介 dataclass的使用 定义一个dataclass ...

  7. Odd-e CSD Course Day 3

    Mocking 在提到Mocking時,其實有提到為什麼我們需要 Mocking from: Odd-e CSD course 可以透過上圖來了解這個概念,當我們需要用到 Mock 時,其實是因為我們 ...

  8. sql字符串包含单引号

    ad'min select  * from user where name ='ad''min'

  9. [Go] golang原子函数实现goroutine同步

    启动了两个goroutine,并完成一些工作.在各自循环的每次迭代之后,在goroutine 会使用LoadInt64 来检查shutdown 变量的值.这个函数会安全地返回shutdown 变量的一 ...

  10. python学习笔记(七)、异常

    在实际开发中,往往不会出现一个系统编写下来,没有出现任何一个bug.为处理这种会出现错误的地方,如除数为零的除法,python提供了非常强大的机制————异常处理机制. 1 异常 python使用异常 ...