如何用htHTML+CSS+JS实现如下图效果,即图片循环滚动播放

 我来答
百度网友330f355
推荐于2017-12-16 · TA获得超过298个赞
知道小有建树答主
回答量:133
采纳率:0%
帮助的人:67.3万
展开全部
<!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自己下载,相信不用我教。
顺便可以看看教程,对这些有点了解。
AmFy1
2016-08-27 · 超过21用户采纳过TA的回答
知道答主
回答量:140
采纳率:50%
帮助的人:27.1万
展开全部
jquery插件
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2016-08-27
展开全部
有插件可以实现的。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
我命如天不如妖
2016-08-27 · TA获得超过1250个赞
知道小有建树答主
回答量:1875
采纳率:0%
帮助的人:737万
展开全部
去懒人图库搜一下把,这种特效很多的
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 3条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式