JavaScript原生实现轮播图的滑动切换

实现了基本的效果，做了个简易的效果，可以触摸切换

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {padding: 0;margin: 0;}div {width: 100%;height: 350px;border: 1px solid red;max-width: 750px;margin: 0 300px;overflow: hidden;position: relative;}ul {display: flex;width: 4500px;position: absolute;}ul>li {list-style: none;width: 750px;height: 350px;border: 1px solid #00FFFF;}ul>li:nth-child(1) {background: url(img/niubi.jpg) no-repeat;}ul>li:nth-child(2) {background: url(img/xuexi.jpg) no-repeat;}ul>li:nth-child(3) {background: url(img/BTB.jpg) no-repeat;}ul>li:nth-child(4) {background: url(img/Miboy.jpg) no-repeat;}ul>li:nth-child(5) {background: url(img/car.jpg) no-repeat;}ul>li:nth-child(6) {background: url(img/niubi.jpg) no-repeat;}.trf {transition: left .4s ease;}</style></head><body><div><ul class="ul"><li></li>   <li></li>   <li></li>   <li></li>   <li></li>   <li></li>   </ul></div><script type="text/javascript">const div = document.querySelector('div')const ul1 = document.querySelector('.ul')const lis = document.querySelectorAll('ul li')let upperindex = 0, lastindex = 0let Percentage = 0.2, liWidth = 750let moveP = 0, themove, item = 0let time = null, path = 0//设置移动方法function move(e) {ul1.classList.remove('trf')upperindex = parseInt(e.clientX)themove = e.clientX - 300 + (-moveP) + itemul1.style.left = themove + 'px'}//当点击时添加musemove方法div.addEventListener('mousedown', e => {clearTimeout(time)lastindex = moveP = parseInt(e.offsetX)div.addEventListener('mousemove', move)})//当鼠标抬起时， 删除mousemove方法div.addEventListener('mouseup', () => {// console.log(upperindex, lastindex, liWidth * 0.3)ul1.classList.add('trf')//判断右边是否碰到末尾if(item === (-(lis.length-1) * 750)) {ul1.classList.remove('trf')ul1.style.left = 0 + 'px'item = 750}//判断滑动方向if((upperindex - (liWidth * 0.3)) < lastindex) {console.log('向左滑')item -= 750//判断滑动方向}else if((upperindex + (liWidth * 0.3)) >= lastindex) {console.log(item)//判断左边是否末尾if(item >= 0) {item = 0}else {console.log('向右滑')item += 750}}ul1.style.left = item + 'px'div.removeEventListener('mousemove', move)})//自动轮播function mytime() {ul1.classList.add('trf')if(path >= lis.length-1) {path = -1ul1.classList.remove('trf')}path++ul1.style.left = (path * (-750)) + 'px'time = setTimeout(mytime, 1000)}mytime()</script></body>
</html>

JavaScript原生实现轮播图的滑动切换相关推荐

原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习
目录一.获取元素(DOM) 1. 随机轮播图案例 2. 阅读注册协议(定时器间歇函数的应用) 3. 轮播图定时器版 4. 网页时钟二.事件基础(DOM) 1. 随机点名案例 2. 轮播图点击切换( ...
JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
原生javascript之实战轮播图
成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的搭建HTML和CSS结构 HTML代码如下: 1 <div class=" ...
轮播图动画滑动动画效果
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
JavaScript实现网页轮播图
轮播图也成为焦点图,是网页中比较常见的网页特效一.功能: 1.鼠标经过轮播图模块,左右两边的按钮显示,鼠标离开轮播图模块,就隐藏左右按钮. 2.点击右(左)侧按钮一次,图片往左(右)播放一张,一以此 ...
【JavaScript】网页轮播图
目录 HTML搭建功能实现小圆圈事件左右按钮事件自动播放轮播图也叫焦点图,是网页中比较常见的网页特效. 功能: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往 ...
自己写的原生js轮播图插件
时间有限,功能有待完善 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...

JavaScript原生实现轮播图的滑动切换

JavaScript原生实现轮播图的滑动切换相关推荐

最新文章

热门文章