JavaScript实现图片轮播特效

今天给大家介绍下怎么用 JS 实现图片轮播效果。

原理描述：

使用JS实现轮播的原理是这样的：

假设初始的情况，下图一个网格代表一个图，初始时，显示1 ：

当进行一次轮播后，显示变为下图 显示2：

依次类推。

代码实现：

1 JS 代码：

2  HTML 代码：

3 CSS代码：

 *{
 margin:0px;
 padding:0px;
 }
 #outer{
 width:520px;
 height:500px;
 margin:50px auto;
 background-color:greenyellow;
 padding:10px 0;
  
 position:relative;
 overflow:hidden;
 
 }
 #imgList{
 
 list-style:none;
 
 position:absolute;
 
 
 }
 #imgList li{
 
 float:left;
 margin:0 10px;
 }
 #navId{
 
 position:absolute;
 
 bottom:15px;
 
 
 }
 #navId a{
 width:15px;
 height:15px;
 float:left;
 margin:0 5px;
 background-color:red;
 opacity:0.5;
 
 filter:alpha(opacity=50);
 }
 
 #navId a:hover{
 background-color:black;
 }
 

4 实现效果：

更多关于轮播图效果的专题，请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

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