<!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. Intent简介-Android开发

    一.Intent介绍: Intent的中文意思是“意图,意向”,在Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述 ...

  2. MySQL使用过程中的报错处理（持续更新）

    一.数据库初始化 1.Percona的MySQL 5.6.20版本数据库初始化 初始化命令(MySQL 5.6版本不适用mysqld命令进行初始化) ./scripts/mysql_install_d ...

  3. ES6躬行记（14）——函数

    在前面的章节中,已陆陆续续介绍了ES6为改良函数而引入的几个新特性,本章将会继续讲解ES6对函数的其余改进,包括默认参数.元属性.块级函数和箭头函数等. 一.默认参数 在ES5时代,只能在函数体中定义 ...

  4. Kubernetes 弹性伸缩全场景解析 （四）- 让核心组件充满弹性

    前言 在本系列的前三篇中,我们介绍了弹性伸缩的整体布局以及HPA的一些原理,HPA的部分还遗留了一些内容需要进行详细解析.在准备这部分内容的期间,会穿插几篇弹性伸缩组件的最佳实践.今天我们要讲解的是 ...

  5. QQ音乐的动效歌词是如何实践的？

    本文由云+社区发表 作者:QQ音乐技术团队 一. 背景 1. 现状 歌词浏览已经成为音乐app的标配,展示和动画效果也基本上大同小异,主要是单行的逐字染色的卡拉OK效果和多行的滚动效果.当然,我们也不 ...

  6. vm12 安装ubuntu15.10详细图文教程 虚拟机安装ubuntu安装 ubuntu更新软件 ubuntu一直卡在下载语言怎么办?

    1,准备工作-ubuntu下载 ubuntu官网下载 如何官网下载ubuntu http://www.ubuntu.com/download/ 2,打开虚拟机 虚拟机安装ubuntu15.10 虚拟机 ...

  7. 痞子衡嵌入式：飞思卡尔i.MX RT系列MCU特性介绍（3）- 命名规则

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的命名规则. 打开任何一款i.MX RT系列芯片的Data Sheet均可找到如下命名规则表,以i.MX ...

  8. 痞子衡嵌入式：ARM Cortex-M调试那些事（1）- 4线协议标准(JTAG)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式调试里的接口标准JTAG. 在结束<ARM Cortex-M文件那些事>系列文章之后,痞子衡休整了一小段时间,但是讲课的 ...

  9. [Luogu4705] 玩游戏

    Description 给定两个长度分别为 \(n\) 和 \(m\) 的序列 \(a\) 和 \(b\).要从这两个序列中分别随机一个数,设为 \(a_x,b_y\),定义该次游戏的 \(k\) 次 ...

  10. 学JAVA的第二天，静态网站制作，脑阔一点疼

    先从下载apache-tomcat-9.0.17开始 在下边这个网站下载,下边一步步来 下面删除的这些是暂时用不上的,先吧它删除了,因为会拖慢启动速度 下边把ROOT里边除WEB-INF外的全不删除了 ...