PC端网页轮播图基本效果(html+css+js)全套详解-复制就能用

本文链接：https://blog.csdn.net/bbxx_lzx/article/details/121570823

本文详细解读了一段HTML、CSS和JavaScript代码，该代码用于实现一个基本的页面轮播图功能。包括左右按钮、轮播图片、小圆点指示器等元素的布局和交互逻辑，涉及CSS定位、过渡效果和JavaScript事件监听等技术。

摘要由CSDN通过智能技术生成

直接步入正题，解读在代码注释里面！

页面布局部分：

<div class="focus">

//左侧按钮

<a href="javascript:;" class="arrow-l iconfont icon-jiantou1"></a>

                //右侧按钮

<a href="javascript:;" class="arrow-r iconfont icon-jiantou"></a>

<ul>

//轮播图中的图片

        <li>

          <a href=""><img src="./upload/focus.png" alt=""></a>

          </li>

          <li>

          <a href=""><img src="./upload/focus.png" alt=""></a>

          </li>

          <li>

          <a href=""><img src="./upload/focus.png" alt=""></a>

         </li>

          <li>

          <a href=""><img src="./upload/focus.png" alt=""></a>

          </li>

</ul>

//轮播图中的小圆圈

<ol class="circle">

</ol>

</div>

CSS布局部分：（选部分注释，如果有不明白的可以评论或者私信问我哦）

/* 轮播图 */

//轮播图父盒子样式

.focus {

position: relative;

float: left;

width: 721px;

height: 455px;

//隐藏超出部分

overflow: hidden;

}

//轮播图盒子样式

.focus ul {

position: absolute;

top: 0;

left: 0;

width: 600%;

//设置元素堆叠顺序

z-index: -1;

}

//图片样式

.focus ul li {

float: left;

}

//按钮样式

.arrow-l,

.arrow-r {

position: absolute;

/* 居中 */

top: 50%;

margin-top: -20px;

width: 24px;

height: 40px;

background: rgba(0, 0, 0, .3);

text-align: center;

line-height: 40px;

color: #fff;

font-size: 18px;

//先隐藏样式，鼠标经过再显示

display: none;

}

.arrow-r {

right: 0;

}

//小圆圈父盒子样式

.circle {

position: absolute;

bottom: 10px;

left: 50px;

}

//小圆圈样式

.circle li {

width: 10px;

height: 10px;

float: left;

//边框样式

border: 2px solid rgba(255, 255, 255, .5);

margin: 0 5px;

border-radius: 50%;

cursor: pointer;

}

Js部分：（选部分注释，如果有不明白的可以评论或者私信问我哦）

window.addEventListener('load', function () {

//获取元素

var arrow_l = document.querySelector('.arrow-l');

var arrow_r = document.querySelector('.arrow-r');

var focus = document.querySelector('.focus');

var focusWidth = focus.offsetWidth;

//鼠标经过，左右箭头隐藏

focus.addEventListener('mouseenter', function () {

arrow_l.style.display = 'block';

arrow_r.style.display = 'block';

clearInterval(timer);

timer = null;

})

//鼠标离开启动定时器

focus.addEventListener('mouseleave', function () {

arrow_l.style.display = 'none';

arrow_r.style.display = 'none';

//启动定时器

timer = setInterval(function() {

//手动调用点击事件

arrow_r.click();

}, 2000);

})

//动态生成小圆圈

var ul = focus.querySelector('ul');

var ol = focus.querySelector('.circle')

//console.log(ul.children.length);

for (var i = 0; i < ul.children.length; i++) {

var li = document.createElement('li');

ol.appendChild(li);

//记录当前小圆圈的索引号，通过自定义属性来做

li.setAttribute('index', i);

//排他思想给li添加点击效果

//小圆点点击事件

li.addEventListener('click', function () {

for (var i = 0; i < ol.children.length; i++) {

ol.children[i].className = ' ';

}

this.className = 'current';

//点击圆圈移动图片

//动画函数使用者必须有定位算法：小圆圈的索引号*图片大小就是ul的移动距离注意是负值

//当点击了某个li 就拿到了当前li的索引号

var index = this.getAttribute('index');

//当点击了li，就要把li的索引号给num 控制图片

num = index;

//当点击了li，就要把li的索引号给circle 控制圆圈

circle = index;

//console.log(focus.offsetWidth);

animate(ul, -index * focusWidth);

})

}

//让第一个圈添加白底

ol.children[0].className = 'current';

//克隆第一张图片，放到最后面 (写到生成小圆圈的外面)

var first = ul.children[0].cloneNode(true);

ul.appendChild(first);

//点击右侧按钮滚动图片

var num = 0;

//控制小圆圈播放

var circle = 0;

//节流阀

var flag = true;

arrow_r.addEventListener('click', function() {

//如果走到最后一张图片，ul快速复原 left改为0 (无缝滚动)

if(flag) {

flag = false; //关闭节流阀

if(num == ul.children.length - 1) {

ul.style.left = 0;

num = 0;

}

num++;

animate(ul, -num * focusWidth, function(){

flag = true; //打开节流阀

});

circle++;

//如果circle长度 = ol.children.length 回到0

if(circle == ol.children.length) {

circle = 0;

}

circleChange();

}

});

//左侧按钮

arrow_l.addEventListener('click', function() {

//如果走到第一张图片，ul快速到最后一张 left改为-(ul.children.length - 1) * focusWidth + 'px' (无缝滚动)

if(flag) {

flag = false; //关闭节流阀

if(num == 0) {

num = ul.children.length - 1;

ul.style.left = -num* focusWidth + 'px';

}

num--;

animate(ul, -num * focusWidth, function(){

flag = true; //打开节流阀

});

circle--;

//如果circle<0 说明到第一张图片了

// if(circle < 0) {

// circle = ol.children.length - 1;

// }

circle = circle < 0 ? ol.children.length - 1 : circle;

circleChange();

}

});

function circleChange () {

for(var i = 0;i<ol.children.length;i++) {

ol.children[i].className = '';

}

ol.children[circle].className = 'current';

}

//定时器

var timer = setInterval(function() {

//手动调用点击事件

arrow_r.click();

}, 2000);

})