在前端中，这个在轮播图上的提示显示的背景怎么来做。

直接用轮播插件

举一个最常见的轮播图例子，五张轮播图 + 圆点指示器 + 左右箭头。

<!-- 首先引入jQuery和unslider -->

<script src="jquery-1.11.1.min.js"></script>

<script src="unslider.min.js"></script>

<!-- 写点样式，让轮播好看点 -->

<style>

ul, ol { padding: 0}

.banner { position: relativeoverflow: autotext-align: center}

.banner li { list-style: none}

.banner ul li { float: left}

#b04 { width: 640px}

#b04 .dots { position: absoluteleft: 0right: 0bottom: 20px}

#b04 .dots li

{

display: inline-block

width: 10px

height: 10px

margin: 0 4px

text-indent: -999em

border: 2px solid #fff

border-radius: 6px

cursor: pointer

opacity: .4

-webkit-transition: background .5s, opacity .5s

-moz-transition: background .5s, opacity .5s

transition: background .5s, opacity .5s

}

#b04 .dots li.active

{

background: #fff

opacity: 1

}

#b04 .arrow { position: absolutetop: 200px}

#b04 #al { left: 15px}

#b04 #ar { right: 15px}

</style>

<!-- 把要轮播的地方写上来 -->

<div class="banner" id="b04">

    <ul>

        <li><img src="01.jpg" alt="" width="640" height="480" ></li>

        <li><img src="02.jpg" alt="" width="640" height="480" ></li>

        <li><img src="03.jpg" alt="" width="640" height="480" ></li>

        <li><img src="04.jpg" alt="" width="640" height="480" ></li>

        <li><img src="05.jpg" alt="" width="640" height="480" ></li>

    </ul>

    <a href="javascript:void(0)" class="unslider-arrow04 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="20" height="35"></a>

    <a href="javascript:void(0)" class="unslider-arrow04 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="20" height="37"></a>

</div> <!-- 最后用js控制 -->

<script>

$(document).ready(function(e) {

    var unslider04 = $('#b04').unslider({

        dots: true

    }),

    data04 = unslider04.data('unslider')

     

    $('.unslider-arrow04').click(function() {

        var fn = this.className.split(' ')[1]

        data04[fn]()

    })

})

</script>

1、把要设置背景图片的页面设置为当前页面。把鼠标放到当前页面区域，出现下拉框，找到需要修改的页面，直接单击此页面就切换成当前页面。

2、单击页面设置当前页面背景，d出当前页面背景窗口。

3、在d出的当前页面背景窗口，切换到全屏幕轮播设置标签，从本地或者资料库中上传轮播图片。

4、最后点击保存按钮，就可以看到效果。

---