html实现轮播图--小圆圈呈中间大两边小的样式

这个轮播图的样式是参照奔驰官网的，原始效果图大概是这样

轮播图下面的小圆圈呈现出中间大，两边小的效果。先来看看最终的成品：

分析：假设按照奔驰官网的一样，轮播的图片有6张。明显可以看出，每个大圆的一侧最多有两个小圆，且小圆的半径依次在减小。

实现的功能有：
点击左右键能切换图片；点击小圆圈能切换图片，实现自动轮播；当鼠标放上去停止自动播放；大概鼠标离开后能自动播放。

完整代码(含详细注释)：

<!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>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.big_box {position: relative;width: 500px;height: 400px;margin: 100px auto;overflow: hidden;}.big_box ul {position: absolute;left: 0;width: 700%;height: 400px;}.big_box ul li {float: left;}.big_box ul li img {width: 500px;height: 400px;}.left {position: absolute;top: 50%;left: 0;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);width: 30px;height: 30px;line-height: 30px;text-align: center;color: white;}.right {position: absolute;top: 50%;right: 0;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);width: 30px;height: 30px;line-height: 30px;text-align: center;color: white;}.big_box ol {position: absolute;bottom: 0;/* 这里别给ol限制宽度，让小圆圈的个数自动把ol撑大 */left: 50%;transform: translateX(-50%);height: 10%;line-height: 10%;text-align: center;}.big_box ol li {float: left;width: 20px;height: 20px;background-color: rgba(255, 255, 255, .5);border-radius: 50%;margin-left: 5px;display: none;}.big_box ol .current {background-color: rgb(211, 29, 29);display: block;}/* 第一层的样式 */.big_box ol .current1 {width: 15px;height: 15px;display: block;margin-top: 2.5px;}/* 第二层的样式 */.big_box ol .current2 {margin-top: 5px;width: 10px;height: 10px;display: block;}.left,.right,ol li {cursor: pointer;}</style>
</head><body><div class="big_box"><!-- 轮播的图片 --><ul><li><img src="imgs/picture1.png" alt=""></li><li><img src="imgs/picture7.png" alt=""></li><li><img src="imgs/picture3.png" alt=""></li><li><img src="imgs/picture4.png" alt=""></li><li><img src="imgs/picture5.png" alt=""></li><li><img src="imgs/picture6.png" alt=""></li></ul><!-- 左右按键 --><div class="left">&lt</div><div class="right">&gt</div><!-- 小圆圈 --><ol></ol></div><script>var timer;var big_box = document.querySelector('.big_box');var ul = big_box.querySelector('ul');var ol = big_box.querySelector('ol');var lis_img = ul.querySelectorAll('li');var left = document.querySelector('.left');var right = document.querySelector('.right');var num = 0;  //记录要滑到第几张图片function animate(obj, target) {var timer1 = setInterval(function () {var current = obj.offsetLeft;var step = 10;step = current > target ? -step : step;// 下面要包括等于的情况，否则会发生抖动if (Math.abs(current - target) <= Math.abs(step)) {clearInterval(timer1);obj.style.left = target + 'px';}else {obj.style.left = current + step + 'px';}}, 10)}//小圆圈样式改变-----最关键的步骤function circlechange(circles, circle) {//circle是当前所展示的图片的索引，也是要改变样式的圆圈的索引if (circle == lis_img.length) {circle = 0;}//排他思想设置小圆圈样式//排他思想第一步:先把所有的小圆圈样式去掉for (var i = 0; i < circles.length; i++) {circles[i].className = "";}//排他思想第二步:把当前图片对应的小圆圈设置样式circles[circle].className = "current";//大圆左边的两个圆if (circle - 1 >= 0) {circles[circle - 1].className = "current1";}if (circle - 2 >= 0) {circles[circle - 2].className = "current2";}//大圆右边的两个圆if (circle + 1 <= lis_img.length - 1) {circles[circle + 1].className = "current1";}if (circle + 2 <= lis_img.length - 1) {circles[circle + 2].className = "current2";}}//在页面刚加载进来就执行代码window.addEventListener('load', function () {//设置小圆点的个数for (var i = 0; i < lis_img.length; i++) {var li = document.createElement('li');ol.appendChild(li);// 给小圆圈添加自定义属性li.setAttribute('index', i);//一开始第一个小圆圈就是被选中状态if (i == 0) {li.className = "current";}//给小圆圈添加点击处理事件li.addEventListener('click', function () {//排他思想实现小圆圈样式改变for (var j = 0; j < ol.children.length; j++) {ol.children[j].className = "";}this.className = "current";//实现点击小圆圈后图片滑动var index = this.getAttribute('index');animate(ul, -index * big_box.offsetWidth);// 在图片滑动的同时对应的小圆圈样式也要发生改变，所以调用animate函数同时调用circlechange函数circlechange(circles, index);})}//为了实现无缝衔接的切换图片，要把第一张图片克隆到最后一张图片的附近var circles = ol.querySelectorAll('li');// cloneNode函数若括号里面是true，则是深拷贝，false则是浅拷贝var li_img = ul.children[0].cloneNode(true);ul.appendChild(li_img);//点击右箭头向右滑动right.addEventListener('click', function () {//下面if代码是实现向右滑动的无缝衔接，不懂的建议自己手动模拟一遍if (num >= lis_img.length) {num = 0;//注意改变属性left的值后面一定要跟px，否则没有效果ul.style.left = 0 + 'px';}num++;animate(ul, -num * big_box.offsetWidth);circlechange(circles, num);})//点击左箭头向左滑动left.addEventListener('click', function () {//下面if代码是实现向左滑动的无缝衔接，不懂的建议自己手动模拟一遍if (num <= 0) {num = lis_img.length;ul.style.left = -lis_img.length * big_box.offsetWidth + 'px';}num--;animate(ul, -num * big_box.offsetWidth);circlechange(circles, num);})//实现自动播放----因为自动播放的功能和向右滑动的功能一样，所以直接调用向右滑动的函数timer = setInterval(function () {right.click();}, 2000)//鼠标放到盒子上停止自动播放big_box.addEventListener('mouseover', function () {clearInterval(timer);})//鼠标离开自动播放big_box.addEventListener('mouseout', function () {clearInterval(timer);//在重新创建一个定时器时最好先清除一下定时器timer = setInterval(function () {right.click();}, 2000)})})</script>
</body></html>

