如何用htHTML+CSS+JS实现如下图效果，即图片循环滚动播放
4个回答
展开全部
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title></title>
t>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<body>
<div id="banner_tabs" class="flexslider">
<ul class="slides">
<li>
<a>
<img width="1920" height="600" style="background: url(images/banner_1.jpg) no-repeat center;" src="images/alpha.png">
</a>
</li>
<li>
<a>
<img width="1920" height="600" style="background: url(images/banner_2.jpg) no-repeat center;" src="images/alpha.png">
</a>
</li>
<li>
<a>
<img width="1920" height="600" style="background: url(images/banner_3.jpg) no-repeat center;" src="images/alpha.png">
</a>
</li>
</ul>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="javascript:;">Previous</a></li>
<li><a class="flex-next" href="javascript:;">Next</a></li>
</ul>
<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
<li class="active"><a>1</a></li>
<li class=""><a>2</a></li>
<li class=""><a>3</a></li>
</ol>
</div>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
var bannerSlider = new Slider($('#banner_tabs'), {
time: 5000,
delay: 400,
event: 'hover',
auto:true,
mode: 'fade',
controller: $('#bannerCtrl'),
activeControllerCls: 'active'
});
$('#banner_tabs .flex-prev').click(function() {
bannerSlider.prev()
});
$('#banner_tabs .flex-next').click(function() {
bannerSlider.next()
});
})
</script>
</body>
</html>
==========================================
slider，jq自己下载，相信不用我教。
顺便可以看看教程，对这些有点了解。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jquery插件
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
去懒人图库搜一下把，这种特效很多的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
