js轮播图

程序员文章站 2022-06-02 11:25:18

...

样式定位设计

1.要写一个轮播图模块，首先我们设置一个大的盒子wrap来装下这些内容。我们第一步先插入图片，将图片合并在同一块区域以后，插入左右按钮，分别可以控制图片向前播放和向后播放。样式插入完以后开始写js函数。

.wrap {      
width: 500px;            
height: 500px;            
margin: 0 auto;       
}
<div class="wrap"></div>
<!--最大的盒子-->

（1）轮播图应该是使用列表，将每个图片存为一行，由于轮播图在一个地方切换图片，所以将长列表合并在同一个地方，

img {            
width: 500px;            
height: 500px;        
}

<ul class="list">           
	<li class="item">
	<img class="lunbo" src="33.jpg"></li>           
	<li class="item">
	<img class="lunbo" src="22.jpg"></li>           
	<li class="item">
	<img class="lunbo" src="11.jpg"></li>       
</ul>

（2）将ul的样式设置为none以去掉列表前面的小黑点的样式。因为是相对于大盒子的定位，所以使用relative来进行定位设置。

.list {
	width: 200px;
	height: 200px;
	list-style: none;                        
        position: relative;        
        }

因为在之前的盒子我设置的长宽刚好就是图片的长宽，所以list样式设置图片的长宽刚好100%就行，也可以去掉列表的样式

.item {            
	position: absolute;
	/*将图片叠加在同一个区域*/                        
        width: 100%;
	height: 100%;        
	}

设置完这里以后运行发现第三张图（最后一张图）刚好在最上面 js轮播图

(3)插入button按钮，位于图片的左边和右边，类名都设置成btn，用来存放两者相同的地方，不同的地方分别用id="goPre"和id=“goNext”

<button type="button" class="btn"
id="goPre"><</button>          
<button type="button" class="btn"
id="goNext">></button>

对btn进行定位，同时进行了样式的设计：

.btn {            
	width: 50px;
        height: 50px;
        position: absolute;
	top: 250px;
     	border-radius: 100%;
        border-color: white;
        border-width: 0.1px;
        background-color: rbga(128, 128, 128, 10);
	}
.btn:hover{
	background-color:lightcyan;
	}

于是我们对左右两个按钮分别进行定位：

#goPre {            
	left: 515px;        
	}

#goNext {            
	right: 515px;
       }

js轮播图

这里的按钮就设计好了

（4）设置.item active

.item.active {            
	opacity: 1;            
	z-index: 10;
}

<ul class="list">            
<li class="itemactive"><img class="lunbo" src="11.jpg"></li>           
<li class="item"><img class="lunbo" src="22.jpg"></li>            
<li class="item"><img class="lunbo" src="33.jpg"></li>
</ul>

js轮播图
li class=“item active” 这句话让第一张图片成为了当前显示的图片，成为了最上面的一张，谁加上了active，谁就是最上面的，我们还可以发现在这张图中按钮不见了，是因为图片把按钮覆盖住了，我们将图片设置为 z-index: 10 ，按钮设置成 z-index: 100 ，就可以确保按钮不被图片所覆盖。

.btn {            
z-index:100;
}

script函数控制图片播放

（1）设置items来控制当前展示的图片，goPreBtn设置向前的按钮函数，goNextBtn设置向后的按钮函数，index计数，表示第几张图片在展示，表示第几张图片有active这个类名。

var items =document.getElementsByClassName('item'); //图片
var goPreBtn = document.getElementById('goPre');
var goNextBtn =document.getElementById('goNext')； 
var index=0;

（2）goIndex函数的设置，现在的index是多少就显示第几张图片，items数组用来存放图片。

var goIndex = function() { //调用goindex函数来实现当前图片的展示                                            
items[index].className = 'item active';            
}

在进行调试以后发现，运行完后所有的图片属性都变成了item active，所以我们在当前图片展示的时候，要将剩下的图片变成普通的item属性

（3）这时候设置一个clearIndex函数，并且goIndex里面对他进行调用，每将一个图片的属性变成active的同时，把上一个的属性修改回item。

var clearActive = function() {                
for (var i = 0; i < items.length; i++) 
	{                   
	 items[i].className = 'item'; 
	 //把要展示的图片之外的属性都变成只有item没有active   
	}
}

var goIndex = function() { 
//调用goindex函数来实现当前图片的展示                
	clearActive();                
 	points[index].className = 'pointactive';
        items[index].className = 'item active';
        }

