轮播图-html

<!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>轮播图</title>

    <style>

        * {padding: 0;margin: 0;list-style: none;}

        .box {width: 400px;height: 260px;margin: 50px auto;border: 1px solid #f66;position: relative;}

        .box .items {width: 400px;height: 260px;position: relative;}

        .box .items img { position: absolute; top:0;left: 0;display: none;}

        .box .items img:nth-child(1) {display: block;}

        .box .controls .prev{width: 50px;height: 50px; position: absolute;left:10px; top: 50%;transform: translateY(-50%)}

        .box .controls .next{width: 50px;height: 50px; position: absolute;right:10px; top: 50%;transform: translateY(-50%)}

        .points { position: absolute;bottom:20px;left: 50%;transform: translateX(-50%);}

        .points li {width: 10px;display: inline-block;height: 10px;border-radius: 50%;background-color: #fff;}

        .points li.active { background-color: #f66;}

    </style>

</head>

<body>

    <div class="box banner1">

        <div class="items">

            <img src="img/1.jpg" alt="">

            <img src="img/2.jpg" alt="">

            <img src="img/3.jpg" alt="">

            <img src="img/4.jpg" alt="">

            <img src="img/5.jpg" alt="">

            <img src="img/6.jpg" alt="">

        </div>

        <div class="controls">

            <button class="prev">←</button>

            <button class="next">→</button>

        </div>

        <ul class="points"></ul>

    </div>

</body>

<script src="jquery.js"></script>

<script src="jquery.banner.js"></script>

<script>

   $('.banner1').fade({

       box:$(".box"),

       imgs: $('.banner1').find('.items').find('img'), // 必选

       prev: $('.banner1').find('.prev'), // 必选，上一页按钮

       next: $('.banner1').find('.next'), // 必选, 下一页按钮

       points: $('.banner1').find('.points'), // 可选，小圆点

       autoplay: true,  // 可选, 默认为true

       delay: 4000, // 可选，默认为3000

       current: 0, // 可选， 默认是第0张图片显示

       duration: 500 // 可选， 默认为300 -- 动画时长

   })

</script>

</html>

轮播图-插件

;(function ($) {

    'use strict';

    $.fn.extend({

        fade (options) {

            var obj = {} // 字面量对象

            // console.log(options)

            // console.log('轮播图')

            // 1、通过解构赋值获取轮播图的参数

            var { imgs, prev, next, points, autoplay, delay, current, duration } = options

            // 2、为可选参数设置默认值

            autoplay = autoplay === false ? false : true // 自动轮播

            delay = delay || 3000 // 自动轮播的时长

            current = current || 0 // 默认显示的是哪一个图片

            duration = duration || 300 // 每次动画时长

            // 3、获取图片的个数

            var len = imgs.length

            console.log(len)

            // 4、默认的图片显示

            ani(current)

            // 5、点击下一页

            next.on('click', function () {

                current++

                if (current === len) {

                    current = 0

                }

                ani(current)

            })

            // 6、点击上一页

            prev.on('click', function () {

                current--

                if (current === -1) {

                    current = len - 1

                }

                ani(current)

            })

            // 7、显示小圆点 并且给默认的图片对应的小圆点加样式

            for (var i = 0; i < len; i++) {

                points.append('<li></li>')

            }

            points.find('li').eq(current).addClass('active').siblings().removeClass('active')

            // 8、自动轮播

            var timer = null

            if (autoplay) {

                timer = setInterval(function () {

                    next.click()

                }, delay)

            }

            // 9、鼠标滑过事件 -- 取消自动轮播，鼠标移除，重新自动轮播

            console.log(this)

            if (autoplay) {

                this.hover(function () {

                    clearInterval(timer)

                }, function () {

                    timer = setInterval(function () {

                        next.click()

                    }, delay)

                })

            }

            // 10、小圆点滑过切换

            points.find('li').on('mouseenter', function () {

                current = $(this).index()

                ani(current)

            })

            // 封装动画的函数

            function ani (current) {

                points.find('li').eq(current).addClass('active').siblings().removeClass('active')

                imgs.eq(current).stop().fadeIn(duration).siblings().stop().fadeOut(duration)

            }

        }

    })

})(jQuery);

自己定义jquery插件轮播图的更多相关文章

  1. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  2. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  3. Jquery 实现轮播图

    jq 轮播图 function banner_show(){ var left_btn = $("#banner_tag_left"); //获取左侧单击按钮 var right_ ...

  4. jQuery封装轮播图插件

    // 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...

  5. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  6. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  7. jQuery无缝轮播图思路详解-唯品会

    效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...

  8. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  9. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  10. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. C#TimeSpan时间差转换成分钟和秒数

    public Form1() { InitializeComponent(); aa = DateTime.Now.ToString(); } string aa; private void butt ...

  2. 记录一次 网关负载 流量不均匀 cpu使用率不均衡问题

    网关负载  流量不均匀  cpu使用率不均衡问题??? 1.压力机访问源  有多少ip 有10个? 还是20个? 就是样本源不多的话,负载上hash的话  就你可能不是真实的访问需求 ,你客户端就那么 ...

  3. servlet - 从本地下载图片

    import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet. ...

  4. grafana配置邮箱告警

    [root@localhost grafana]# cd /etc/grafana/ [root@localhost grafana]# vim grafana.ini 注意:发件邮件要开启smtp服 ...

  5. 创建一个Openpyxl

    from openpyxl import Workbook wb = Workbook(r'C:\Users\yjiang3\Desktop\23.xlsx') ws = wb.active from ...

  6. 2019 CSP J/S第2轮 视频与题解

    CSP入门组和提高组第二轮题解 转自网络

  7. Error:fatal: no such path /web/controller/XXXController.java in HEAD. 报错！

    现象: Error:fatal: no such path /test/XXXController.java in HEAD. 报错! 原因: 重命名文件夹大小写问题: 解决办法: git mv Te ...

  8. Spring Boot中的JSON技术

    Spring Boot中的JSON技术 平日里在项目中处理JSON一般用的都是阿里巴巴的Fastjson,后来发现使用Spring Boot内置的Jackson来完成JSON的序列化和反序列化操作也挺 ...

  9. re相关正则表达式（re.sub、re.I 、re.S、re.M）

    re.I 表示忽略大小写 re.S 表示全文匹配 re.M 表示全文拼配行尾段位的字符或者数字,影响^和$ re.sub 表示替换 使用方法: re.sub(pattern, repl, string ...

  10. 区分 PaaS、IaaS 、SaaS