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. JQ中的方法、事件及动画

    css( ) 除了可以为元素添加样式外,还可用来查询元素,某样式值alert($('.cls1').css('width')); //100px(返回带单位的值)注意:原生CSS样式中有-的去掉并且将 ...

  2. 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（七）地图打印模块

    config.xml文件的配置如下: <widget label="地图打印" icon="assets/images/map_print.png" co ...

  3. iOS中常见 Crash 及解决方案

    来源:枫影JustinYan 链接:http://justinyan.me/post/1609 一.访问了一个已经被释放的对象 在不使用 ARC 的时候,内存要自己管理,这时重复或过早释放都有可能导致 ...

  4. 比Ansible更吊的自动化运维工具，自动化统一安装部署自动化部署udeploy 1.0 版本发布

    新增功能: 逻辑与业务分离,完美实现逻辑与业务分离,业务实现统一shell脚本开发,由框架统一调用. 并发多线程部署,不管多少台服务器,多少个服务,同时发起线程进行更新.部署.启动. 提高list规则 ...

  5. JS实现HTML标签转义及反转义

    今天我用ueditor时候遇到一个问题: 我从数据库中读取内容进行编辑的时候,不是有一些html标签嘛,从数据库读出来没有问题: 但是我用asp.net mvc,把读取出来的内容通过ueditor的a ...

  6. nodejs 使用Google浏览器进行可视化调试——Node Inspector工具

    1.npm安装Node Inspector工具,全局安装 命令行执行npm install -g node-inspector 2.启动Node Inspector工具,命令行执行 node-insp ...

  7. Spark存储管理（读书笔记）

    Spark存储管理(读书笔记) 转载请注明出处:http://www.cnblogs.com/BYRans/ Spark的存储管理 RDD的存放和管理都是由Spark的存储管理模块实现和管理的.本文从 ...

  8. Windows Server 2012 虚拟化实战：域

    在Windows Server系统中,一些服务必需要构建在域的环境中,这不仅是为了统一验证和资源共享,同时也是为了网络安全.为构建虚拟化测试,我们需要先搭建域环境.之前先来大概了解一下域. 在使用工作 ...

  9. markdown简要说明源码

    ##markdown ###什么是markdown:    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.  Markdown具有 ...

  10. C# 注册表Regedit读写

    注册表的读写 1.读 public static string GetRegeditData() { //Win10 读写LocalMachine权限,没有访问权限 RegistryKey hkml ...