您的位置:首页 > Web前端 > JavaScript

JavaScript仿京东轮播图效果

2021-03-05 04:07 1621 查看

本文实例为大家分享了JavaScript实现京东轮播图效果展示的具体代码,供大家参考,具体内容如下

做了一个仿京东的轮播图,当然没有人家官网的精美啦。

主要技术点:

  • 每隔3秒自动切换图片;
  • 鼠标移入图片自动暂停切换,鼠标移出则继续;
  • 点击左右方向按钮手动切换图片;
  • 鼠标移到灰色圆点,显示对应的图片,并加亮显示。

HTML代码:

<body>
<h1>轮播图展示</h1>
<div id="did">

<!-- 图片 -->
<div id="img-div" onmouseover="doStop()" onmouseout="doStart()">
<img src="./1.jpg">
<img src="./2.jpg">
<img src="./3.jpg">
<img src="./4.jpg">
<img src="./5.jpg">
<img src="./6.jpg">
<img src="./7.jpg">
<img src="./8.jpg">
</div>

<!-- 左右按钮 -->
<div id="btn-div">
<div id="left-btn" onclick="doLeftClick()">
<h3> < </h3>
</div>
<div id="right-btn" onclick="doRightClick()">
<h3> > </h3>
</div>
</div>

<!-- 圆点 -->
<div id="cir-div">
<div onmouseover="doMove(1)"></div>
<div onmouseover="doMove(2)"></div>
<div onmouseover="doMove(3)"></div>
<div onmouseover="doMove(4)"></div>
<div onmouseover="doMove(5)"></div>
<div onmouseover="doMove(6)"></div>
<div onmouseover="doMove(7)"></div>
<div onmouseover="doMove(8)"></div>
</div>
</div>

</body>

CSS代码:

<style>
* {
margin: 0px;
padding: 0px;
}

body {
background-color: rgb(255, 249, 249);
}

h1 {
text-align: center;
padding-top: 40px;
color: rgba(250, 54, 129, 0.562);
}

#did {
position: relative;
width: 590px;
height: 470px;
margin: 30px auto;
}

#img-div {
position: absolute;
}

#img-div img {
width: 590px;
display: none;
cursor: pointer;
z-index: -1;
}

/* 这两段可不加 */
/* 显示第一张图片 */
#img-div img:first-child {
display: block;
}

/* 点亮第一个圆点 */
#cir-div div:first-child {
background: #fff;
}

#cir-div {
position: absolute;
/* 相对于图片的位置 */
left: 40px;
bottom: 25px;
}

/* 下方圆点 */
#cir-div div {
width: 8px;
height: 8px;
float: left;
/* 50%时为圆形 */
border-radius: 50%;
margin-right: 6px;
border: 1px solid rgba(0, 0, 0, .05);
background: rgba(255, 255, 255, .4);
}

#left-btn {
position: absolute;
/* 相对于图片的位置 */
top: 45%;

/* 左半圆按钮 */
width: 27px;
height: 38px;
background: rgba(119, 119, 119, 0.5);
border-radius: 0 20px 20px 0;
/* 动画效果,放在变化前,当鼠标移动上面时,会缓慢变色 */
transition: background-color 0.3s ease-out;
}

#right-btn {
position: absolute;
/* 相对于图片的位置 */
top: 45%;
right: 0px;

/* 右半圆按钮 */
width: 27px;
height: 38px;
background-color: rgba(119, 119, 119, 0.5);
border-radius: 20px 0 0 20px;
/* 动画效果,放在变化前,当鼠标移动上面时,会缓慢变色 */
transition: background-color 0.3s ease-out;
}

#left-btn:hover {
background-color: rgba(32, 32, 32, 0.5);
cursor: pointer;
}

#right-btn:hover {
background-color: rgba(32, 32, 32, 0.5);
cursor: pointer;
}

#left-btn h3 {
color: #fff;
margin-top: 4px;
margin-left: 2px;
}

#right-btn h3 {
color: #fff;
margin-top: 4px;
margin-left: 8px;
}
</style>

JavaScript代码:

<script>
//显示第几张图片
var count = 1;
//时间
var time = null;
//图片列表
var imglist = document.getElementById("img-div").getElementsByTagName("img");
//圆点列表
var cirlist = document.getElementById("cir-div").getElementsByTagName("div");

//展示对应的图片和点亮对应的圆点
function show(x) {
for (var i = 0; i < imglist.length; i++) {
if (x == i + 1) {
//显示图片
imglist[i].style.display = "block";
//圆点点亮
cirlist[i].style.backgroundColor = "#fff";
} else {
imglist[i].style.display = "none";
cirlist[i].style.background = "rgba(255, 255, 255, .4)";
}
}
}

//定时轮播图片(每3秒切换一张图片)
function doStart() {
if (time == null) {
time = setInterval(function () {
count++;
show(count);
if (count >= 8) {
count = 0;
}
}, 3000);
}
}

//停止轮播图片
function doStop() {
if (time != null) {
clearInterval(time);
time = null;
}
}

//鼠标移到圆点上图片会相应切换,并且之后会点亮下一个圆点 而不是未移到圆点前的下一个圆点
function doMove(x) {
show(x);
//将位置赋给count,图片就会从该图片的下一张开始切换
count = x;
//当鼠标移到最后一个圆点时,需要将count变为0,不然执行doStart()里的count++,count就会变为9,越界了
if (count == 8) {
count = 0;
}
}

/*
对于i 、count和show(x)里x的关系:
i = [0,7];
x = [1,8];
count = [1,8];
*/
//点击左边按钮向左切换图片
function doLeftClick() {
for (var i = 0; i < imglist.length; i++) {
//判断当前在展示的是哪张图片
if (imglist[i].style.display == "block") {
if (i == 0) {
show(8);
// 忘掉这句后,break会直接退出,当左按钮按到最右的圆点,会直接忽略圆点1,直接跳到圆点2
count = 0;
//保证切换是3秒钟
doStop();
doStart();
break;
}
show(i);
count = i;
//保证切换是3秒钟
doStop();
doStart();
break;
}
}
}

//点击右边按钮向右切换图片
function doRightClick() {
for (var i = 0; i < imglist.length; i++) {
//判断当前在展示的是哪张图片
if (imglist[i].style.display == "block") {
if (i == 7) {
show(1);
count = 1;
doStop();
doStart();
break;
}
show(i + 2);
count = i + 2;
//就不会出现切换到没有图片的情况
if (count >= 8) {
count = 0;
}
doStop();
doStart();
break;
}
}
}

doStart();
//默认打开页面显示的是第一张图片
//(不加,会出现第1个圆点亮也就是刚打开页面时,左按钮没反应)
doMove(1);
</script>

遇到的难点:

虽说轮播图看起来还蛮简单的,但实现起来还挺多问题的。不过我发现的都解决掉了。

  • 圆点与按钮放置在图片上
  • 自动切换图片了但对应的圆点没有点亮
  • 鼠标移到圆点上图片切换了,但下一个自动点亮的圆点却是未移到圆点前的下一个
  • 第1个圆点亮也就是刚打开页面时,左按钮没反应
  • 当左按钮按到最右的圆点,会直接忽略圆点1,直接跳到圆点2
  • 在最后一个圆点时点击右按钮时,会出现切换到没有图片的情况
  • 点左按钮切换时间大概2秒,点右按钮切换时间大概5秒,时间并没有达到标准的3秒

不过我都解决啦!

最大的感触就是刚解决掉一个bug正沾沾自喜时,又来一个bug。

以上就是本文的全部内容,希望对大家的学习有所帮助

您可能感兴趣的文章:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js 轮播图