当前位置 : 主页 > 网页制作 > JQuery >

自己定义jquery插件轮播图

来源:互联网 收集:自由互联 发布时间:2021-06-15
轮播图-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

轮播图-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);
网友评论