JS简单实现京东网页轮播图

Posted 2022-01-28 zqq277

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS简单实现京东网页轮播图相关的知识，希望对你有一定的参考价值。

需要html,css，js，

源代码

HTML

</ul>

</ol>

</div>

CSS样式

<style>

margin: 0;

padding: 0;

.box

width: 590px;

height: 441px;

background-color: salmon;

margin: 50px auto;

position: relative;

z-index: 99;

overflow: hidden;

.imgList

position: absolute;

list-style: none;

width: 800%;

left: 0;

top: 0;

.imgList li

float: left;

.imgList li img

width: 590px;

height: 441px;

cursor: pointer;

.circle

position: absolute;

width: 150px;

height: 10px;

z-index: 999;

display: flex;

justify-content: space-around;

align-items: center;

left: 38px;

top: 415px;

.circle li

list-style: none;

width: 10px;

height: 10px;

border-radius: 50%;

cursor: pointer;

background-clip: content-box;

border: 1px solid rgba(255, 255, 255, 0.5);

padding: 1px;

.current

background-color: #fff;

.leftBtn

position: absolute;

width: 25px;

height: 35px;

color:white;

background-color: rgba(255, 255, 255, 0.5);

border-radius: 0 100px 100px 0;

left: 0;

top: 200px;

z-index: 66;

text-decoration: none;

text-align: center;

line-height: 33px;

display: none;

a:hover

background-color:rgba(138, 115, 88, 0.336);

.rightBtn

position: absolute;

width: 25px;

height: 35px;

color:white;

background-color: rgba(255, 255, 255, 0.5);

border-radius: 100px 0 0 100px;

right: 0;

top: 200px;

z-index: 66;

text-decoration: none;

text-align: center;

line-height: 33px;

display: none;

</style>

//获取元素

var leftBtn = document.querySelector('.leftBtn'); //左按钮

var rightBtn = document.querySelector('.rightBtn'); //右按钮

var box = document.querySelector('.box'); //最大的盒子

var boxWidth = box.offsetWidth; //盒子宽=图片宽度

//1-鼠标落在div上显示左右按钮

//mouseenter事件为鼠标经过大盒子时显示左右两个按钮

box.addEventListener('mouseenter', function ()

leftBtn.style.display = 'block';

rightBtn.style.display = 'block';

clearInterval(timer);

timer = null;

)

//2-鼠标离开div上显示左右按钮

//mouseleave事件为鼠标离开左右两个按钮隐藏

box.addEventListener('mouseleave', function ()

leftBtn.style.display = 'none';

rightBtn.style.display = 'none';

timer = setInterval(function ()

rightBtn.click();

, 2000);

)

//3-动态获取图片张数来展示小球个数

var ul = box.querySelector('ul'); //获取大盒子box里的ul标签

var ol = box.querySelector('.circle') //获取大盒子box里的ol标签

//for循环根据图片创建小球个数

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

//创建一个小li标签

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

//记录当前小圆圈的索引号通过自定义属性来做为第5步做准备

li.setAttribute('index', i);

//把小li插入到ol里面

ol.appendChild(li);

//4-小圆圈的排他思想可以在生成小圆圈的同时直接绑定点击事件

li.addEventListener('click', function ()

//把所有小li清除current样式类名

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

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

//留下自己获取current类名的样式

this.className = 'current';

//使用动画函数的前提该元素必须有定位

//注意移动的是ul而不是li

//滚动图片核心算法点击某个小圆圈就让图片滚动

// 5-点击小圆圈移动图片

//ul移动距离小圆圈的索引号乘以图片的宽度作为ul运动的距离

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

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

//当我们点击了某个小li 就把这个小li的索引给num

num = index;

//当我们点击了某个小li 就把这个小li的索引给circle

circle = index;

//调用动画函数

animate(ul, -index * boxWidth)

)

//把ol里面的第一个小li设置名为current

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

//6-克隆第一张图片放到ul最后

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

ul.appendChild(first);

//7-点击右侧按钮图片滚动一张功能

//右侧按钮点击事件

var num = 0; //声明一个变量

var circle = 0;

// circle控制小圆圈播放

rightBtn.addEventListener('click', function ()

//如果走到了最后一张复制的图片此时我们的ul要快速的复原left为0

//无缝滚动，

if (num == ul.children.length - 2)

ul.style.left = 0;

num = 0;

num++;

animate(ul, -num * boxWidth);

circle++;

//若果circle=4 说明走到了我们克隆的图片了

if (circle == ol.children.length)

circle = 0;

//调用函数

circleChange();

)

//8-左侧按钮点击事件

leftBtn.addEventListener('click', function ()

//如果走到了最后一张复制的图片此时我们的ul要快速的复原left为0

//无缝滚动，

if (num == 0)

num = ul.children.length - 1;

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

num--;

animate(ul, -num * boxWidth);

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';

//9-自动播放功能

var timer = setInterval(function ()

//手动调用点击事件

rightBtn.click();

, 2000);

///

//动画函数

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();

obj.style.left = obj.offsetLeft + step + 'px';

, 15)

</script>

效果如图

以上是关于JS简单实现京东网页轮播图的主要内容，如果未能解决你的问题，请参考以下文章