代码中所用到的图片素材如下：

html实现轮播图--小圆圈呈中间大两边小的样式相关推荐

js轮播图片小圆点变化_纯js实现轮播图,详解(简单，无缝，小圆点,左右手动切换,自动轮动)...
无论用什么语言开发可视化界面,都有一个叫轮播图的东西.我们现在有个需求,如图: slideshow1.PNG 左右切换按钮默认为隐藏,当鼠标进入图片时,左右切换按钮时显示的,当鼠标离开图片时左右切换按 ...
JS无缝轮播图(支持点击左右切换，小圆点切换，定时器自动播放)
HTML代码 <div class="box"><ul class="box_ul"& ...
微信小程序轮播图指示点自定义（修改原生指示点样式）
1.实现效果 2.实现原理修改swpier原生指示点的样式. .wx-swiper-dots.wx-swiper-dots-horizontal .wx-swiper-dot .wx-swiper- ...
【微信小程序】小程序实现轮播图效果--swiper组件(一步步教你如何实现)
文章目录前言 1.引入外部链接图片资源 2.让swiper来调整适应图片的宽高 3.实现轮播效果--autoplay 总结欢迎点赞,收藏,加关注前言此例子是用微信小程序组件swiper来实现轮 ...
微信小程序五（创建轮播图）
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用轮播图,不外乎俩个要素,跳转链接和图片地址 1. 设置数据我在 pages/test/test.js中添加如下数据 //test ...
html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...
【Vue】实现滑动和闪现轮播图（转）
实现的功能: 闪现轮播图与滑动轮播图: 点击 < 和 > 箭头切换轮播图页面: 点击右下部小圆点切换对应的轮播图: 切换tab页离开轮播图界面后会清空计时器,再进入时重启计时器开始播放: ...
html5轮播怎么自动换图,如何使用JavaScript实现“无缝滚动自动播放”轮播图效果...
在一些项目开发中,我们经常需要使用到轮播图,但是没有深入学习的情况下做轮播图是非常困难的. 思路分成小问题来解决 1. 动态生成序号12345 页面有多少li(图片),就有多少序号 2. 点击序号. ...
做一个前端网页送给女朋友~轮播图+纪念日
文章目录 1. 轮播图框架 2. 轮播图大盒子实现 1. 盒子及图片的可视化 2. 将图片重叠起来并放入轮播图盒子中 ...相对定位与绝对定位 3. 添加左右按钮 4. 点击按钮跳转图片 5. 鼠标离 ...

html实现轮播图--小圆圈呈中间大两边小的样式

html实现轮播图--小圆圈呈中间大两边小的样式相关推荐

最新文章

热门文章