自己定义jquery插件轮播图
轮播图-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插件轮播图的更多相关文章
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- Jquery 实现轮播图
jq 轮播图 function banner_show(){ var left_btn = $("#banner_tag_left"); //获取左侧单击按钮 var right_ ...
- jQuery封装轮播图插件
// 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...
- jquery, js轮播图插件Swiper3
轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...
- JQuery实现轮播图及其原理
源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- jquery优化轮播图2
继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
随机推荐
- html 手机端适配不同手机高度 ，把内容居中显示
手机端适配不同手机高度 ,把内容居中显示,可以将div.img.section.span.p等等元素,设置 top:50%; margin-top:xxvw; 这样可以保证主题内容居中显示.
- 1903021126 申文骏 Java 第七周作业 客户类测试
项目 内容 课程班级博客链接 19级信计班(本) 作业要求链接 Java 第七周作业 博客名称 1903021126 申文骏 Java 第七周作业 客户类测试 要求 每道题要有题目,代码(使 ...
- Go语言中密码加密校验
使用go自带的库bcrypt bcrypt是不可逆的加密算法,无法通过解密密文得到明文. bcrypt和其他对称或非对称加密方式不同的是,不是直接解密得到明文,也不是二次加密比较密文,而是把明文和存储 ...
- css/js使用小技巧记录
1.白底小图标换色 .iconBox { position: relative; width: 19px; height: 19px; overflow: hidden; // 隐藏原本颜色的图片 . ...
- 时间格式转换成指定格式(Vue)
1 /** 2 * Parse the time to string 3 * @param {(Object|string|number)} time 4 * @param {string} cFor ...
- Python 去掉文本内容中的\xa0字符
爬取网页时,不可避免会遇到\xa0字符串,就会发现,正则re.sub(r'\xa0', '')和字符串的replace都不管用. 通常地,我们所用的空格的ASCII码是 \x20 ,是在标准ASCII ...
- ubuntu安装xface
Gnome.KDE.XFACE桌面环境安装和卸载 出自Ubuntu中文 安装桌面环境 (一)在终端中运行安装: 1.安装XFACE: sudo apt-get install xubuntu-desk ...
- Mysql的MVCC与幻读
以下特殊情况在可重复读时会产生幻读: 1.a事务先select,b事务insert确实会加一个gap锁,但是如果b事务commit,这个gap锁就会释放(释放后a事务可以随意操作), 2.a事务再se ...
- Vue+SSM+Element-Ui实现前后端分离(1)
前言:最近学习vue,就突发奇想,小菜鸟的我是时候锻炼锻炼自己.闲话不说,整起 <-_-> 整体规划:先搭建前端,接下来后端,最后整合. 一.创建vue项目 1.安装nodejs( 傻瓜式 ...
- HashMap记录
1.HashMap接收null的键值 2.HashMap是非synchronized的 3.HashMap使用hashCode找到bucket的位置.bucket中存储的是键和值 4.当HashCod ...