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简单实现京东网页轮播图相关推荐

原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据
文章目录功能简介项目准备项目说明方案一:源代码 CSS样式 HTML结构 JS逻辑方案二:源代码 CSS样式 HTML结构 JS逻辑功能简介页面展示该项目功能实现: 无限滚动轮播图 j ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
Bootstrap练习：京东商城轮播图
练习:京东商城的一个轮播图效果,可以自动切换图片和点击切换图片,主要运用了Bootstrap的Carousel插件与js插件等知识内容,练习源文件下面有下载链接. 目录前言一.练习 1.目标图: ...
web前端html图片轮播,如何使用LayUI实现网页轮播图_WEB前端开发,layui,轮播图
关于html5中自定义属性的介绍_WEB前端开发 html5为我们提供了以[data-]为前缀定义需要的属性即可设置自定义属性,如[ ].本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参 ...
layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...
Javascript-API-BOM、动画函数、网页轮播图、节流阀、筋斗云、固定侧边栏返回顶部案例
动画实现原理核心原理:通过定时器 setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件 ...
【JavaScript】网页轮播图
目录 HTML搭建功能实现小圆圈事件左右按钮事件自动播放轮播图也叫焦点图,是网页中比较常见的网页特效. 功能: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往 ...
html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...
网页轮播图+缓动效果
实现某宝上面的网页轮播图+缓动效果代码和注释: <!DOCTYPE html> <html lang="en"><head><meta ...

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

JS简单实现京东网页轮播图相关推荐

最新文章

热门文章