（4）按钮控制图片的播放（向后播放）

var goNext = function() {                          
if (index < 2) {                       
       index++;                
       }
        else {                          
       index = 0; 
       //数组只有0-4，这样可以循环播放                
    	 }                
	 goIndex();            
	}
     goNextBtn.addEventListener('click', function() {goNext(); })

写到这里以后就可以通过点击右键随意向后播放图片了

js轮播图根据相同的逻辑和格式，写出向前播放的函数

（5）按钮控制图片的播放（向前播放）

 var goPre = function() {                
if (index >= 1 && index <= 2) {
      index--;               
      } else if (index == 0) { 
      index = 2;
      }
      goIndex();
}
goPreBtn.addEventListener('click', function() {goPre();})

（6）在item中加入transition: all.5s;使之有一个渐变的效果。

（7）在图片上面添加小圆点，用户可以通过点击小圆点来控制图片的播放。

小圆点也是列表，我们有三张图片，所以设置三个小圆点。同时设置他们的样式。


       
<ul class="pointList">            

       
<li class="point"></li>            

       
<li class="point"></li>            

       
<li class="point"></li>        

       
</ul>


       
.pointList {            

       
padding-left: 0;            

       
list-style: none;            

       
position: absolute;            

       
right: 510px;            

       
bottom: 230px;            

       
z-index: 100;        

       
}                

       
.point {            

       
width: 10px;            

       
height: 10px;           

       
background-color: rgba(14, 66, 7, 4);            

       
border-radius: 100%;            

       
float: left;            

       
margin-right: 20px;            

       
border-style: solid;            

       
border-width: 0.1px;            

       
border-color: rgba(0, 0, 0, 0.5);            

       
cursor: pointer;            

       
/*鼠标移动到产生小手指*/        

       
}

js轮播图

插入小圆点以后的效果就是这样。

（8）小圆点是用来展示相应的图片，第几个小圆点就代表当前播放第几个图片，与之前的go系列函数有着异曲同工之妙，我们先设置小圆点的active属性：


.point.active {    background-color: white;}

当前图片的小圆点背景颜色会变成白色的。当前图片小圆点变成白色以后，要将上一个小圆点还原成原有的黑色，逻辑方法如同之前的clear函数，此处不再赘述。

（9）index参数表示第几张图片正在显示，所以我们将小圆点赋予index的数据


       
<ul class="pointList">            

       
<li class="point active"
data-index="0"></li>

       
<!--在标签中存上图片相应的编号-->            

       
<li class="point"
data-index="1"></li>            

       
<li class="point"
data-index="2"></li>       


       
</ul>

（10）对小圆点函数进行设计，与按钮函数设计相似，点击哪个点，则那个点的item属性就变成active，即跳转到那张图片，之前的point属性也要全部还原：

var points = document.getElementsByClassName('point');        
for (var i = 0; i < points.length; i++) {           
points[i].addEventListener('click', function() {
                var pointIndex =
this.getAttribute('data-index');
index = pointIndex;
goIndex();
})
}

js轮播图

（11）最后就是加上计时器，让图片在用户没有操作的时候自动轮播。设置成每（100*20）ms就自动切换一次图片，为了使用户有更好的交互体验，time在用户没有进行操作的时候就一直在加，当用户点击按钮以后就清零重新计数（在point函数后面加time=0）。

var time = 0; //定时器图片跳转参数
setInterval(function() {               
	time++;                
if (time == 20) {                   
	goNext();                    
	time = 0;                
	}            
}, 100); //定时器自动轮播100ms跳转一次

完整代码如下：

<!DOCTYPE html><html>

<head lang="en">    

<meta charset="UTF-8">    

<style>        

.wrap {            width: 500px;            height: 500px;            margin: 0 auto;        }                

img {            width: 500px;            height: 500px;        }                

.list {            width: 500px;            height: 500px;            list-style: none;            position: relative;            padding-left: 0px;        }                

.item {            position: absolute;            /*将图片叠加在同一个区域*/            width:
100%;            height: 100%;            opacity: 0;            transition: all.5s;        }                

.btn {            width: 50px;            height: 50px;            position: absolute;            top: 250px;            border-radius: 100%;            border-color: white;            border-width: 0.1px;            background-color: rbga(128, 128,
128, 10);            z-index: 100;        }                

