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

如题所述

举报该文章

相关建议推荐于2017-12-16

<!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自己下载，相信不用我教。
顺便可以看看教程，对这些有点了解。

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/f247pqp42vvpv2p8mqq.html

其他看法

第1个回答 2016-08-27

jquery插件

第2个回答 2016-08-27

有插件可以实现的。

第3个回答 2016-08-27

去懒人图库搜一下把，这种特效很多的

相似回答

大家正在搜