最近项目用到bxSlider,它支持所有主流浏览器,并有淡入淡出效果。
例子:(也可以到我的云盘下载哦 http://yunpan.cn/cJXtMWAJz8btI 访问密码 2a35 官网 http://bxslider.com/)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="" content="" />
<title>响应式内容滑动插件bxSlider</title>
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css">
<style type="text/css">
.demo{clear:both; position:relative; margin:20px auto; width:80%}
ul.bxslider li img {margin: 0 auto; width:100%}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>
</head>
<body>
<div class="demo">
<ul class="bxslider">
<li><img src="images/1.png" /></li>
<li><img src="images/2.png" /></li>
<li><img src="images/3.png" /></li>
</ul>
</div>
</body>
</html>