轮播图-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. Jmeter前置处理器和后置处理器的使用

    一.JMETER基本概念  1. 测试计划:顶级菜单,代表一个测试计划: 2. 线程组:代表一个要测试的场景(各种相关的交易集合),对于性能测试来说可以指定多少个用户完成这个场景的内容,对于自动化测试 ...

  2. Openpyxl一些简单的用法

    这个代码是需要自己先建立一个excel.然后导入数据 from openpyxl import load_workbook #按照一个格子输入进去 workbook = load_workbook(r ...

  3. node后台项目所需中间件梳理

    0.nodemon 全局工具,监听项目文件变动,并自动重启项目 一.node内置模块 1.fs fs.readFile()  读取指定文件中的内容fs.writeFile()  向指定的文件中写入内容 ...

  4. 十大经典排序之堆排序（C++实现）

    堆排序 通过将无序表转化为堆,可以直接找到表中最大值或者最小值,然后将其提取出来,令剩余的记录再重建一个堆, 取出次大值或者次小值,如此反复执行就可以得到一个有序序列,此过程为堆排序. 思路: 1.创 ...

  5. Ubuntu常用环境配置

    gcc sudo apt-get install build-essential update-alternatives 管理python环境 # 添加版本 # update-alternatives ...

  6. javaheima14

    Java 日志框架 日志框架的概述 记录程序运行过程中的信息,并可以进行永久存储 以前记录日志的方式--输出语句 弊端 信息只能展示在控制台 不能将其记录到其他位置(文件,数据库) 想取消记录的信息需 ...

  7. SpringBoot+MybatisPlus 多数据源问题

    SpringBoot+Mybatis 多数据源报错 使用了2个数据源 @Bean("dataSource") @ConfigurationProperties(prefix = & ...

  8. 剑指Offer2---------替换空格

    题目描述 请实现一个函数,将一个字符串中的每个空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy.   重点: ...

  9. This will upgrade your R installation.

    sudo add-apt-repository ppa:marutter/rrutter sudo apt update sudo apt full-upgrade

  10. 第一天1h

    //摄氏度和华氏度之间的换算//20211120//ZhangWenjing#include<stdio.h>int main(void){ int f = 0; int c = 0; s ...