javascript实现轮播图效果

最新推荐文章于 2023-05-02 16:06:05 发布

置顶 kun鲲

最新推荐文章于 2023-05-02 16:06:05 发布

阅读量4.5k

点赞数 10

分类专栏： JavaScript 文章标签：轮播图

本文链接：https://blog.csdn.net/shilipeng666/article/details/84492719

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

实现效果如图：

CSS与HTML就不讲了，比较简单，大家用笔画一下图就懂了，主要说js代码

(建议大家先把css中#container的overflow:hidden;注释掉，这样可以看得直观一点)

<!DOCTYPE html>
<html>
<head>
<title>js轮播图</title>
<style type="text/css">
#container{
width: 600px;
height: 400px;
position: relative;
left: 30%;
top: 100px;
border: 1px solid #000;
overflow: hidden ;/*可以先将这句注释掉*/
}
#list{
width: 4200px;
height: 400px;
position: absolute;
}
#list img{
width: 600px;
height:400px;
float: left;
}
#buttons{
height: 15px;
width: 250px;
position: absolute;
bottom: 20px;
left: 200px;
}
#buttons span{
width: 15px;
height: 15px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
float: left;
margin-right:25px;
cursor: pointer;
}
#buttons .on{
background: orange;
}
.arrow {
display: none;
cursor: pointer;
position: absolute;
top: 180px;
left: 20px;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
background-color: RGBA(0, 0, 0, .4);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
display: block;
}
#next{
left: 540px;}
</style>
<script>
window.onload = function() {
var container = document.getElementById("container");
var list = document.getElementById("list");
var buttons = document.getElementById("buttons").getElementsByTagName("span");
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var timer;

//animate 函数，在当前left值得基础上向右移动 offset px,如果向左移动距离超过图六位置就变为图一位置，向右移动距离超过图二位置就变为图七位置
function animate(offset) {
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + 'px';
if (newLeft > -600) {
list.style.left = -3000 + 'px';
}
if (newLeft < -3000) {
list.style.left = -600 + 'px';
}
}

//将当前显示图片对应的小圆点样式改变
function buttonsShow() {
//将所有的小圆点的样式清除
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == "on") {
buttons[i].className = "";
}
}
//数组从0开始，故index需要-1
buttons[index - 1].className = "on";
}

//点击产生查看前一张效果，animate移动距离改变，小圆点显示改变，当index=1时还要查看前一张时，index变为5
prev.onclick = function () {
index -= 1;
if (index < 1) {
index = 5
}
buttonsShow();
animate(600);
};

//点击产生查看后一张效果，animate移动距离改变，小圆点显示改变
next.onclick = function () {
index += 1;
if (index > 5) {
index = 1
}
animate(-600);
buttonsShow();
};

//通过定时器调用next.onclick（）实现每两秒滚动一次
function play() {
//重复执行的定时器
timer = setInterval(function () {
next.onclick();
}, 2000)
}

//清除定时器实现停止滚动
function stop() {
clearInterval(timer);
}
container.onmouseover = stop; //在鼠标进入onmouseover时，停止每两秒滚动一次
container.onmouseout = play; //在鼠标离开onmouseover时，开始每两秒滚动一次
play(); //在onload后就调用play()

//为每个小按钮添加onclick事件，当点击按钮时会跳动到按钮对应的图片
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
//当前图片点击当前的小圆点不执行以下代码。
if (this.className == "on") {
return;
}
/* 这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上 */
/* 由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (clickIndex - index); //这个index是当前图片停留时的index
animate(-offset);
index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
buttonsShow();
}
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img2/05.png" alt="">
<img src="img2/01.png" alt="">
<img src="img2/02.png" alt="">
<img src="img2/03.png" alt="">
<img src="img2/04.png" alt="">
<img src="img2/05.png" alt="">
<img src="img2/01.png" alt="">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<em id="prev" class="arrow">&lt;</em>
<em id="next" class="arrow">&gt;</em>
</div>
</body>
</html>

kun鲲

关注

10
点赞
踩
58

收藏

觉得还不错? 一键收藏
6
评论
javascript实现轮播图效果

实现效果如图： CSS与HTML就不讲了，比较简单，大家用笔画一下图就懂了，主要说js代码(建议大家先把css中#container的overflow:hidden;注释掉，这样可以看得直观一点)&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;js轮播图&lt;/title&gt;&lt;style t...
复制链接

扫一扫