100字范文 > HTML CSS JS实现轮播图效果:包含分页按钮及切换箭头

HTML CSS JS实现轮播图效果:包含分页按钮及切换箭头

时间：2021-05-13 08:35:59

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/index.css"><link rel="stylesheet" href="./font/iconfont.css"></head><body><div class="window"><div class="content"><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/5.jpg" alt=""><img src="img/6.jpg" alt=""><img src="img/1.jpg" alt=""></div><div class="pageNavtion"><span class="select"></span><span></span><span></span><span></span><span></span><span></span></div><div class="btns"><img src="./img/l.png" alt="" id="pre"><img src="./img/r.png" alt="" id="next"></div></div></body><script src="./js/index.js"></script></html>

外部引入CSS和JS:

CSS页面：页面CSS样式

/* 样式重置 */*{padding: 0;margin: 0;}.window{width: 300px;border: 1px solid black;margin: 100px auto;position: relative;overflow: hidden;}.content{/* 一张图片为父级标签的100%，六张600% */width: 700%;height: 400px;/* 去除图片间隙---图片间回车键产生的 */font-size: 0;/* 相对于窗口进行定位，注：一旦使用定位，会使内容脱离父级标签（高度坍塌） */position: absolute;left: 0;top: 0;}.content img{/* 100%/7 */width: 14.28%;height: 100%;}/* 分页按钮 */.pageNavtion{position: absolute;left: 0;right: 0;bottom: 0;text-align: center;}.pageNavtion span{/* 行属性标签不能调节宽高。宽高只能由内容撑开，故转换为行内块属性 */display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color: grey;margin: 0 5px;margin-bottom: 5px;cursor: pointer;}.pageNavtion .select{width: 12px;height: 12px;border-radius: 50%;background-color: aliceblue;}/* 左右切换箭头 *//* 方法1： */.btns{position: absolute;/* (400-30)/2 */left: 0;top: 185px;width: 100%;/* 两个箭头分别在左侧和右侧 *//* background-color: brown; */display: flex;justify-content: space-between;/* 将下侧的分页按钮显示出来,此处不设置高度，否则下方的分页按钮会被覆盖 *//* height: 370px; *//* background-color: brown; */}.btns img{cursor: pointer;width: 30px;height: 30px;transition: all 1s;}.btns img:hover{width: 35px;height: 35px;}/* 方法2： *//* .btns{position: absolute;left: 0;top: 0;width: 100%;display: flex;justify-content: space-between; *//* 将下侧的分页按钮显示出来 *//* height: 370px; *//* background-color: burlywood; *//* }.btns button{width: 50px; *//* 用button:会有一个button自带的背景色,此处将自带的背景色和边框去除 *//* background-color: rgba(0, 0, 0, 0);border: 0;transition: all 1s;color: white;font-size: 25px;}.btns button:hover{cursor: pointer;font-size: 35px;background-color: rgba(0, 0, 0, 0.5);color: blue;} */

实现左右切换箭头有两种方式：
方法1：直接用img:缺点：不能用font-size设置大小，需要width和height设置大小。解决方法：使用方法2。
方法2：用button:会有一个button自带的背景色，利用css样式去除即可。
注意：在使用不同方式时，需修改对应的CSS样式和JS中获取左右切换箭头标签的语句。

JS页面：

