轮播图-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.lengthconsole.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 = nullif (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);

转载于:https://www.cnblogs.com/hy96/p/11581834.html

自己定义jquery插件轮播图相关推荐

ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法在页面中引入jquer ...
基于JQuery 编写轮播图插件
基于JQuery 编写轮播图插件不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧使用需要准备(往下滑动会看到): ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
网页直播源码，JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
前端内好用插件轮播图
前端内好用插件&&轮播图文章目录前端内好用插件&&轮播图一.js辅助插件 (1)flexible适配(移动端和pc端兼容) (2)fastclick插件(解决移动 ...
jQuery实现轮播图（无缝轮播，附效果图），代码有详解。
jQuery实现轮播图这里用了一些有颜色的div块当做图片,复制之后可以直接用,有需要的话再根据自己的需求替换就可以了. 功能: (1)左右无缝轮播. (2)鼠标移上去会停止,移走继续动. (3)点 ...
Jquery实现轮播图效果
Jquery实现轮播图效果首先是html <div id="box"><img src="./day6/am/轮播图/img/1.jpg" ...
jQuery 实现轮播图
jQuery 轮播图预览图: 使用jquery实现轮播图要比用原生js简单许多,代码也少很多. 思路 1.外层盒子设置为一个图片的大小 2.内层盒子为所有图片的宽度,图片左浮动 3.外层盒子设置ov ...
jQuery百叶窗轮播图插件
下载地址这款jQuery图片轮播插件提供了多种百叶窗风格的图片切换方式,每一种百叶窗风格都是随机产生的.另外这款jQuery多百叶窗风格切换焦点图插件支持悬浮文字描述,同时也支持自动播放.相信它可以 ...

自己定义jquery插件轮播图

轮播图-html

轮播图-插件

自己定义jquery插件轮播图相关推荐

最新文章

热门文章