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>

<!-- 首先引入jQuery和unslider -->
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/unslider.min.js"></script>

<!-- 最后用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>

<style>
ul, ol { padding: 0;}
.banner { position: relative; overflow: auto; text-align: center;}
.banner li { list-style: none; }
.banner ul li { float: left; }
#b04 { width: 640px;}
#b04 .dots { position: absolute; left: 0; right: 0; bottom: 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: 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标签  -->
    <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、启动项目一般就可以实现功能了！

图片轮播图插件的使用 unslider！！！的更多相关文章

  1. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  2. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  3. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  4. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  5. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  6. vue轮播图插件之vue-awesome-swiper

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...

  7. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  8. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  9. iOS 图片轮播图（自动滚动）

    iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...

随机推荐

  1. 在sharepoint2013中如使用PowerView

    在sharepoint2013中如使用PowerView 安装前提 Sql sqlserver 2012 sp1 Sharepoint2013 Sql server 2012 sp1 PowerPiv ...

  2. Linux安全基础：sed命令的使用

    sed 是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作. Sed本质上是一个编辑器,但是它是非交互式的,这点与VIM不同:同时 ...

  3. SharePoint 2013 托管导航及相关配置 <二>

    本文的思路是使用JQuery重写SharePoint自带托管导航的样式,其实思路和脚本都非常简单,引用一下JQuery脚本,然后重写导航的样式,把脚本放到母版页中,即可.当然,使用JQuery可以做很 ...

  4. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q112-Q115)

    Question  112 You are designing a public-facing SharePoint 2010 Web site for an elementary school th ...

  5. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  6. IOS开发基础知识--碎片27

    1:iOS中的round/ceil/floorf extern float ceilf(float); extern double ceil(double); extern long double c ...

  7. React Native开发入门

    目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下Reac ...

  8. databtables 设置（显示）行号

    var table = $('#priceStrategtyTable').DataTable({         "rowCallback": function( row, da ...

  9. RMAN异机还原遭遇ORA-19698错误案例

    实验环境:               操作系统    :Oracle Linux Server release 5.7 64 bit               数据库版本:Oracle Datab ...

  10. Django入门

    Django文档: https://docs.djangoproject.com/en/1.10/ref/ 一.简单创建app 1.1 命令行创建project和app. django-admin s ...