源生代码封装轮播效果

主要实现自动轮播功能、定位功能、上一页下一页功能。

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>轮播</title><link rel="stylesheet" href="./css/swiper.css">
</head><body><div class="swiper-wraper" id="swiperroot"><div class="swiper"><ul><li><img src="./image/img01.jpg" alt="img01"></li><li><img src="./image/img02.jpg" alt="img02"></li><li><img src="./image/img03.jpg" alt="img03"></li><li><img src="./image/img05.jpg" alt="img05"></li></ul><a class="prev" href="javascript:void(0)">&lt;</a><a class="next" href="javascript:void(0)">&gt;</a><!-- 指示器 --><ul class="pointer-wraper"></ul></div></div><script src="./js/swiper.js"></script><script>let swiper = new Swiper('#swiperroot')swiper.init()swiper.autoPlay()</script>
</body></html>

CSS代码

* {padding: 0;margin: 0;
}ul,
li {list-style: none;
}
a{text-decoration: none;
}
.swiper-wraper {position: relative;width: 800px;height: 400px;margin: 100px auto;
}.swiper-wraper .swiper {position: absolute;width: 100%;height: 100%;/* border: 10px solid rgb(15, 15, 15); */overflow: hidden;
}.swiper-wraper .swiper ul {position: absolute;left: -800px;display: flex;
}.swiper-wraper .swiper ul li {width: 100%;height: 100%;text-align: center;line-height: 200px;font-size: 28px;
}
.swiper-wraper .swiper ul li img{width: 800px;height: 400px;
}/* 导航 */
.swiper-wraper .swiper .prev{display: inline-block;position: absolute;top: 50%;transform: translateY(-50%);width: 30px;height: 80px;line-height: 80px;background-color: rgba(0, 0, 0,.6);text-align: center;color: white;font-size: 28px;
}.swiper-wraper .swiper .next{display: inline-block;position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 30px;height: 80px;line-height: 80px;background-color: rgba(0, 0, 0,.6);text-align: center;color: white;font-size: 28px;
}.swiper-wraper .swiper .pointer-wraper{position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);width: 100px;display: flex;justify-content: space-between;
}
.swiper-wraper .swiper .pointer-wraper li{width: 10px;height: 10px;border-radius: 50%;background-color: white;
}.swiper-wraper .swiper .pointer-wraper .active{background-color: red;
}

JS代码（采用类对象）

