本文实例为大家分享了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=\"./img/james6.jpeg\">
</li>
<li>
<img src=\"./img/james1.jpg\">
</li>
<li>
<img src=\"./img/james2.jpg\">
</li>
<li>
<img src=\"./img/james3.jpg\">
</li>
<li>
<img src=\"./img/james4.jpg\">
</li>
<li>
<img src=\"./img/james5.jpeg\">
</li>
<li>
<img src=\"./img/james6.jpeg\">
</li>
<li>
<img src=\"./img/james1.jpg\">
</li>
</ul>
<!-- 左右两个箭头 -->
<span class=\"left\"> < </span>
<span class=\"right\"> > </span>
<!-- 添加小圆点 -->
<ul class=\"point\">
<li style=\"background-color: red;\"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
其中，将图片替换为其他图片可以实现不同的轮播图，值得一提的是，六张图片的轮播图需要放八张图，第八张与第二张一致，第一张与第七张一致，真正呈现出来的仅仅是第二张到第七张
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持免费资源网。
© 版权声明
THE END
暂无评论内容