(编辑:jimmy 日期: 2024/12/24 浏览:2)
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下
一、写入网页基本结构
body:
网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化
css:
初始化:
包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化
css设置:
根据图片数与图片宽度设置轮播图宽度
二、设置js逻辑
需要完成的功能有:
1、鼠标移入轮播图逐渐出现左右浮动块
2、点击浮动块切换图片
3、点击小圆点切换图片
4、切换图片同时切换小圆点
5、自动播放
6、鼠标移入轮播图自动播放停止、移出恢复自动播放
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } a{ text-decoration: none; } ul,li{ list-style: none; } img{ display: block; } input{ outline: none; } html,body{ height: 100%; overflow: hidden; } .content{ position: absolute; top: 0; left: 0; } .banner{ width: 600px; height: 400px; position: relative; margin: 50px auto; overflow: hidden; } .banner .bannerList{ position: absolute; left:-600px; top: 0; width: 4800px; height: 100%; } .banner .bannerList li{ float: left; width: 600px; height: 400px; } .banner .bannerList li img{ height: 100%; width: 100%; } .banner .left,.banner .right{ position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 50px; border: solid 2px gray; font-size:30px; text-align: center; line-height: 50px; color: rgb(255, 255, 255); opacity: 0; transition: 1000ms; } .banner .left{ left: 0px; } .banner .right{ right: 0px; } .banner .point{ position: absolute; bottom: 30px; left:50%; transform: translateX(-50%); } .banner .point li{ float: left; width: 15px; height: 15px; border-radius: 50%; background-color: gray; margin: 5px; } </style> <script type="text/javascript"> window.onload=function(){ var bannerLeft=document.querySelector('.banner .left'); var bannerRight=document.querySelector('.banner .right'); var banner=document.querySelector('.banner') var bannerList=document.querySelector('.banner .bannerList') var liList=document.querySelectorAll('.banner .bannerList li') var pointList=document.querySelectorAll('.banner .point li') var start=-600; timer2=setInterval(function(){ //设置定时器,自动播放 var a=30; var index=bannerList.offsetLeft/-600+1; if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+'px' //无缝操作 index=2; } if(bannerList.offsetLeft==-3600){ index=1; } for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor='grey' } pointList[index-1].style.backgroundColor='red'; timer3=setInterval(function(){ a=a-1 bannerList.style.left=bannerList.offsetLeft-20+'px'; if(a==0){ clearInterval(timer3) } }, 30) if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+'px'; } },4000) // 创建一个移入出现函数 banner.addEventListener('mouseover',occur) function occur(){ bannerLeft.style.opacity=1; //移入逐渐出现 bannerRight.style.opacity=1; clearInterval(timer2); //移入取消自动播放 } banner.addEventListener('mouseout',function(){ bannerLeft.style.opacity=0; bannerRight.style.opacity=0; //移出消失 timer2=setInterval(function(){ //移出恢复自动播放 var a=30; timer3=setInterval(function(){ a=a-1 bannerList.style.left=bannerList.offsetLeft-20+'px'; if(a==0){ clearInterval(timer3) } }, 30) if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+'px'; } },4000) }) //设置左右浮动块点击变色以及滚动 function colorChange(){ this.style.color='black'; if(this.className=='right'){ //判断是哪边被点击 var index=bannerList.offsetLeft/-600+1; var a=30; timer=setInterval(function(){ //点击浮动块切换图片 a=a-1; bannerList.style.left=bannerList.offsetLeft-20+'px'; if(a!=0){ bannerRight.removeEventListener('mousedown',colorChange) bannerLeft.removeEventListener('mousedown',colorChange) } if(a==0){ clearInterval(timer); bannerRight.addEventListener('mousedown',colorChange) bannerLeft.addEventListener('mousedown',colorChange) } },30) if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+'px' index=2; } if(bannerList.offsetLeft==-3600){ index=1; } for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor='grey' } pointList[index-1].style.backgroundColor='red'; } else{ var a=30; var index=bannerList.offsetLeft/-600-1; timer=setInterval(function(){ a=a-1; bannerList.style.left=bannerList.offsetLeft+20+'px'; if(a!=0){ bannerLeft.removeEventListener('mousedown',colorChange) bannerRight.removeEventListener('mousedown',colorChange) } if(a==0){ clearInterval(timer); bannerLeft.addEventListener('mousedown',colorChange) bannerRight.addEventListener('mousedown',colorChange) } },30) if(bannerList.offsetLeft==0){ bannerList.style.left=-3600+'px' index=5; } if(bannerList.offsetLeft==-600){ index=6; } for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor='grey' } pointList[index-1].style.backgroundColor='red'; } } function colorReturn(){ this.style.color='white' } bannerLeft.addEventListener('mousedown',colorChange) bannerRight.addEventListener('mousedown',colorChange) bannerLeft.addEventListener('mouseup',colorReturn) bannerRight.addEventListener('mouseup',colorReturn) for(var i=0;i<pointList.length;i++){ pointList[i].onmousedown=function(){ for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor='gray' } this.style.backgroundColor='red'; for(var b=0;b<pointList.length;b++){ if(pointList[b].style.backgroundColor==this.style.backgroundColor){ var a=30; var step=-(b+1)*600-bannerList.offsetLeft; timer1=setInterval(function(){ a=a-1; bannerList.style.left=bannerList.offsetLeft+step/30+'px'; if(a!=0){ bannerLeft.removeEventListener('mousedown',colorChange) bannerRight.removeEventListener('mousedown',colorChange) } if(a==0){ clearInterval(timer1) bannerLeft.addEventListener('mousedown',colorChange) bannerRight.addEventListener('mousedown',colorChange) } },20) } } } } } </script> </head> <body> <div id="wrap"> <!-- 写出轮播图框架 --> <div class="banner"> <ul class="bannerList"> <li> <img src="/UploadFiles/2021-04-02/james6.jpeg">其中,将图片替换为其他图片可以实现不同的轮播图,值得一提的是,六张图片的轮播图需要放八张图,第八张与第二张一致,第一张与第七张一致,真正呈现出来的仅仅是第二张到第七张
精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。