class Swiper {constructor(id) {this.rootEle = document.querySelector(id)this.ulEle = this.rootEle.querySelector('ul') //轮播ulthis.swiper = this.rootEle.querySelector('.swiper') //相框this.offset = parseInt(window.getComputedStyle(this.swiper).width) //相框宽及偏移量this.count = this.ulEle.children.length //轮播元素个数, 5this.nextEle = this.rootEle.querySelector('.next') // 下一张this.prevEle = this.rootEle.querySelector('.prev') //上一张this.isMove = false //轮播图是否在运动this.index = 0 //指示器索号this.num = this.ulEle.children.length}/*** 初始化动态生成节点*/init() {//1. 克隆第一张轮播图片放到最后面let firstEle = this.ulEle.firstElementChild.cloneNode(true)//2. 克隆最后一张轮播图放到最前面let lastEle = this.ulEle.lastElementChild.cloneNode(true)//3. 父元素.appendChild(子元素)this.ulEle.appendChild(firstEle)//4. 父元素.insertBefore(子元素,新元素)this.ulEle.insertBefore(lastEle, this.ulEle.firstElementChild)//5. 创建指示器let pointerEle = this.rootEle.querySelector('.pointer-wraper')for (let i = 0; i < this.count; i++) {let liEle = document.createElement('li') //<li class="active"></li>if (i == 0) {liEle.className = 'active'}pointerEle.appendChild(liEle)}this.count = this.ulEle.children.length //轮播元素个数this.pointerEles = this.rootEle.querySelectorAll('.pointer-wraper>li')this.onNextPrev()this.onPointer()}/*** 自动轮播*/autoPlay() {setInterval(() => {//调用运动函数movethis.onNext()}, 2000)}/*** 上一张和下一张事件绑定*/onNextPrev() {this.nextEle.onclick = () => this.onNext()this.prevEle.onclick = () => this.onPrev()}/*** 下一张*/onNext() {//判断轮播是否在运动，没有运动时执行里面代码if (this.isMove == false) {//轮播图运行this.move(this.ulEle, -this.offset)//改变指示器序号if (++this.index > this.num - 1) {this.index = 0}this.setAtive(this.index) //设置指示器效果}}/*** 上一张*/onPrev() {if (this.isMove == false) {this.move(this.ulEle, this.offset)if (--this.index < 0) {this.index = this.num - 1}this.setAtive(this.index)}}/*** 清除所有指示器效果*/setAtive(index) {//清除所有指示器效果for (let i = 0; i < this.pointerEles.length; i++) {this.pointerEles[i].classList.remove('active')}//设置当前指示器效果this.pointerEles[index].classList.add('active')}/*** 指示器选中效果*/onPointer() {//绑定指示器点击事件for (let i = 0; i < this.pointerEles.length; i++) {this.pointerEles[i].onclick = () => {if (this.isMove == false) {// i表示:当前点击的指示器序号// _this.index表示：原来指示器序号，如果开启自动轮播，会动态变化let mIndex = i - this.index //计算差值,this.index = i //同步当前点击的指示器序号给外面的indexthis.setAtive(i) //设置指示器效果//轮播图同步运动this.move(this.ulEle, -this.offset * mIndex)}}}}move(ele, _offset) {this.isMove = true //开始运动//设置元素初始位置ele.style.left = window.getComputedStyle(ele).leftlet width = Math.abs(_offset)let count = this.countlet offset = _offset //移动的距离let goal = parseInt(ele.style.left) + offset //目标位置let rate = 20 //移动速度let time = 1000 //移动总时间let distance = rate * offset / timelet timer = setInterval(() => {if (parseInt(ele.style.left) == goal ||Math.abs((Math.abs(goal) - Math.abs(parseInt(ele.style.left)))) < Math.abs(distance)) {ele.style.left = goal + 'px'clearInterval(timer)//每次轮播结束时判断//向左运行if (parseInt(ele.style.left) == -(count - 1) * width) {ele.style.left = -width + 'px'}if (parseInt(ele.style.left) == 0) {ele.style.left = -(count - 2) * width + 'px'}this.isMove = false} else {ele.style.left = parseInt(ele.style.left) + distance + 'px'}}, rate)}
}

源生代码封装轮播效果相关推荐

iOS 封装跑马灯和轮播效果
代码地址如下: http://www.demodashi.com/demo/14075.html 功能概述和预览功能描述:WSL_RollView 是基于UICollectionView实现的支持水 ...
web前端入门到实战：以轮播效果为案例谈如何写优质代码
作为程序员大家在写代码时谈的最多的就是代码的拓展性.复用性.本文就以大家熟悉的轮播效果为案例,讲一讲写优质代码的思路和实践. 文章分三个步骤.第一步,实现基本功能:第二步,考虑到代码的封装性和复用性: ...
java图片特效轮播代码_JQuery实现图片轮播效果
[实例演示] 1 2 3 4 用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-"JQuery实现图片轮播效果"上 ...
js图片轮播效果实现代码
这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下首先给大家看一看js图片轮播效果,如下图 ...
php制作图片轮播_JavaScript_jQuery制作简洁的图片轮播效果，演示图：核心代码：$ - phpStudy...
jQuery制作简洁的图片轮播效果演示图: 核心代码: $(document).ready(function(){ var $iBox = $('.imgBox'), $iNum = $('.img ...
html轮播带缩略图,js带缩略图的图片轮播效果代码分享
本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:--------------- ...
html图片轮播代码渐隐,js淡入淡出的图片轮播效果代码分享
本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示: ...
用JQ去实现一个轮播效果
前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body><div class="pic"><div cl ...
html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...

源生代码封装轮播效果

源生代码封装轮播效果相关推荐

最新文章

热门文章