前端——JavaScript实现图片轮播
JavaScript设计实现轮播图效果。实现以下三个主要功能：
1.图片每隔3s可以自动切换
2.设置左右按键，实现手动切换图片
3.设置图片下标，可以根据下标选择要展示的图片
最终效果如视频所示：
轮播图
全部代码：
html+css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="轮播图.css">
<script>
window.onload=function(){
// 获取轮播器 container
var container=document.querySelector(".container")
// 获取图片的容器
var img_box =document.querySelector(".container .img_box")
img_box.style.left="-800px"
//轮播的核心代码
var change=function(offset){
var newoffset=parseInt(img_box.style.left)+offset
var speed=offset/100
var move=function(){
img_box.style.left=parseInt(img_box.style.left)+speed+"px"
if(parseInt(img_box.style.left)!==newoffset){
setTimeout(move,10)
}else{
if(parseInt(img_box.style.left)==-3200){
img_box.style.left="-800px"
}else if(parseInt(img_box.style.left)==-0){
img_box.style.left="-2400px"
}
}
}
move()
}
// 生成左右切换的按钮
var ul=document.createElement("ul")
ul.className="buttons"
var left_li=document.createElement("li")
left_li.innerText="<"
var right_li=document.createElement("li")
right_li.innerText=">"
ul.appendChild(left_li)
ul.appendChild(right_li)
container.appendChild(ul)
// 防连点击
var flag=0
// 给左右切换的按钮绑定事件
left_li.onclick=function(){
if(flag==0){
change(800)
index--;
if(index<0){
index=2
}
highlight()
flag=1
setTimeout(function(){
flag=0
}, 1500);
}
}
right_li.onclick=function(){
if(flag==0){
change(-800)
index++;
if(index>2){
index=0
}
highlight()
flag=1
setTimeout(function(){
flag=0
}, 1500);
}
}
// 自动轮播
var timer=setInterval(right_li.onclick,3000)
container.onmouseenter=function(){
clearInterval(timer)
}
container.onmouseleave=function(){
timer=setInterval(right_li.onclick,3000)
}
// 生成任意切换的按钮
var dott_ul=document.createElement("ul")
dott_ul.className="dotts"
// 获取图片数量
var img_box_li=document.querySelectorAll(".img_box li")
for(var i=0;i<img_box_li.length;i++){
var li=document.createElement("li")
li.innerHTML=i+1
if(i==0){
li.className="current"
}
dott_ul.append(li)
}
container.append(dott_ul)
// 任意切换
var dott_ul_li=document.querySelectorAll(".dotts li")
for(var j=0;j<dott_ul_li.length;j++){
dott_ul_li[j].onclick=function(){
// 图片切换
var new_index=this.innerText-1
change((index-new_index)*800)
index=new_index
highlight()
// 效果切换
}
}
// 定义一个游标 记录当前点的索引值
var index=0
// 按钮样式切换代码
var highlight=function(){
for(var k=0;k<dott_ul_li.length;k++){
if(k==index){
dott_ul_li[k].className="current"
}else{
dott_ul_li[k].className= ""
}
}
}
// 初始化辅助无缝轮播图片
var last_li=img_box.firstElementChild.cloneNode(true)
var first_li=img_box.lastElementChild.cloneNode(true)
img_box.insertBefore(first_li,img_box.firstElementChild)
img_box.appendChild(last_li)
}
</script>
</head>
<body>
<!-- <input type="button" value="left" class="left">
<input type="button" value="right" class="right"> -->
<div class="container">
<ul class="img_box">
<li><img src="../素材/hbu1.jpg" alt=""></li>
<li><img src="../素材/hbu2.jpg" alt=""></li>
<li><img src="../素材/好不.jpg" alt=""></li>
</ul>
</div>
</body>
</html>css
*{
padding: 0;
margin: 0 ;
}
img{
width: 100px;
}
.container{
width: 800px;
height: 350px;
background: chartreuse;
margin:100px auto ;
overflow: hidden;
position: relative;
}
.container .img_box{
width: 4000px;
height: 350px;
background: pink;
display: flex;
position: absolute;
left: -800px;
}
.container li{
width: 800px;
height: 350px;
background: blanchedalmond;
list-style: none;
}
.container li img{
width: 100%;
height: 100%;
/* object-fit: cover; */
/* 裁剪图片 */
}
/* input{
margin: 0px;
width: 50px;
height: 30px;
} */
.container .buttons{
position: absolute;
width: 90%;
left: 5%;
top: 150px;
/* background: crimson; */
display: flex;
justify-content: space-between;
}
.buttons li{
list-style: none;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.581);
text-align: center;
line-height: 50px;
border-radius: 25px;
color: rgb(255, 255, 255);
cursor: pointer;
font-weight: 600;
}
.dotts{
position: absolute;
/* background: yellow; */
width: 100%;
/* height: 20px; */
bottom: 10px;
display: flex;
justify-content: center;
}
.dotts li{
width: 5px;
height: 15px;
border-radius: 4px;
list-style: none;
background: rgba(255, 255, 255, 0.767);
margin: 4px;
padding: 1px 5px;
font-size: 3px;
}
.dotts li.current{
background: rgba(0, 0, 0, 0.603);
color: rgb(255, 255, 255);
border: 1px white solid;
}原文地址：https://blog.csdn.net/2301_78566776/article/details/142359474
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！