图片轮播图插件的使用 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>
<!-- 首先引入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、启动项目一般就可以实现功能了!
最新文章
- excel导出字符串
- CoordinatorLayout+TabLayout+ViewPager
- 七个高效的文本编辑习惯(以Vim为例)
- redis常用操作总结
- dblink连接的目标端 session不断的问题。
- highcharts图表中级入门之xAxis label:X(横)坐标刻度值过长截断多行(换行)显示问题说明
- Web动画API教程2:AnimationPlayer和Timeline
- Mybatis 动态sql标签
- session过期时ajax请求刷新浏览器
- shell小程序
- JavaScript- The Good Parts CHAPTER 2
- C语言——打印魔方阵(每一行,每一列,对角线之和相等)
- Java DB 访问之 mybatis mapper xml 配置方式
- react~props和state的介绍与使用
- 持续代码质量管理-SonarQube-7.3简单使用
- Oracle高效分页查询(转)
- Linux 释放cache化缓存
- 动态规划-击爆气球 Burst Balloons
- 2017常见的50道java基础面试题整理(附答案)
- 关于怎么解决java.lang.NoClassDefFoundError错误
热门文章
- 原生js使用forEach()与jquery使用each遍历数组,return false 的区别
- SharePoint 2013 Designer系列之数据视图筛选
- 项目实战工具类(一):PhoneUtil(手机信息相关)
- 我的第一个React Native App
- Linux系统VNC配置实践总结
- 封装RabbitMQ.NET Library 的一点经验总结
- MongoDB学习笔记~数据结构与实体对象不一致时,它会怎么样?
- 今天发现一些很有意思的ubuntu命令
- 教你看懂 OpenStack 日志 - 每天5分钟玩转 OpenStack(29)
- android 发送短信功能