建设通网站源码,厦门优化网站排名,威海哪里可以做网站,中国优秀网页设计概要
这个案例具备常见轮播图完整的功能#xff0c;大家可以根据自己的需求去修改#xff1b; 代码可以直接复制运行#xff0c;需要安装sass
主要功能#xff1a;
#xff08;1#xff09;鼠标移入轮播图#xff0c;左右两边的按钮出现#xff0c;离开则隐藏按钮大家可以根据自己的需求去修改 代码可以直接复制运行需要安装sass
主要功能
1鼠标移入轮播图左右两边的按钮出现离开则隐藏按钮(CSS完成
2点击左侧按钮图片向右播放一张右侧按钮同理
3图片播放的同时下面的小圆圈也会随之变化
4点击小圆圈播放相应的图片
5鼠标移入小圆圈播放相应的图片看需求是要点击还是移入把click改成mouseenter
6鼠标移出轮播图自动播放图片
7鼠标移入轮播图暂停播放图片
页面效果 大家觉得有帮助的话可以点个赞支持下谢谢啦~
完整代码
一、Css样式使用sass预编译器
style /* 默认样式 */* {margin: 0;padding: 0;a {text-decoration: none;}li {list-style: none;}}/* 轮播图盒子 */.box {width: 600px;height: 350px;margin: 70px auto;position: relative;overflow: hidden;/* 上、下一页 */.prev,.next {opacity: 0;display: inline-block;cursor: pointer;width: 50px;height: 50px;position: absolute;top: 50%;color: #d2d0d0;z-index: 33;text-align: center;font-size: 40px;transform: translateY(-25px);}/* 上一页不同的属性 */.prev {left: 0;border-radius: 0 25% 25% 0;}/* 下一页不同的属性 */.next {right: 0;border-radius: 25% 0 0 25%;}/* 图片容器 */.images {position: absolute;top: 0;left: 0;width: 1000%;/* 图片 */li {list-style: none;float: left;img {width: 600px;height: 350px;}}}/* 小圆点盒子 */.dots {position: absolute;bottom: 10px;left: 50%;height: 13px;transform: translateX(-50%);background: rgba(255, 255, 255, .3);border-radius: 7px;display: flex;/* 小圆点 */li {width: 10px;height: 10px;border-radius: 50%;border-color: white;background-color: rgb(0, 0, 0, 0.2);margin: 2px 5px;cursor: pointer;}/* 选择的小圆点 */.active {background-color: rgb(247, 243, 243);}}}/* 鼠标移入盒子显示上、下按钮 */.box:hover .prev,.box:hover .next {opacity: 1;}/* 鼠标移入上、下按钮背景模糊 */.box .prev:hover,.box .next:hover {background-color: rgba(0, 0, 0, 0.2);}
/style
二、Html结构
bodydiv classbox!-- 左箭头 --a hrefjavascript:; classprev lt;/a!-- 右箭头 --a hrefjavascript:; classnext gt;/aul classimageslia href#img src./src/assets/00.jpg alt轮播图图片/a/lilia href#img src./src/assets/11.jpg alt轮播图图片/a/lilia href#img src./src/assets/12.jpg alt轮播图图片/a/lilia href#img src./src/assets/13.jpg alt轮播图图片/a/lilia href#img src./src/assets/15.jpg alt轮播图图片/a/lilia href#img src./src/assets/16.jpg alt轮播图图片/a/li/ulul classdots!-- li 用js动态生成--/ul/div
/body
三、JavaScript
script/* 功能需求1当鼠标经过轮播图左右两边的按钮出现离开则隐藏按钮(CSS完成2点击左侧按钮图片向右播放一张右侧同理3图片播放的同时下面的小圆圈也会随之变化4点击小圆圈可以播放相应的图片5鼠标移入小圆圈可以播放相应的图片看需求是要点击还是移入把click改成mouseenter6鼠标移出轮播图会自动播放图片7鼠标移入轮播图会暂停播放图片*/window.addEventListener(load, function () {// 图片的下标var slideIndex 0;//circle 控制小圆圈的播放var circle 0;//获取小圆圈盒子var dots document.querySelector(.dots);//获取所有图片var images document.querySelector(.images);//获取轮播图容器var box document.querySelector(.box)//获取轮播图容器宽度var box_width box.offsetWidth;//1.获取上、下一页并添加点击事件var prev document.querySelector(.prev)var next document.querySelector(.next)//上一页prev.addEventListener(click, function () {if (slideIndex 0) {//已经第一页了再上一页就该是最后一页slideIndex images.children.length - 1images.style.left -slideIndex * box_width px;}slideIndex--;animate(images, -slideIndex * box_width)// 小圆圈跟随一起变化circle--;circle circle 0 ? dots.children.length - 1 : circle;//调用函数circleChange();});//下一页next.addEventListener(click, function () {if (slideIndex images.children.length - 1) {//已经最后一页了再下一页就该是第一页images.style.left 0;slideIndex 0;}slideIndex;animate(images, -slideIndex * box_width);// 小圆圈跟随一起变化circle;if (circle dots.children.length) {circle 0;}circleChange();});// 2.动态生成小圆圈 有几张图片就生成几个小圆圈var dots document.querySelector(.dots);for (var i 0; i images.children.length; i) {//创建一个小livar li document.createElement(li);//记录当前小圆圈的索引号 通过创建自定义属性来做li.setAttribute(index, i);dots.appendChild(li);//小圆圈的排他思想 在生成小圆圈的同时绑定点击事件li.addEventListener(click, function () {for (var i 0; i dots.children.length; i) {dots.children[i].className ; //清空样式}this.className active;//点击小圆圈移动图片本质移动的是ul//ul 的移动距离 就是小圆圈的索引号 * 图片的宽度 注意是负值// 当我们点击了某个小li 就拿到它的index属性var index this.getAttribute(index);//当我们点击了某个小li 就要把这个小li 的index给slideIndexslideIndex index;circle index;animate(images, -slideIndex * box_width);})}//把dots 里面的第一个小li设置类名为 activedots.children[0].className active;// 实现滑动到最后一张照片时 可以平滑地过渡到第一张克隆第一张图片 放在ul最后面在其后克隆小圆点不会多var first images.children[0].cloneNode(true);images.appendChild(first);//3.点击小圆圈添加激活样式function circleChange() {for (var i 0; i dots.children.length; i) {dots.children[i].className ;}dots.children[circle].className active;}//定时器自动播放3Svar timer setInterval(function () {next.click();}, 3000);//3.绑定鼠标移入移出事件//鼠标移入停止播放,清除计时器box.addEventListener(mouseenter, function () {clearInterval(timer);timer null;//清除计时器});//鼠标离开轮播图自动切换 相当于点击右箭头box.addEventListener(mouseleave, function () {timer setInterval(function () {// 手动调用事件next.click();}, 3000);});//轮播图播放动画function animate(obj, target, callback) {//让元素只有一个定时器在执行需要清除以前的定时器clearInterval(obj.timer);obj.timer setInterval(function () {var step (target - obj.offsetLeft) / 10;step step 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft target) {//停止动画 本质是停止定时器clearInterval(obj.timer)//回调函数写到定时器结束位置if (callback) {callback();}}//把每次加1这个步长值改为一个慢慢变小的值obj.style.left obj.offsetLeft step px;}, 15);}next.click();})
/script
