- lang="en">
- charset="UTF-8">
- name="viewport" content="width=device-width, initial-scale=1.0">
- http-equiv="X-UA-Compatible" content="ie=edge">
轮播图
- * {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;}
- class="box banner1">
- class="items">
- src="img/1.jpg" alt="">
- src="img/2.jpg" alt="">
- src="img/3.jpg" alt="">
- src="img/4.jpg" alt="">
- src="img/5.jpg" alt="">
- src="img/6.jpg" alt="">
- class="controls">
- class="prev">
←
class="next">
→
- class="points">
- src="jquery.js">
- src="jquery.banner.js">
- $('.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 -- 动画时长
- })
轮播图 - 插件
- ;(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('')
- }
- 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);
来源: http://www.bubuko.com/infodetail-3211924.html