一、swiper插件（内置css和js）
1、概述：
swiper是一个开源的免费的一个滚动的组件（他可以运用于轮播图 焦点图 滑动效果等）
- 内置的Demo（演示）
- 他里面包含对应的css （以class的形式）
- 包含对应的js文件 js进行操作（面向对象形式进行封装）
2、swiper中文网
swiper的版本很多（从2.0 到 8.0常用的）
5.0 版本
（1）html主体
<!-- class swiper-container 主体内容 -->
<div class="swiper-container">
<!-- 表示当前的轮播 -->
<div class="swiper-wrapper">
<!-- swiper-slide表示一个个的图 -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- 分页器 下面的点 -->
<div class="swiper-pagination"></div>
<!-- 左右切换的箭头 -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
（2）js主体
//传入选择器 及相关配置
new Swiper('.swiper-container', {
// autoplay:{
// delay: 3000,
// stopOnLastSlide: true, //移上对应的块 是否停止的动画
// disableOnInteraction: true,//禁用迭代
// }
autoplay: true, //开启自动播放 所有的全部使用默认值
pagination: { //分页器
el: '.swiper-pagination', //分页的点生成在哪
},
navigation: {//导航按钮
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
（3）move.js 文件
//获取样式的方法
function getStyle(ele, attr) {
return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] :
ele.currentStyle[attr]
}
//缓冲动画为true
function move(ele, target, isBuffer = true,callback) {
clearInterval(ele.timer) //清除之前的定时器影响
//针对于px为单位的 width,height,left,top
//opacity不需要px
//zIndex不需要动画
//获取target对象里面的所有的key
ele.timer = setInterval(() => {
var flag = true
for (let key in target) {
//获取当前位置
var current = parseFloat(getStyle(ele, key)) ?
parseFloat(getStyle(ele, key)) : 0
//定义步长和对应的目标位置
if(key == 'opacity'){
var step = target[key] - current > 0 ? 0.01 : -0.01
}else{
var step = target[key] - current > 0 ? 10 : -10
}
//定时器
if (key == 'zIndex') { //层级
ele.style[key] = target[key] //直接设置
} else {
if (isBuffer) { //如果是缓冲的
if (key == 'opacity') { //透明度
// 最小值 0.01
step = (target[key] - current) * 100 / 10 > 0 ?
Math.ceil((target[key] - current) * 100 / 10) / 100 : Math.floor((target[key] -
current) * 100 / 10) / 100
} else { //其他的
//控制步长的变化 离目标会越来越小 把步长和这个距离绑定
step = (target[key] - current) / 10 > 0 ?
Math.ceil((target[key] - current) / 10) : Math.floor((target[key] - current) /
10)
}
}
//没有到达设置为false
if (Math.abs(target[key] - current ) > Math.abs(step)) {
flag = false
}
//控制当前位置的变化
current += step
//给当前位置赋值
if (key != 'opacity') {
ele.style[key] = current + 'px'
} else {
ele.style[key] = current
}
}
}
if (flag) {
console.log(123);
clearInterval(ele.timer)
//如果你的回调是一个函数就执行
if(callback instanceof Function){
callback()
}
}
}, 20)
}
二、轮播图
（1）轮播图横向（纵向的直接把left改为top，width改为height就可以了）
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 520px;
/* overflow: hidden; */
position: relative;
border: 5px solid
margin: 100px auto;
}
.banner {
width: 800%;
height: 100%;
position: absolute;
}
.banner>li {
list-style: none;
float: left;
width: 600px;
height: 100%;
}
.banner>li img{
width: 100%;
height: 100%;
}
.banner .first {
background-color: red;
}
.banner>li:nth-of-type(2) {
background-color: orange;
}
.banner>li:nth-of-type(3) {
background-color: yellow;
}
.banner>li:nth-of-type(4) {
background-color: green;
}
.banner>li:nth-of-type(5) {
background-color: purple;
}
ol{
position: absolute;
z-index: 1;
bottom: 30px;
right: 50px;
}
ol>li{
list-style: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(255,255,255,0.8);
box-shadow: 0 0 2px
float: left;
}
.selected{
background-color: purple;
}
.box>div{
z-index: 99;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
background-color: rgba(255,255,255,0.8);
color: purple;
font-weight: bold;
top: 50%;
margin-top: -15px;
}
.pre{
left:0;
}
.next{
right:0;
}
</style>
</head>
<body>
<div class="box">
<!-- 移动的是这个ul -->
<ul class="banner">
<li class="first"><img src="./2.webp" alt=""></li>
<li><img src="./1.webp" alt=""></li>
<li><img src="./3.webp" alt=""></li>
<li><img src="./4.webp" alt=""></li>
<li><img src="./5.webp" alt=""></li>
</ul>
<div class="pre"><</div>
<div class="next">></div>
<!-- <ol>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol> -->
</div>
<!-- <script src="./move.min.js"></script> -->
<script src="./move.plus.js"></script>
<!-- <script src="./move.js"></script> -->
<script>
// 获取ul
var banner = document.querySelector('.banner')
// 获取li的宽度
var liWidth = banner.children[0].offsetWidth
// 记录一下原本的li个数
var length = banner.children.length
init(length)
// 获取焦点列表
var focuslis = document.querySelectorAll('ol>li')
// 给ul后面添加一个li
// 克隆第一个
var clone = banner.children[0].cloneNode(true)
banner.appendChild(clone)
// 定时器控制移动
var index = 0
var timer
var preBtn = document.querySelector('.pre')
var nextBtn = document.querySelector('.next')
// 调用对应的 方法
autoMove()
handlerFocusClick()
handlerMouseBox()
handlerChange()
function autoMove(){
var timer = setInterval(() => {
change()
}, 2000)
}
// 移动和切焦点的操作 isRight 是否往右 默认往右走
function change(isRight=true){
if(isRight){
index++
if (index == length + 1) {
// 强行设置对应的为第一个
banner.style.left = '0px'
// 控制对应的下标为0
index = 0
}
}else{
index--
// 如果到第一个应该切到最后一个
if(index==-1){
// 强行设置为最后一个
banner.style.left=length*-1*liWidth+'px'
index=length-1
}
}
setFocus(index)
// move('.banner').set('left',-liWidth*index+'px').end()//move.min.js
// move('.banner').to(-liWidth * index, 0).end()//move.min.js
move(banner,{left:-liWidth*index},true) //move.plus.js
//move(banner,-liWidth * index,true)//move.js
}
// 生成一个ol ol里面包含的里个数和对应的ul里面的里个数一样
function init(length){
var ol = document.createElement('ol')
// 根据对应的 个数生成
for(var i=0;i<length;i++){
if(i==0){
ol.innerHTML+=`<li class="selected"></li>`
}else{
ol.innerHTML+=`<li></li>`
}
}
// 添加进去
banner.parentElement.appendChild(ol)
}
// 设置对应的焦点
function setFocus(index){
if(index>length-1){
index=0
}
// 小于0的时候等于最大下标
if(index<0){
index=length-1
}
// 排他
// 先把所有的全部清除 再给自个儿设置
// 获取所有的ol里面的li
// var focuslis = document.querySelectorAll('ol>li')
Array.from(focuslis).forEach((li)=>{
li.className=''
})
focuslis[index].className = 'selected'
}
// 焦点点击事件
function handlerFocusClick(){
// 事件委托机制
focuslis[0].parentElement.onclick = function(e){
e=e||window.event
clearInterval(timer)
if(e.target.nodeName == 'LI'){
var i = Array.from(focuslis).findIndex((li)=>{
return li==e.target
})
// 移动到对应的某个位置
move(banner,{left:-liWidth*i},true)
// 切换焦点
setFocus(i)
将i赋值给index
index = i-1
autoMove()
}
}
}
// 移动到盒子上面的操作
function handlerMouseBox(){
// 获取对应的两个按钮
banner.parentElement.onmouseenter=()=>{
// 控制两个idv显示
nextBtn.style.display = 'block'
preBtn.style.display = 'block'
clearInterval(timer)
}
banner.parentElement.onmouseleave=()=>{
// 隐藏
nextBtn.style.display = 'none'
preBtn.style.display = 'none'
// 开始动画
autoMove()
}
}
focuslis[0].parentElement
// 左右切换的处理
function handlerChange(){
// 左边的事件
preBtn.onclick = function(){
change(false)
}
// 右边的事件
nextBtn.onclick = function(){
change()
}
}
</script>
</body>
</html>
（2）面向对象的横向轮播（纵向的直接把left改为top，width改为height就可以了）
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 520px;
overflow: hidden;
position: relative;
border: 5px solid
margin: 100px auto;
}
.banner {
width: 800%;
height: 100%;
position: absolute;
}
.banner>li {
list-style: none;
/* float: left; */
width: 600px;
height: 100%;
}
.banner>li img{
width: 100%;
height: 100%;
}
.banner .first {
background-color: red;
}
.banner>li:nth-of-type(2) {
background-color: orange;
}
.banner>li:nth-of-type(3) {
background-color: yellow;
}
.banner>li:nth-of-type(4) {
background-color: green;
}
.banner>li:nth-of-type(5) {
background-color: purple;
}
ol{
position: absolute;
z-index: 1;
bottom: 30px;
right: 50px;
}
ol>li{
list-style: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(255,255,255,0.8);
box-shadow: 0 0 2px
/* float: left; */
}
.selected{
background-color: purple;
}
.box>div{
z-index: 99;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
background-color: rgba(255,255,255,0.8);
color: purple;
font-weight: bold;
top: 50%;
margin-top: -15px;
}
.pre{
left:0;
}
.next{
right:0;
}
</style>
</head>
<body>
<div class="box">
<!-- 移动的是这个ul -->
<ul class="banner">
<li class="first"><img src="./2.webp" alt=""></li>
<li><img src="./1.webp" alt=""></li>
<li><img src="./3.webp" alt=""></li>
<li><img src="./4.webp" alt=""></li>
<li><img src="./5.webp" alt=""></li>
<li><img src="./6.webp" alt=""></li>
<li><img src="./7.webp" alt=""></li>
</ul>
<div class="pre"><</div>
<div class="next">></div>
<!-- <ol>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol> -->
</div>
<!-- <script src="./move.min.js"></script> -->
<script src="./move.plus.js"></script>
<!-- <script src="./move.js"></script> -->
<script>
class Rotation{
constructor(element){
this.banner = element.querySelector('.banner')
this.length = this.banner.children.length
this.element = element
this.preBtn = element.querySelector('.pre')
this.nextBtn = element.querySelector('.next')
this.focuslis =this.init()
this.index = 0
this.autoMove()
// 调用对应的事件监听
this.handlerChange()
this.handlerFocusClick()
this.handlerMouseBox()
}
init(){
let ol = document.createElement('ol')
// 根据对应的 个数生成
for(var i=0;i<this.length;i++){
if(i==0){
ol.innerHTML+=`<li class="selected"></li>`
}else{
ol.innerHTML+=`<li></li>`
}
}
// 添加进去
this.element.appendChild(ol)
// 克隆第一个
var clone = this.banner.children[0].cloneNode(true)
this.banner.appendChild(clone)
return ol.children
}
changePosition(isRight=true){
if(isRight){
this.index++
if (this.index == this.banner.children.length) {
// 强行设置对应的为第一个
this.banner.style.top = '0px'
// 控制对应的下标为0
this.index = 0
}
}else{
this.index--
// 如果到第一个应该切到最后一个
if(this.index==-1){
// 强行设置为最后一个
this.banner.style.top=this.length*-1*this.element.clientHeight+'px'
this.index=this.length-1
}
}
this.setFocus(this.index)
// move('.banner').set('left',-liWidth*index+'px').end()//move.min.js
// move('.banner').to(-liWidth * index, 0).end()//move.min.js
move(this.banner,{
top:-1*(this.element.clientHeight-1)*this.index
},true) //move.plus.js
//move(banner,-liWidth * index,true)//move.js
}
autoMove(){
this.timer = setInterval(() => {
this.changePosition()
}, 2000)
}
setFocus(i){
if(i>this.length-1){
i=0
}
// 小于0的时候等于最大下标
if(i<0){
i=this.length-1
}
// 排他
// 先把所有的全部清除 再给自个儿设置
// 获取所有的ol里面的li
// var focuslis = document.querySelectorAll('ol>li')
Array.from(this.focuslis).forEach((li)=>{
li.className=''
})
this.focuslis[i].className = 'selected'
}
handlerFocusClick(){
// 事件委托机制
this.focuslis[0].parentElement.onclick = (e)=>{
e=e||window.event
clearInterval(this.timer)
if(e.target.nodeName == 'LI'){
var i = Array.from(this.focuslis).findIndex((li)=>{
return li==e.target
})
// 移动到对应的某个位置
move(this.banner,{
left:-this.element.clientTop*i
},true)
this.index = i
// 切换焦点
this.setFocus(this.index)
// 将i赋值给index
// this.autoMove()
}
}
}
handlerMouseBox(){
// 获取对应的两个按钮
this.banner.parentElement.onmouseenter=()=>{
// 控制两个idv显示
this.nextBtn.style.display = 'block'
this.preBtn.style.display = 'block'
clearInterval(this.timer)
}
this.banner.parentElement.onmouseleave=()=>{
// 隐藏
this.nextBtn.style.display = 'none'
this.preBtn.style.display = 'none'
// 开始动画
this.autoMove()
}
}
handlerChange(){
// 左边的事件
this.preBtn.onclick = ()=>{
this.changePosition(false)
}
// 右边的事件
this.nextBtn.onclick = ()=>{
this.changePosition()
}
}
}
var box = document.querySelector('.box')
new Rotation(box)
</script>
</body>
</html>
三、放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 450px;
height: 450px;
border: 1px solid
position: relative;
float: left;
}
.move {
position: absolute;
left: 0;
top: 0;
background-color: rgba(255, 255, 0, 0.8);
}
.bigbox {
width: 540px;
height: 540px;
position: relative;
float: left;
overflow: hidden;
border: 1px solid
}
.bigbox>img {
position: absolute;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div class="box">
<img src="https://img14.360buyimg.com/n1/s450x450_jfs/t1/143083/39/28731/78733/62fb029fE1aa8dfe1/13379e56a26323ee.jpg"
alt="">
<div class="move"></div>
</div>
<div class="bigbox">
<img src="https://img14.360buyimg.com//n0/jfs/t1/143083/39/28731/78733/62fb029fE1aa8dfe1/13379e56a26323ee.jpg"
alt="">
</div>
<script>
class Magnifier {
constructor(smallBox, bigBox) {
this.smallBox = smallBox
this.bigBox = bigBox
this.move = smallBox.querySelector('.move')
this.bigImg = bigBox.children[0]
this.init()
this.handlerMouse()
}
init() {
//计算对应的move这个盒子的宽高
// 大的比大的等于小的比小的 bigImg/bigBox = box/move ==> bigImg/box == bigBox/move
this.move.style.width = this.smallBox.clientWidth / (this.bigImg.clientWidth / this.bigBox
.clientWidth) + 'px'
this.move.style.height = this.smallBox.clientHeight / (this.bigImg.clientHeight / this.bigBox
.clientHeight) + 'px'
//先需要隐藏
this.move.style.display = 'none'
this.bigBox.style.display = 'none'
}
handlerMouse() {
//移入移出
this.smallBox.onmouseenter = () => {
this.move.style.display = 'block'
this.bigBox.style.display = 'block'
}
this.smallBox.onmouseleave = () => {
this.move.style.display = 'none'
this.bigBox.style.display = 'none'
}
//移动
this.smallBox.onmousemove = ({
pageX,
pageY
}) => {
//获取鼠标在smallbox里面位置
let currentX = pageX - this.smallBox.offsetLeft
let currentY = pageY - this.smallBox.offsetTop
//中心点位置
let centerPoint = {
x: this.smallBox.clientWidth / 2,
y: this.smallBox.clientHeight / 2
}
//移动的位置
let targetPoint = {
x: currentX - centerPoint.x,
y: currentY - centerPoint.y
}
//边界判断
if(targetPoint.x<0){
targetPoint.x = 0
}
if(targetPoint.y<0){
targetPoint.y = 0
}
//最大值判断
let maxPoint = {
x: this.smallBox.clientWidth - this.move.offsetWidth,
y: this.smallBox.clientHeight - this.move.offsetHeight
}
if(targetPoint.x > maxPoint.x){
targetPoint.x = maxPoint.x
}
if(targetPoint.y > maxPoint.y){
targetPoint.y = maxPoint.y
}
//设置对应的位置
this.move.style.left = targetPoint.x + 'px'
this.move.style.top = targetPoint.y + 'px'
//还要设置大盒子里面图片的位置
this.bigImg.style.left = -targetPoint.x * this.bigImg.clientWidth / this.smallBox.clientWidth + 'px'
this.bigImg.style.top = -targetPoint.y * this.bigImg.clientHeight / this.smallBox.clientHeight + 'px'
}
}
}
var small = document.querySelector('.box')
var big = document.querySelector('.bigbox')
new Magnifier(small, big)
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律