jquery实现简单自动轮播图效果

这篇文章主要为大家详细介绍了jquery实现简单自动轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jquery实现简单自动轮播图的具体代码，供大家参考，具体内容如下

代码：

    ul,li{ margin: 0; padding: 0; list-style: none; } #box{ width: 520px; height: 280px; margin: 100px auto; position: relative; } #box .list li{ position: absolute; top: 0; left: 0; display: none; } #box .list li.current{ display: block; } #box .count{ position: absolute; left: 10px; bottom: 10px; } #box .count li{ float: left; width: 20px; height: 20px; border-radius: 50%; background-color: #fa0; text-align: center; line-height: 20px; margin-left: 10px; color: #fff; opacity: 0.8; cursor: pointer; } #box .count li.current{ background-color: #f60; opacity: 1; } #box .btn{ position: absolute; bottom:10px; right: 15px; } #box .btn li{ width: 50px; height: 50px; background-color: #ccc; float: right; margin-left: 15px; opacity: 0.8; cursor: pointer; text-align: center; line-height: 50px; }   
 
 
1
2
3
4
5
 
>
<

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

以上就是jquery实现简单自动轮播图效果的详细内容，更多请关注本站其它相关文章！