本文介绍了使用JavaScript实现的三种轮播图效果，包括无缝轮播、带拖拽功能和带圆点指示器的轮播图。每种轮播图都有对应的代码示例和效果图展示。
一.无缝轮播图
效果图：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
/*显示图片的容器*/
.box {
width: 500px;
height: 150px;
overflow: hidden;
}
/*可以放两份图片列表的容器*/
.par {
width: 1600px;
}
/*放所有图片的容器*/
.child {
float: left;
width: 800px;
height: 150px;
}
.child > img {
width: 200px;
height: 150px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="par">
<div class="child">
<img src="./img/1.jpg" alt=""/>
<img src="./img/2.jpg" alt=""/>
<img src="./img/3.jpg" alt=""/>
<img src="./img/4.jpg" alt=""/>
</div>
</div>
</div>
<script>
var childele = document.querySelector(".child");//放所有图片的容器
var par = document.querySelector(".par");//获取放置了两份图片列表的容器
var box = document.querySelector(".box");//获取显示图片的容器
var clone = childele.cloneNode(true);//克隆一份图片列表，不然衔接的时候能看到闪一下
par.appendChild(clone);//追加进可以放置两份图片列表的容器
var speed = 1;
var timer = null;
loop();
function loop() {
box.scrollLeft += speed;
var left = box.scrollLeft;
if (left >= 800) {
box.scrollLeft = 0;//移动完所有图片之后再返回到一开始的地方
}
timer = setTimeout(loop, 10);
}
</script>
</body>
</html>
二.带拖拽的轮播图
效果图：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
/*最外层的容器*/
.banner {
position: relative;
width: 1000px;
height: 230px;
margin: 0 auto;
}
/*显示框的大小*/
.menu {
position: relative;
width: 1000px;
height: 230px;
overflow: hidden;
border: 1px solid red;
}
/*把所有图片放置两遍的容器*/
.list {
width: 6000px;
height: 200px;
border: 1px solid red;
}
/*把所有图放置一遍的容器*/
.par {
float: left;
width: 3000px;
height: 200px;
}
ul {
float: left;
width: 1000px;
height: 200px;
}
ul li {
list-style: none;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
box-shadow: 0 0 1px #cbcbcb;
float: left;
font-size: xx-large;
font-weight: bold;
}
/*最下方进度条*/
.pro {
position: absolute;
width: 900px;
height: 4px;
border-radius: 4px;
left: 50%;
bottom: 10px;
margin-left: -450px;
background: #cbcbcb;
}
/*最下方进度条上面的滑动条*/
#btn {
position: absolute;
z-index: 99999;
left: 0;
top: -3px;
width: 100px;
height: 10px;
border-radius: 5px;
outline: none;
}
</style>
</head>
<body>
<div class="banner">
<div class="pro">
<button id="btn" style="left: 0"></button>
</div>
<div class="menu">
<div class="list">
<div class="par">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
</ul>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
</div>
</div>
</div>
<div style="height: 1000px"></div>
<script>
var par = document.querySelector(".par");//获取把所有图放置一遍的容器
var list = document.querySelector(".list");//获取把所有图片放置两遍的容器
var menu = document.querySelector(".menu");//获取显示框
var clone = par.cloneNode(true);//把所有图片克隆一遍追加到可以放两遍的容器里面
list.appendChild(clone);
var speed = 1;
var timer = null;
loop();
function loop() {
menu.scrollLeft += speed;
var left = menu.scrollLeft;
if (left >= 3000) {
menu.scrollLeft = 0;
}
/*因为进度条总长度减去滑动条总长度即为滑动条可滑动的总距离：900-100=800px
* 而因为该距离和上方显示框宽度不同，所以需要按比例换算，（图片向左滑动的距离÷图片列表总宽度）*800即为下方滑动条向右滑动的距离
* */
btn.style.left = (left / 3000) * 800 + "px";
timer = setTimeout(loop, 1);
}
//鼠标进入移除计时器
menu.onmouseenter = function () {
clearTimeout(timer);
}
//鼠标离开 添加计时器
menu.onmouseleave = function () {
loop();
}
btn.onmouseenter = function () {
clearTimeout(timer);
}
btn.onmouseleave = function () {
loop();
}
//按钮按下
var startX = 0;
var moveX = 0;
var left = 0;
/*鼠标在滑动条按下事件*/
btn.onmousedown = function (e) {
left = parseInt(btn.style.left);
startX = e.pageX;//startX为点下去的坐标相对于屏幕在X轴的偏移坐标
document.body.addEventListener("mousemove", btnMove);
}
//移动事件
function btnMove(e) {
moveX = e.pageX;//moveX为移动后的坐标相对于屏幕在X轴的偏移坐标
var c = moveX - startX;//两个的差值即为移动的距离
var nowleft = left + c;
if (nowleft >= 0 && nowleft <= 800) {//移动范围在0-800px之间
btn.style.left = nowleft + "px";
//当滑动条滑动时，页面跟着滚动的状态，根据比例换算距离
var scroll = (nowleft / 800) * 3000;
menu.scrollLeft = scroll;
}
}
//按钮抬起移除鼠标移动事件
document.body.onmouseup = function () {
this.removeEventListener("mousemove", btnMove);
}
</script>
</body>
</html>
三.带圆点的轮播图
效果图：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*
{
margin: 0;
padding: 0;
}
/*显示单张图片的容器*/
.box
{
width: 800px;
height: 300px;
position: relative;
margin: 0 auto;
border: 1px solid #000000;
overflow: hidden;
}
/*几张轮播图片的ul*/
.balist
{
width: 4000px;
overflow: hidden;
}
.transanimate
{
transition: transform .3s ease-in;
}
/*放单张图片的容器*/
.balist > li
{
width: 800px;
height: 300px;
list-style: none;
float: left;
}
/*单张图片*/
.balist > li img
{
width: 100%;
height: 100%;
vertical-align: middle;
}
/*放小圆点的容器*/
.contral
{
width: 100%;
position: absolute;
left: 0;
bottom: 10px;
text-align: center;
}
/*小圆点*/
.small
{
width: 13px;
height: 13px;
display: inline-block;
border: 1px solid #ffffff;
border-radius: 50%;
background-color: #cbcbcb;
}
/*加颜色的小圆点的类*/
.ck
{
background-color: white;
}
</style>
</head>
<body>
<!--显示单张图片的容器-->
<div class="box">
<!--轮播的几张图片-->
<ul class="balist transanimate" style="transform: translateX(0px)">
<li><img src="./img/1.jpg" alt=""/></li>
<li><img src="./img/2.jpg" alt=""/></li>
<li><img src="./img/3.jpg" alt=""/></li>
<li><img src="./img/4.jpg" alt=""/></li>
</ul>
<!--图片下方的小圆点-->
<div class="contral">
<div class="small ck"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
</div>
<script>
var box = document.querySelector(".box");//显示单张图片的容器
var ulele = document.querySelector(".balist");//获取图片列表
var small = document.querySelectorAll(".small");//单个小圆点
var slider = {
distance: 0,//默认为第一个小圆点
speed: 800,
time: null,
delay: 1300,
sx: 0,//鼠标点下去的坐标
mx: 0,//鼠标拖动后的坐标
/*下方小圆点的方法*/
move: function () {
var that = this;//因为包含计时器，而计时器的this指向window,所以将指针替换为指向当前对象的指针
small[that.distance].classList.remove("ck");//先清除掉加的类
that.distance++;//加类的小圆点切换
small[that.distance == 4 ? 0 : that.distance].classList.add("ck");//当索引到4时切换回0（第一个）加类，其他情况即加给当前索引位的小圆点
ulele.style.transform = "translateX(" + (-that.distance * that.speed) + "px)";//执行当前的css3过渡，向左所以为负
//等待动画完成的代码
if (that.distance == 4) {
//动画完成后用一次性计时器,切换回第一张图片
setTimeout(function () {
ulele.classList.remove("transanimate");
ulele.style.transform = "translateX(0px)";
that.distance = 0;
}, 300);
}
},
/*轮播图动画的方法*/
start: function () {
var that = this;
that.time = setInterval(function () {
//检测没有类添加
if (!ulele.classList.contains("transanimate")) {
ulele.classList.add("transanimate");
}
that.move();
}, that.delay);
},
/*克隆图片的方法*/
cloneEle: function () {
var clone = ulele.children[0].cloneNode(true);
ulele.appendChild(clone);
}
};
/*加载事件，记录鼠标差值*/
var dist = 0;
window.onload = function () {
slider.cloneEle();//克隆元素
slider.start();//调用轮播图移动的方法
//鼠标进入图片显示框的事件
box.onmouseenter = function () {
clearInterval(slider.time);//清除计时器，即鼠标进入时暂停
};
//鼠标离开显示框的事件
box.onmouseleave = function () {
slider.start();//鼠标离开时调用start方法，轮播图继续移动
};
//鼠标按下的事件
box.onmousedown = function (e) {
ulele.classList.remove("transanimate");//移除动画，轮播图不再移动
e.preventDefault();//阻止事件的默认行为
slider.sx = e.layerX;//将鼠标在X轴按下时的坐标赋给sx
this.addEventListener("mousemove", movehandle);
};
/*鼠标拖动的方法*/
function movehandle(e) {
slider.mx = e.layerX;//将鼠标在x轴拖动后的坐标赋给mx
dist = slider.mx - slider.sx;//两者相减即为鼠标拖动的距离
if (dist > 0) {
//当当前鼠标点击的图片为第一张，即左边没有元素时，将整个图片列表右移，使得第二组最后一张显示在第一张左边
if (slider.distance == 0) {
ulele.style.transform = "translateX(-3200px)";
slider.distance = 4;
}
}
//找ul原位置
var olddis = -slider.distance * slider.speed;
ulele.style.transform = "translateX(" + (dist + olddis) + "px)";
}
/*鼠标抬起来的事件*/
box.onmouseup = function () {
ulele.classList.add("transanimate");//重新给图片列表添加动画
this.removeEventListener("mousemove", movehandle);//移除鼠标移动事件
//鼠标放开写 弹回还是下一张
if (Math.abs(dist) >= 400) {//如果鼠标移动的距离的绝对值（因为左移为负，所以取绝对值）>=400时
small[slider.distance == 4 ? 0 : slider.distance].classList.remove("ck");//当为最后一个小点点时，跳回第一个，并移除之前的类
if (dist >= 0) {//当dist>=0，即表示向右拖动，则图片列表也往上一张切换
slider.distance--;
}
else {
slider.distance++;
}
small[slider.distance == 4 ? 0 : slider.distance].classList.add("ck");//再给当前小点点重新添加类
}
ulele.style.transform = "translateX(" + (-slider.distance * slider.speed) + "px)";
if (slider.distance == 4) {
//动画完成后一次性计时器写，再切换回第一张
setTimeout(function () {
ulele.classList.remove("transanimate");
ulele.style.transform = "translateX(0px)";
slider.distance = 0;
}, 300);
}
};
//小点点鼠标进入的事件
for (var i = 0; i < small.length; i++) {
small[i].index = i;
small[i].onmouseenter = function () {
for (var k = 0; k < small.length; k++) {
small[k].classList.remove("ck");//鼠标进入小点点时先遍历移除之前的类
}
this.classList.add("ck");
slider.distance = this.index;//小点点的索引位和图片的索引位保持一致
ulele.style.transform = "translateX(" + (-slider.distance * slider.speed) + "px)";//图片滚动
}
}
}
</script>
</body>
</html>
扫一扫
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
