大佬教程收集整理的这篇文章主要介绍了自己定义jquery插件轮播图，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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;@H_996_92@margin: 0;list-style: none;} .Box {width: 400px;height: 260px;@H_996_92@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) }) // 封装动画的@L_489_42@ 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插件轮播图全部内容，希望文章能够帮你解决自己定义jquery插件轮播图所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。