JavaScript实现六种网页图片轮播效果详解
2024-01-07 22:33:16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跑马灯轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
.carousel {
width: 650px;
margin: 50px auto;
position: relative;
overflow: hidden;
/* 超出部分隐藏 */
}
/* 标题-轮播图 */
h1 {
text-align: center;
}
.carousel ul {
list-style: none;
/* 消除ul自带圆点 */
}
.carousel #list {
width: 6000px;
position: relative;
left: 0px;
/* 初始位置 */
transition: left 0.5s ease 0s;
/*图片跳转的过渡效果*/
}
.carousel #list img {
width: 650px;
}
.carousel #list li {
float: left;
/* li排成一排显示 */
}
/* 上一张/下一张控制按钮 */
.carousel>a {
position: absolute;
width: 30px;
height: 50px;
/* 垂直居中，距顶部一半的父元素盒子宽度，再向上移动自身的一半 */
top: 50%;
margin-top: -25px;
background-color: rgba(163, 166, 167, 0.5);
}
.carousel>a>img {
margin-left: -8px;
}
.carousel .leftbtn {
left: 20px;
}
.carousel .rightbtn {
right: 20px;
}
/* 底部定位圆点list */
.carousel #location_list {
width: 120px;
position: absolute;
top: 350px;
left: 270px;
}
.carousel #location_list li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 5px;
border: 1px solid white;
}
/* 圆点被激活时的样式，动态为圆点增加class */
.carousel #location_list li.active {
background-color: bisque;
}
</style>
</head>
<body>
<h1>轮播图</h1>
<div class="carousel">
<!--图片列表 -->
<ul id="list">
<li><img src=" 380x268.jpg" alt="" /></li>
<li><img src=" 8.jpg" alt="" /></li>
<li><img src="h .jpg" alt="" /></li>
<li><img src="images/number/4.jpg" alt="" /></li>
<li><img src="images/number/5.jpg" alt="" /></li>
</ul>
<!-- 左右按钮 -->
<a href="javascript:;" class="leftbtn"><img src="./images/lunbo/chevron-left.png" alt="" srcset=""></a>
<a href="javascript:;" class="rightbtn"><img src="./images/lunbo/chevron-right.png" alt="" srcset=""></a>
<!-- 圆点列表 -->
<ul id="location_list">
<!-- 默认激活第一个 -->
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var carousel = document.querySelector(".carousel");
// 获取图片列表ul
var olist = document.getElementById("list");
// 获取定位数组
var location_list = document.querySelectorAll('#location_list>li');
// 向左按钮
var leftbtn = document.querySelector('.leftbtn');
// 向右按钮
var rightbtn = document.querySelector('.rightbtn');
// 将第一张图片加到最后一张，方便循环
var oli = document.querySelector("#list li:first-child")
olist.innerHTML += oli.innerHTML;
// 当前显示的图片定位
var img_location = 0;
// 当前的圆点定位
var dot_location = 0
// 定义一个全局定时器变量
var timer = null;
// 默认不上锁，该状态为了保证过渡效果能完整呈现
var islock = false;
// 定义一个全局函数，自动跳到下一张，方便鼠标移入移出时调用
function move() {
timer = setInterval(function () {
// 每隔1s点击向右按钮
rightbtn.click();
}, 1000)
}
// 页面加载后自动调用，实现自动跳转下一张
move();
// 鼠标移入，清除定时器
carousel.onmouseenter = function () {
clearInterval(timer);
}
// 鼠标移出，调用自动播放
carousel.onmouseleave = function () {
move();
}
// 点击按钮切换下一张
rightbtn.onclick = function () {
if (islock) { return; }
islock = true;
if (img_location === 5) {
// 清除过渡效果，从最后一张无缝衔接到开头
olist.style.transition = "none";
olist.style.left = "0px";
img_location = 0;
}
// 由于代码执行过快，所以需要放到异步执行语句里
setTimeout(function () {
// 跳到第二张
img_location += 1;
dot_location += 1;
olist.style.left = -650 * img_location + "px";
olist.style.transition = "left 0.5s ease 0s";
// 如果跳转后是第6张图片，实际上就是第一张图，圆点应该定位在第1个
if (img_location === 5) {
dot_location = 0;
location_list[dot_location].className = "active";
location_list[4].className = "none";
} else {
// 激活当前定位的圆点
location_list[dot_location].className = "active";
// 上一个圆点取消激活状态
location_list[dot_location - 1].className = "none"
}
}, 0)
setTimeout(function () {
islock = false;
}, 500)
};
// 点击按钮切换上一张
leftbtn.onclick = function () {
if (islock) { return; }
islock = true;
// 清除过渡效果，从第一张无缝衔接到最后一张
if (img_location === 0) {
img_location = 5;
olist.style.transition = "none";
olist.style.left = -650 * img_location + "px";
}
// 由于代码执行过快，所以需要放到异步执行语句里
setTimeout(function () {
// 跳到上一张图
img_location -= 1;
dot_location -= 1;
olist.style.transition = "left 0.5s ease 0s";
olist.style.left = -650 * img_location + "px";
// 如果跳完后是第五张图，圆点位置也要相应变成最后一个
if (img_location === 4) {
dot_location = 4;
location_list[dot_location].className = "active";
location_list[0].className = "none";
} else {
location_list[dot_location].className = "active";
location_list[dot_location + 1].className = "none"
}
}, 0)
setTimeout(function () {
islock = false;
}, 500)
}
</script>
</body>
</html>
学习如何实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>
<body>
<div class="box">
<a href="" class = 'left jiantou'><</a>
<a href="" class = 'right jiantou'>></a>
<ul class = 'pic'>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./images/1.jpg" alt=""></a>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./images/2.jpg" alt=""></a>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./images/3.jpg" alt=""></a>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./images/4.jpg" alt=""></a>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./images/5.jpg" alt=""></a>
</li>
</ul>
<ul class="lis">
<li></li>
<li class = 'selected'></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
position: relative;
overflow: hidden;
margin: 100px auto;
width: 520px;
height: 280px;
background-color: red;
}
.jiantou{
font-size: 24px;
text-decoration: none;
display: block;
text-align: center;
width: 20px;
height: 30px;
line-height: 30px;
background: rgba(158, 154, 154, 0.7);
color: white;
z-index: 999;
}
.left{
position: absolute;
top: 125px;
left: 0px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.right{
position: absolute;
top:125px;
left: 500px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
img{
width: 520px;
height: 280px;
}
.box .pic{
width: 600%;
}
.pic li {
float: left;
}
.lis{
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height:13px;
border-radius: 7px;
background: rgba(158, 154, 154, 0.7);
}
.lis li {
float: left;
width: 8px;
height: 8px;
margin: 3px;
border-radius: 50%;
background-color: #fff;
}
.lis .selected{
background-color: cyan;
}
window.addEventListener('load',function(){
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var box = document.querySelector('.box');
box.addEventListener('mouseenter',function(){
left.style.display = 'block';
right.style.display = 'block';
})
box.addEventListener('mouseleave',function(){
left.style.display = 'none';
right.style.display = 'none';
})
var pic = document.querySelector('.pic');
var lis = document.querySelector('.lis');
var boxWidth = box.offsetWidth;
for(var i = 0;i<pic.children.length;i++){
var li = document.createElement('li');
lis.appendChild(li);
//设置索引号
li.setAttribute('index',i);
li.addEventListener('click',function(){
//获得索引号
var index = this.getAttribute('index');
num = index;
circle = index;
for(var i = 0;i<lis.children.length;i++){
lis.children[i].className = '';
}
this.className = 'selected';
animate(pic,-index*boxWidth)
})
}
lis.children[0].className = 'selected';
//克隆第一个li
var first = pic.children[0].cloneNode(true);
pic.appendChild(first);
var num = 0;
var circle = 0;
//右侧按钮的功能
right.addEventListener('click',function(){
if(num == pic.children.length-1){
pic.style.left = 0;
num = 0;
}
num++;
animate(pic,-num*boxWidth);
circle++;
if(circle == lis.children.length){
circle = 0;
}
for(var i =0;i<lis.children.length;i++){
lis.children[i].className = '';
}
lis.children[circle].className = 'selected';
})
//左侧按钮功能
left.addEventListener('click',function(){
if(num == 0){
num = pic.children.length-1;
pic.style.left = -num*boxWidth+'px';
}
num--;
animate(pic,-num*boxWidth);
circle--;
if(circle <0){
circle = lis.children.length-1;
}
for(var i =0;i<lis.children.length;i++){
lis.children[i].className = '';
}
lis.children[circle].className = 'selected';
})
var timer = this.setInterval(function(){
right.click();
},2000)
})
文章来源:https://blog.csdn.net/q28000/article/details/135383118
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！