<style type="text/css">
.slideBox {
width: 100%;
height: 200px;
border: 1px #c0c0c0 solid;
overflow: hidden
}
.slideBox img {
width: 100%;
height: 200px;
border: 0;
}
.slideBox li {
list-style-type: none;
}
</style>
<script type="text/javascript" src="jquery-1.9.1.min[1].js"></script>
<script type="text/javascript">
var index = 0;
setInterval(function() {
index++;
var $li = $("#slideBox").children("li");
if (index >= $li.length) {
index = 0;
}
$li.eq(index).stop(true, true).fadeIn().siblings().fadeOut();
}, 3000);
</script>
</head>
<body>
<div class="slideBox">
<ul id="slideBox">
<li><img src="images/product/banner_1.jpg" /></li>
<li><img src="images/product/banner_2.jpg" /></li>
<li><img src="images/product/banner_3.jpg" /></li>
<li><img src="images/product/banner_4.jpg" /></li>
</ul>
</div>
</body>jquery+css实现轮播效果
猜你喜欢
转载自blog.csdn.net/weixin_41796956/article/details/90712286
今日推荐
周排行