本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下
案例:轮播图需求
布局:ul下有很多li标签;浮动在一行;
原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden;
功能需求:
- 序号轮播
- 左右按钮的轮播
- 自动轮播
- 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播
实现效果:
html部分
<div class="box" id="box"> <div class="inner" id="inner"> <ul id="imglist"> <li> <a href="#" ><img src="/UploadFiles/2021-04-02/1.jpg">css部分
* { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 730px; height: 454px; padding: 8px; border: 1px solid green; margin: 100px auto; } .inner { position: relative; overflow: hidden; height: 454px; } #imglist { width: 700%; position: absolute; left: 0; transition: left 300ms linear; } li { float: left; } .list { position: absolute; bottom: 20px; left: 50%; margin-left: -85px; } .list i { width: 20px; height: 20px; border-radius: 50%; background-color: #fff; color: #333; float: left; font-style: normal; line-height: 20px; font-size: 14px; text-align: center; margin-right: 10px; cursor: pointer; } .list i:last-child { margin-right: 0; } .list i.current { background-color: skyblue; color: #fff; } .arrow { position: absolute; width: 100%; top: 50%; margin-top: -30px; } .arrow-left, .arrow-right { width: 30px; height: 60px; position: absolute; font: 20px/60px "consolas"; color: #fff; background-color: rgba(0, 0, 0, .3); text-align: center; cursor: pointer; } .arrow-right { right: 0; }js部分:
// 获取DOM var yuan = document.querySelectorAll("i"); var li = document.querySelector("ul li"); var ul = document.querySelector("ul"); var imgs = document.querySelector("#imglist"); var right = document.querySelector(".arrow-right"); var left = document.querySelector(".arrow-left"); var box = document.querySelector(".box"); window.onload = function() { //------------------------------------这里是点击小圆圈,控制图片的切换 //循环小圆点 注册小圆点 for (var i = 0; i < yuan.length; i++) { //我们需要这里面的i 必须提前拿出来,要不最后i的值就是最后一个数值了 yuan[i].num = i; //注册事件 yuan[i].onmouseover = function() { // 现在要循环将样式移除 for (var j = 0; j < yuan.length; j++) { yuan[j].classList.remove("current"); } //这里是为了将点击的小圆点 增加上样式 this.classList.add("current"); var num = this.num; //到这里的思路就是点击小圆点 将图片进行移动,向左面移动,上面css做了相应的定位操作 //移动的距离就是 n 乘以 一张图片的宽度, //n 就是选择的小圆点的 坐标-----i(num) //图片的宽度 box.offsetWidth var left = num * li.offsetWidth; // console.log(num, box.offsetWidth, left); imgs.style.left = `-${left}px`; //这里小原点联动左右按钮 for (var p = 0; p < yuan.length; p++) { //清除全部样式(小圆点) yuan[p].classList.remove("current"); } //给当前的小圆点增加样式 yuan[num].classList.add("current"); //这里这个位置比较关键,在上面设置完样式之后,记得将此num赋值给全局的index index = this.num; } } //------------------------------------以上是点击小圆圈,控制图片的切换 //------------------------------------下面是开始右面轮播,控制图片的切换 //首先定义一个全局的index,这个index的作用依旧是控制图片的切换 var index = 0; right.onclick = function() { index++; //这里要对index做一下判断,如果不做判断,可以试想一下, //只要你一点击,index就会无限的增大,增大到你“无法自拔” if (index == ul.children.length) { //如果坐标为6的话,显示应该显示第1张图片,所以要复位 即index=0 index = 0; } var left = index * li.offsetWidth; // console.log(index, box.offsetWidth, left); imgs.style.left = `-${left}px`; //点击右面增加联动小圆点的效果 for (var n = 0; n < yuan.length; n++) { //清除全部样式(小圆点) yuan[n].classList.remove("current"); } //给当前的小圆点增加样式 yuan[index].classList.add("current"); }; //------------------------------------以上是结束右面轮播,控制图片的切换 //------------------------------------下面是开始左面轮播,控制图片的切换 left.onclick = function() { index--; //这里同右点击一样,需要做一下判断, console.log(index); if (index == -1) { index = ul.children.length - 1; } var left = index * li.offsetWidth; // console.log(index, box.offsetWidth, left); // console.log(left); imgs.style.left = `-${left}px`; //这个位置做的是 左面点击联动小圆点 for (var m = 0; m < yuan.length; m++) { //清除全部样式(小圆点) yuan[m].classList.remove("current"); } //给当前的小圆点增加样式 yuan[index].classList.add("current"); }; //------------------------------------上面是结束左面轮播,控制图片的切换 //------------------------------------开始设置自动轮播 var timer = setInterval(function() { right.onclick(); }, 1000); //------------------------------------以上是自动轮播结束 //------------------------------------设置鼠标进来就停止开始 box.onmouseover = function() { clearInterval(timer); }; //------------------------------------设置鼠标进来就停止结束 //------------------------------------设置鼠标出去就停止开始 box.onmouseout = function() { timer = setInterval(function() { right.onclick(); }, 1000); }; //------------------------------------设置鼠标出去就停止结束 }未完待续,本篇文章做的PC端的处理,目前从6页-1页,1页到6页还有点小瑕疵,会及时更新上的,其他功能一切正常,欢迎大家评论
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,轮播图
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“原生JS实现pc端轮播图效果”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]