图片轮播图插件的使用 unslider！！！

1、百度图片轮播图unslider，第一个就会出现jquery unslider轮播图，点击进去，下载网站提供的文件，解压，内部有我们需要使用的各种js,图片等。

2、在自己的eclipse或者intellij idea中搭建一个可以正常运行的web工程

3、在WEB-INF下创建一个jsp文件夹，jsp文件夹下创建一个lunbo.jsp，颜色标记的代码是需要注意的！在WebRoot下创建js和img文件夹，存放js和所需要的图片。

页面的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
</head>


<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/unslider.min.js"></script>


<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>

<style>
ul, ol { padding: 0;}
.banner { position: relative; overflow: auto; text-align: center;}
.banner li { list-style: none; }
.banner ul li { float: left; }
#b04 { 640px;}
#b04 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
#b04 .dots li
{
    display: inline-block;
    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: absolute; top: 200px;}
#b04 #al { left: 15px;}
#b04 #ar { right: 15px;}
</style>
<body>

<div class="banner" id="b04">
    <ul>
        <li><img src="${pageContext.request.contextPath}/img/01.jpg" alt="" width="640" height="480" ></li>
        <li><img src="${pageContext.request.contextPath}/img/02.jpg" alt="" width="640" height="480" ></li>
        <li><img src="${pageContext.request.contextPath}/img/03.jpg" alt="" width="640" height="480" ></li>
        <li><img src="${pageContext.request.contextPath}/img/04.jpg" alt="" width="640" height="480" ></li>
        <li><img src="${pageContext.request.contextPath}/img/05.jpg" alt="" width="640" height="480" ></li>
    </ul>
    <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="${pageContext.request.contextPath}/img/arrowl.png" alt="prev" width="20" height="35"></a>
    <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="${pageContext.request.contextPath}/img/arrowr.png" alt="next" width="20" height="37"></a>
</div>
</body>
</html>

4、写一个页面跳转，跳转到我们页面的轮播界面。

    @RequestMapping("/lunbo")
   public String lunBo(){

       return "lunbo";
   }

5、如果页面没有出先图片，注意静态资源不可以拦截，需要放行！

<context:component-scan base-package="cn.itcast.ssm.controller"></context:component-scan>
    
    <mvc:annotation-driven/>

    <mvc:resources mapping="/resources/**" location="/resources/"/>
    <mvc:resources mapping="/css/**" location="/css/"/>
    <mvc:resources mapping="/img/**" location="/img/"/>
    <mvc:resources mapping="/js/**" location="/js/"/>

    
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
      <property name="prefix" value="/WEB-INF/jsp/"></property>
      <property name="suffix" value=".jsp"></property>
    </bean>

6、启动项目一般就可以实现功能了！