用JavaScript实现轮播图效果用JavaScript实现轮播图效果

本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下

文章图片

实现代码：

Title - 锐客网* {margin: 0; padding: 0; }ul {list-style: none; }#box {margin: 30px auto; width: 590px; height: 340px; position: relative; } #banner-list > li {position: absolute; left: 0; right: 0; opacity: 0; /*过渡动画*/transition: opacity 2s ease; } #left, #right {width: 30px; height: 60px; text-align: center; line-height: 60px; font-size: 24px; color: rgba(255,255,255,0.7); background-color: rgba(0,0,0,0.3); position: absolute; top: 50%; margin-top: -30px; z-index: 3; } #right {right: 0; } #tag-list {width: 130px; position: absolute; left: 50%; bottom: 8px; margin-left: -55px; } #tag-list > li {float: left; width: 18px; height: 18px; margin: 4px; text-align: center; line-height: 18px; font-size: 13px; background-color: white; border-radius: 9px; /*过渡动画*/transition: background-color 1s ease; }

文章图片

文章图片

文章图片

文章图片

文章图片

< >
1
2
3
4
5