带左右按钮jquery轮播特效怎么写

答案:2 悬赏:70 手机版

解决时间 2021-04-05 20:13

提问者网友：戎马万世
2021-04-05 03:47

带左右按钮jquery轮播特效怎么写

最佳答案

五星知识达人网友：毛毛
2021-04-05 03:56

//我项目里面的轮播，可以参考。
<!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，看看slider教程，对这些有点了解。

全部回答

1楼网友：几近狂妄
2021-04-05 04:13

不知道

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息