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

本文实例为大家分享了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)

}

}

}

}

}

• 

• 

• 

• 

• 

• 

• 

• 

<

>

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

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