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. 对kinderEditor 的空内容进行验证

    var con = document.getElementById(item.Id).value; var a = con.replace(/( )|[ ]|(<p>)|(<\/p& ...

  2. 如何调用外部的Web API

    Uri uri = new Uri(url + "?" + postData); System.Net.HttpWebRequest request = (System.Net.H ...

  3. scrollview 图片放大 捏合 瓦片地图 相关注意事项

    就职文博公司要为博物馆做APP 涉及到瓦片地图的编写 在这里总结一些开发中遇到的问题 (将会不断更新 也是学习阶段) 着急写项目的同学 可以直接看code4上现成的瓦片地图代码:http://www. ...

  4. Java Web中请求转发和请求包含

    1.都是在一个请求中跨越多个Servlet 2.多个Servlet在一个请求中,他们共享request对象.就是在AServle中setAttribute()保存数据在BServlet中由getAtt ...

  5. Android Hack1 使用weight属性实现视图的居中显示

    本文地址:http://www.cnblogs.com/wuyudong/p/5898403.html,转载请注明源地址. 如果要实现如下图所示的将按钮居中显示,并且占据父视图的一半,无论屏幕是否旋转 ...

  6. Sphinx安装配置应用

    Sphinx 是由俄罗斯人Andrew Aksyonoff开发的一个全文搜索引擎.意图为其他应用提供高速.地空间占用.高结果相关度的全文搜索功能.Sphinx可以非常容易的与SQL数据库和脚本语言集成 ...

  7. rails程序文件名命名规范

    1 一般文件名是用小写单词加下划线分割,但类的名字用骆驼法.例如 sessions_controller.rb中定义SessionsController. 2 helpers内的文件为辅助类,定义了许 ...

  8. C# Attribute学习

    由于项目中需要使用到序列化相关的技术,从而想到是否可以使用C#中的特性,特此花了近两小时学习了一下. 对于特性的学习,主要参考了两篇博文,特此感谢.以下附链接: http://www.cnblogs. ...

  9. Python爬虫代理池

    爬虫代理IP池 在公司做分布式深网爬虫,搭建了一套稳定的代理池服务,为上千个爬虫提供有效的代理,保证各个爬虫拿到的都是对应网站有效的代理IP,从而保证爬虫快速稳定的运行,当然在公司做的东西不能开源出来 ...

  10. mysql内置函数大全

    mysql 字符串函数用法集合 ASCII(str)返回字符串str的最左面字符的ASCII代码值. mysql> select ascii('d'); +------------+ | asc ...