.btn:hover {            background-color: lightcyan;        }                

#goPre {   
        left: 515px;        }                

#goNext {            right: 515px;        }                

.item.active {            opacity: 1;            z-index: 10;        }                

.pointList {            padding-left: 0;            list-style: none;            position: absolute;            right: 510px;            bottom: 230px;            z-index: 100;        }                

.point {            width: 10px;            height: 10px;            background-color: rgba(14, 66, 7,
4);            border-radius: 100%;            float: left;            margin-right: 20px;            border-style: solid;            border-width: 0.1px;            border-color: rgba(0, 0, 0,
0.5);            cursor: pointer;            /*鼠标移动到产生小手指*/        }                

.point.active {            background-color: white;        }   


</style>

</head>

<body>    

<div class="wrap">        

<!--轮播图部分-->        

<ul class="list">            

<li class="item
active"><img class="lunbo"
src="11.jpg"></li>           


<li class="item"><img
class="lunbo" src="22.jpg"></li>            

<li class="item"><img
class="lunbo" src="33.jpg"></li>        

</ul>        <ul
class="pointList">           


<li class="point active"
data-index="0"></li>            

<li class="point" data-index="1"></li>            

<li class="point"
data-index="2"></li>       
</ul>
<button type="button" class="btn"
id="goPre"><</button>      
<button type="button" class="btn"
id="goNext">></button>
</div>

   
<script type="text/javascript">        

   
var items = document.getElementsByClassName('item'); //图片        

   
var goPreBtn = document.getElementById('goPre');        

   
var goNextBtn = document.getElementById('goNext');        

   
var index = 0;

var clearActive = function() {          


        
for (var i = 0; i < items.length; i++) {                

        
items[i].className = 'item'; //把要展示的图片之外的属性都变成只有item没有active                

        
points[i].className = 'point'; //相应的小圆点也变成point

           


           
}        }

 

       
var goIndex = function() { 

       
//调用goindex函数来实现当前图片的展示            

       
clearActive();           

        
points[index].className = 'point active';            

        
items[index].className = 'item active';        }

       
var goNext = function() {           


       
if (index < 2) {               


       
index++;            } 

       
else {                

       
index = 0;                

       
//数组只有0-4，这样可以循环播放

         
} 

          goIndex();        

         
}                         

                                               


       
goNextBtn.addEventListener('click', function() {            

       
goNext();        

       
})

       
var goPre = function() {           


       
if (index >= 1 && index <= 2) {                

       
index--;            

       
} else if (index == 0) {               


       
index = 2;            

       
}            

       
goIndex();        

       
}        

       
goPreBtn.addEventListener('click', function() {            

       
goPre();        })

      


       
var points = document.getElementsByClassName('point'); //点        

       
for (var i = 0; i < points.length; i++) {            

       
points[i].addEventListener('click', function() {                

       
var pointIndex = this.getAttribute('data-index');                

       
index = pointIndex;               


       
goIndex();                

       
time = 0;            

       
})        

       
}

       
var time = 0; //定时器图片跳转参数

       
setInterval(function() {           


       
time++;            

       
if (time == 20) {                

       
goNext();                

       
time = 0;            

       
}        

       
}, 100); //定时器自动轮播100ms跳转一次    </script>

</body>

</html>

js轮播图

样式定位设计

script函数控制图片播放

VISIO怎么绘制办公室平面图?

iMindMap思维导图怎么制作3D视图?

899元小米空气净化器开箱图赏

售价899元小米空气净化器全面体验(视频/图)

JS温故而知新之变量提升和时间死区

爱奇艺免费vip怎么获取爱奇艺免费vip会员获取教程图

学习node.js 断言的使用详解

node.js实现微信开发之获取用户授权

express.js中间件说明详解

详解基于React.js和Node.js的SSR实现方案

js轮播图

样式定位设计

script函数控制图片播放

VISIO怎么绘制办公室平面图?

iMindMap思维导图怎么制作3D视图?

899元小米空气净化器开箱图赏

售价899元小米空气净化器全面体验(视频/图)

JS温故而知新之变量提升和时间死区

爱奇艺免费vip怎么获取 爱奇艺免费vip会员获取教程图

学习node.js 断言的使用详解

node.js实现微信开发之获取用户授权

express.js中间件说明详解

详解基于React.js和Node.js的SSR实现方案

爱奇艺免费vip怎么获取爱奇艺免费vip会员获取教程图