阿坝州网站建设公司

原生JS实现手动轮播图效果实例代码

手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等。。。

创新互联自2013年起，是专业互联网技术服务公司，拥有项目成都网站建设、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元新城做网站,已为上家服务,为新城各地企业和个人服务,联系电话:028-86922220

轮播图主要用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。

手动轮播，是小编认为最简单的一种轮播方式，既能左右翻页，还能通过悬浮按钮，快速预览图片，所以今天就给大家写一个原生js手动轮播图。

一，利用JavaScript制作手动轮播图，首先排版。

引入默认样式表（可以手写）；

//本博客有css默认样式表可以下载。

div排版布局：


 

 

 
<

 
 

 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    •

二，定义div的CSS样式，给div设置宽高，定位。


原生js代码：

HTML全部效果代码：



 
 
 手动轮播图
 
 
 
 
 
 

 

 
<

 
 

 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    •

效果图：

原生JS实现手动轮播图效果实例代码

原生JS实现手动轮播图效果实例代码

body{
background: darkturquoise;
}
#box{
height:320px;
width:480px;
margin: 3px auto;
border: 2px solid red;
}
#lunbo{
height: 292px;
width:453px;
border: 1px solid yellow;
margin: 0px auto;
position: relative;
}
#left{
height: 60px;
width: 60px;
font-size: 60px;
text-align: center;
line-height: 60px;
position: absolute;
top:150px;
left: 440px;
color: black;
}
#right{
height: 60px;
width: 60px;
font-size: 60px;
text-align: center;
line-height: 60px;
position: absolute;
top:150px;
left: 880px;
color: black;
}
#radiu{
height: 30px;
width: 240px;
text-align: center;
margin: 0px auto;
}
#radiu li{
float: left;
background: white;
height: 30px;
width: 30px;
line-height: 30px;
border-radius:50% ;
margin-right:6px;
}
.active{
background: orange;
color: ;
}

当前标题：原生JS实现手动轮播图效果实例代码
文章地址：http://azwzsj.com/article/psgjih.html

其他资讯