{
"
_id
"
: ObjectId(
"
5a962b52b00ffc514038faf7
"
),
"
_class
"
:
"
com.xuecheng
.framework.domain.cms.CmsTemplate
"
,
"
siteId
"
:
"
5a751fab6abb5044e0d19ea1
"
,
"
templateName
"
:
"
首页
"
,
"
templateParameter
"
:
""
,
"
templateFileId
"
:
"
5a962b52b00ffc514038faf5
"
}
<!DOCTYPE html>
<html lang
=
"
en
"
>
<head>
<meta charset
=
"
UTF
‐
8
"
>
<title>Title</title>
<link rel=
"
stylesheet
"
href=
"
http://www.xuecheng
.com/plugins/normalize
‐
css/normalize.css
"
/>
<link rel=
"
stylesheet
"
href=
"
http://www.xuecheng
.com/plugins/bootstrap/dist/css/bootstrap
.css
"
/>
<link rel=
"
stylesheet
"
href=
"
http://www.xuecheng
.com/css/page
‐
learing
‐
index.css
"
/>
<link rel=
"
stylesheet
"
href=
"
http://www.xuecheng
.com/css/page
‐
header.css
"
/>
</head>
<body>
<div class
=
"
banner
‐
roll
"
>
<div class
=
"
banner
‐
item
"
>
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
bannerB.
jpg);
"
></div>
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
bannerA.
jpg);
"
></div>
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
banner3.
png);
"
></div>
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
bannerB.
jpg);
"
></div>
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
bannerA.
jpg);
"
></div>
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
banner3.
png);
"
></div>
</div>
<div class
=
"
indicators
"
></div>
</div>
<script type
=
"
text/javascript
"
src
=
"
http://www.xuecheng
.com/plugins/jquery/dist/jquery
.
js
"
>
</script>
<script type
=
"
text/javascript
"
src
=
"
http://www.xuecheng
.com/plugins/bootstrap/dist/js/bootstrap
.
js
"
></script>
<script type
=
"
text/javascript
"
>
var tg
=
$(
'
.banner
‐
item .item
'
);
var num =
0;
for (i =
0; i < tg
.length; i++) {
$(
'
.indicators
'
)
.append(
'
<span></span>
'
);
$(
'
.indicators
'
)
.find(
'
span
'
)
.eq(num)
.addClass(
'
active
'
);
}
function roll() {
tg
.eq(num)
.animate({
'
opacity
'
:
'
1
'
,
'
z
‐
index
'
: num
}, 1000)
.siblings()
.animate({
'
opacity
'
:
'
0
'
,
'
z
‐
index
'
: 0
}, 1000);
$(
'
.indicators
'
)
.find(
'
span
'
)
.eq(num)
.addClass(
'
active
'
)
.siblings()
.removeClass(
'
active
'
);
if (num >
=
tg
.length
‐
1) {
num =
0;
} else {
num++;
}
}
$(
'
.indicators
'
)
.find(
'
span
'
)
.click(function() {
num =
$(this)
.index();
roll();
});
var timer =
setInterval(roll, 3000);
$(
'
.banner
‐
item
'
)
.mouseover(function() {
clearInterval(timer)
});
$(
'
.banner
‐
item
'
)
.mouseout(function() {
timer =
setInterval(roll, 3000)
});
</script>
</body>
</html>
{
"
id
"
:
"
5a791725dd573c3574ee333f
"
,
"
name
"
:
"
轮播图
"
,
"
model
"
: [
{
"
key
"
:
"
banner1
"
,
"
name
"
:
"
轮播图1地址
"
,
"
url
"
: null,
"
mapValue
"
: null,
"
value
"
:
"
http://www.xuecheng
.com/img/widget
‐
bannerB.
jpg
"
},
{
"
key
"
:
"
banner2
"
,
"
name
"
:
"
轮播图2地址
"
,
"
url
"
: null,
"
mapValue
"
: null,
"
value
"
:
"
http://www.xuecheng
.com/img/widget
‐
bannerA.
jpg
"
},
{
"
key
"
:
"
banner3
"
,
"
name
"
:
"
轮播图3地址
"
,
"
url
"
: null,
"
mapValue
"
: null,
"
value
"
:
"
http://www.xuecheng
.com/img/widget
‐
banner3.
jpg
"
}
]
}
<!DOCTYPE html>
<html lang
=
"
en
"
>
<head>
<meta charset
=
"
UTF
‐
8
"
>
<title>Title</title>
<link rel=
"
stylesheet
"
href=
"
http://www.xuecheng
.com/plugins/normalize
‐
css/normalize.css
"
/>
<link rel=
"
stylesheet
"
href=
"
http://www.xuecheng
.com/plugins/bootstrap/dist/css/bootstrap
.css
"
/>
<link rel=
"
stylesheet
"
href=
"
http://www.xuecheng
.com/css/page
‐
learing
‐
index.css
"
/>
<link rel=
"
stylesheet
"
href=
"
http://www.xuecheng
.com/css/page
‐
header.css
"
/>
</head>
<body>
<div class
=
"
banner
‐
roll
"
>
<div class
=
"
banner
‐
item
"
>
<#if model??>
<#list model as item>
<div class
=
"
item
"
style
=
"
background
‐
image: url(${item.value});
"
></div>
</#list>
</#if>
<#
‐‐
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
bannerA.
jpg);
"
></div>
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
banner3.
png);
"
></div>
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
bannerB.
jpg);
"
></div>
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
bannerA.
jpg);
"
></div>
<div class
=
"
item
"
style
=
"
background
‐
image: url(
../img/widget
‐
banner3.
png);
"
></div>
‐‐
>
</div>
<div class
=
"
indicators
"
></div>
</div>
<script type
=
"
text/javascript
"
src
=
"
http://www.xuecheng
.com/plugins/jquery/dist/jquery
.
js
"
>
</script>
<script type
=
"
text/javascript
"
src
=
"
http://www.xuecheng
.com/plugins/bootstrap/dist/js/bootstrap
.
js
"
></script>
<script type
=
"
text/javascript
"
>
var tg
=
$(
'
.banner
‐
item .item
'
);
var num =
0;
for (i =
0; i < tg
.length; i++) {
$(
'
.indicators
'
)
.append(
'
<span></span>
'
);
$(
'
.indicators
'
)
.find(
'
span
'
)
.eq(num)
.addClass(
'
active
'
);
}
function roll() {
tg
.eq(num)
.animate({
'
opacity
'
:
'
1
'
,
'
z
‐
index
'
: num
}, 1000)
.siblings()
.animate({
'
opacity
'
:
'
0
'
,
'
z
‐
index
'
: 0
}, 1000);
$(
'
.indicators
'
)
.find(
'
span
'
)
.eq(num)
.addClass(
'
active
'
)
.siblings()
.removeClass(
'
active
'
);
if (num >
=
tg
.length
‐
1) {
num =
0;
} else {
num++;
}
}
$(
'
.indicators
'
)
.find(
'
span
'
)
.click(function() {
num =
$(this)
.index();
roll();
});
var timer =
setInterval(roll, 3000);
$(
'
.banner
‐
item
'
)
.mouseover(function() {
clearInterval(timer)
});
$(
'
.banner
‐
item
'
)
.mouseout(function() {
timer =
setInterval(roll, 3000)
});
</script>
</body>
</html>
@Autowired
RestTemplate restTemplate;
@RequestMapping(
"
/banner
"
)
public String index_banner(Map<String, Object> map){
String dataUrl =
"
http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f
"
;
ResponseEntity<Map> forEntity
= restTemplate.
getForEntity(dataUrl, Map
.class);
Map body
= forEntity
.
getBody();
map
.
putAll(body);
return
"
index_banner
"
;
}
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |