html原生js实现图片轮播,原生js实现简单轮播图

冷不防 2022-10-06 07:52 407阅读 0赞

本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下

一、写入网页基本结构

body:

网页的最外部设置一个id为wrap的容器，取代body，这样方便我们做一些初始化

css:

初始化：

包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化

css设置：

根据图片数与图片宽度设置轮播图宽度

二、设置js逻辑

需要完成的功能有：

1、鼠标移入轮播图逐渐出现左右浮动块

2、点击浮动块切换图片

3、点击小圆点切换图片

4、切换图片同时切换小圆点

5、自动播放

6、鼠标移入轮播图自动播放停止、移出恢复自动播放

代码如下：

Document

\*\{

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;

window.οnlοad=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\[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\[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\[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\[i\].οnmοusedοwn=function()\{

for(var i=0;i

pointList\[i\].style.backgroundColor='gray'

this.style.backgroundColor='red';

for(var b=0;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)

*  ![james6.jpeg][]
 *  ![james1.jpg][james6.jpeg]
 *  ![james2.jpg][james6.jpeg]
 *  ![james3.jpg][james6.jpeg]
 *  ![james4.jpg][james6.jpeg]
 *  ![james5.jpeg][james6.jpeg]
 *  ![james6.jpeg][]
 *  ![james1.jpg][james6.jpeg]

其中，将图片替换为其他图片可以实现不同的轮播图，值得一提的是，六张图片的轮播图需要放八张图，第八张与第二张一致，第一张与第七张一致，真正呈现出来的仅仅是第二张到第七张

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[james6.jpeg]:

html原生js实现图片轮播,原生js实现简单轮播图

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关原生JS实现轮播图

相关 html原生js实现图片轮播,原生js实现简单轮播图

相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果

相关图片轮播html原生代码,原生js实现轮播图的示例代码

相关原生js实现轮播图

相关原生JS实现轮播图

相关 JS原生轮播图实现

相关原生js实现轮播图

相关原生js实现轮播图

相关轮播图原生js实现