//动态获取图片高度//创建img标签---保证图片是被浏览器加载完成的var img=document.createElement('img');img.src='img/1.jpg' ;//添加监听事件，看图片是否加载成功img.onload=function(){//动态获取图片的宽度和高度//图片的width和height属性返回的是图片的真实宽高//getComputedStyle:返回网页中对应标签的的css样式var style_height=getComputedStyle(document.querySelector('img')).height;//console.log(style_height);//400px//解决：相对于窗口进行定位，注：一旦使用定位，会使内容脱离父级标签（高度坍塌）document.querySelector('.window').style.height=style_height;//也可以通过计算(尺寸按照等比例缩放计算)//console.log(document.querySelector('.window').style.height=300*this.height/this.width+'px');}//定义两个计时器，第一个控制页面的切换，第二个控制切换的频率var content=document.querySelector('.content');//定义函数，完成一张图片的切换//index:记录本次轮播结束时图片的下标function onePicScroll(index,callBack){//var window=document.querySelector('.window');//动态获取图片的宽度//var style_w=getComputedStyle(window).width;//以上两句相当于：//var style_w=getComputedStyle(document.querySelector('.window')).width;//console.log(style_w);var style_w=getComputedStyle(document.querySelector('.window'));var w=parseInt(style_w.width);var totle_step=30;//总步数---共需多少步完成图片切换var current_step=0;//当前执行步数---代表已经走的步数var begin=parseInt(getComputedStyle(content).left);//0//console.log(begin);//获取content对应div标签开始本次轮播的起始位置var end=-index*w;//计算轮播结束时轮播图距离左侧窗口边界的距离var offset=end-begin;//计算本次轮播总偏移量//定义闭包函数（在函数内使用的函数）//只要程序执行到这句，在进行下次页面绘制时，先调用函数，一直重复该过程。function starScroll(){current_step++;content.style.left=begin+offset/totle_step*current_step+'px';var scrollAni=requestAnimationFrame(starScroll);if(current_step>=totle_step){//等价于停止计时器cancelAnimationFrame(scrollAni);callBack();//回调函数。只要调用，一定是计时器执行完毕}}starScroll();//调用函数，自产自销}//再定义计时器，每隔一段时间完成一次轮播var current_index=0;//记录当前轮播图片的下标//定义变量，限制刷新频率，性能高的浏览器刷新频率快（普通浏览器1s刷新60次）var num=0;//用来控制轮播图的刷新频率var auto_ani;function frequency(){num++;if(num>=180){//页面刷新300次时，current_index++ 该过程轮播图不执行current_index++;onePicScroll(current_index,function(){if(current_index>=6){content.style.left=0;current_index=0;}//完成对分页按钮颜色的更改change();});//执行一次轮播图的切换num=0;}//点击小圆点关闭自动轮播（使用全局变量，方便外界接收）auto_ani=requestAnimationFrame(frequency);}frequency();// 计时器是异步执行操作 --- 添加判断发生在第五张切换第六张之前,//图片还没有切换完成就直接进行第二个计时器的判断,解决方法:添加回调函数,传递本次轮播已经结束//计时器问题：当页面隐藏时，计时器工作不会停止，将计时器全部换成requestAnimationFrame，注：requestAnimationFrame接收的是一个函数//设置小圆点的自动切换var pages=document.querySelectorAll('.pageNavtion span');//定义函数，完成对分页按钮颜色的更改function change(){for(var i=0;i<pages.length;i++){if(i==current_index){pages[i].className='select';}else{pages[i].className='';}}}//给每一个分页按钮关联点击事件var orclick=false;//该变量用来标明是否被点击过//定义函数，为分页按钮关联手动轮播点击事件function hand_scroll(){for(var i=0;i<pages.length;i++){//为每一个分页按钮添加一个下标pages[i].index=i;pages[i].onclick=function(){if(orclick==false){//本次轮播有效orclick=true;//关闭自动轮播cancelAnimationFrame(auto_ani);num=0;//刷新频率//console.log(num);//alert(this.index);//获取分页按钮下标，绑定给current_indexcurrent_index=this.index;//修改对应的分页按钮颜色change();//开启完成本次轮播---通过回调函数开启自动轮播onePicScroll(current_index,function(){frequency();//当完成本次图片轮播orclick=false;});}}}}hand_scroll();// //获取左右箭头var btns=document.querySelectorAll('.btns img');//var btns=document.querySelectorAll('.btns button');//console.log(btns);var or_btn_click=false;for(var i=0;i<btns.length;i++){btns[i].onclick=function(){if(or_btn_click==false){or_btn_click=true;//说明被点击过//停止自动轮播cancelAnimationFrame(auto_ani);num=0;//频率值重置//获取箭头的id属性值，根据id获取点击的是哪个箭头var id=this.getAttribute('id');console.log(id);if(id=='pre'){//判断初始下标是否为0if(current_index==0){current_index=6;//切换到最后一张图片//将轮播图的位置修改到current_index对应下标var style_w=getComputedStyle(document.querySelector('.window'));var w=parseInt(style_w.width);content.style.left=-(current_index*w)+'px';}current_index--;}else{current_index++;}//进行上一页或下一页的轮播操作onePicScroll(current_index,function(){//重新开启轮播frequency();or_btn_click=false;if(current_index>=6){current_index=0;content.style.left=0;}//重设图片下小圆点的高亮色change();})}}}

效果：两种左右切换箭头的不同效果

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。