Javascript知识汇总------手写jq轮播图插件(2018-04-23 17:16)

<!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://files.cnblogs.com/files/iwzyuan/jquery.CarFigure.js

原文地址:https://www.cnblogs.com/iwzyuan/p/9019527.html

时间: 2024-11-29 11:05:01

Javascript知识汇总------手写jq轮播图插件(2018-04-23 17:16)的相关文章

自已动手写的轮播图插件,功能不断增加中,可以下载

前,平时总是使用别人的轮播图插件,这次决定自已写一个,功能越多越好.实际现起来,发现并不容易.先实现基本的功能,下两周要丰富起来. 图是别人的图,心是自已的心.直接上代码: 一:结构 <!-- carousel begin --><div class="carousel-wrap">    <div class="carousel-main-wrap">        <ul class="carousel-scr

jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> *{padding: 0;margin: 0;list-style-type: none;} .wrap{width: 520px;height: 280px;margin: 50px auto;} .ba

jq轮播图插件

/* * 使用说明  *    *   1:需要提供一个标签   *   2:lis:图片的个数 *   3:轮播图的大小 width ,height *   4:图片的地址imgs[0].carouselImg[0] 这是本人的地址, $('#mainCarousel').jdCarousel({lis:7,width:800,height:340,          imgSrc:[                 imgs[0].carouselImg[0],               

手写angular轮播图(手机端无缝版)

代码地址: http://files.cnblogs.com/files/fxnet/%E6%89%8B%E5%86%99angular%E8%BD%AE%E6%92%AD%E5%9B%BE%EF%BC%88%E6%89%8B%E6%9C%BA%E7%AB%AF%E6%97%A0%E7%BC%9D%E7%89%88%EF%BC%89.zip <html><head> <meta name="viewport" content="initial-s

用原生的javascript 实现一个无限滚动的轮播图

说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左右切换和前面的方法有所不同,前面是获取当前的索引值乘以-600px当做位移距离,现在是需要获取当前.inner的位置来加上或者减去-600来实现 下面来一步步的去实现轮播图: 首先是html <!DOCTYPE html> <html lang="en"> <

用jQuery写的轮播图

效果图: 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的,相对简单一点的吧. 这个是js代码,我先粘上去. <script src="../jquery-3.3.1.min.js"></script> <script> var index = 1; var newLeft = 0; var interval; var buttSpan = $(".butt").children(); function nextPage

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

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)

SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序.(另外切忌不要引入两次jquery.js,会把$的方法洗掉而导致失效的) http://www.superslide2.com/ 官网 http://www.superslide2.com/SuperSlide.2.1.2/jquery.SuperSlide.2.1.2.js jquery.Sup

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

Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一.基本的轮播图实现 HTML代码 1 <!-- 2 以下容器就是整个轮播图组件的整体, 3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 4 bootstrap.js