实现图片更换效果:
1.引入插件库:
<script type="text/javascript" src="${base}/resources/shop/js/jquery.slides.min.js"></script>
2.css定义样式:
<style>
#slides {
display: none
}
#slides .slidesjs-navigation {
margin-top:5px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
display:none;
}
a.slidesjs-next {
display:none;
}
a:hover.slidesjs-next {
display:none;
}
a.slidesjs-previous {
display:none;
}
a:hover.slidesjs-previous {
display:none;
}
a.slidesjs-play {
display:none;
}
a:hover.slidesjs-play {
display:none;
}
a.slidesjs-stop {
display:none;
}
a:hover.slidesjs-stop {
display:none;
}
.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 10px;
height: 10px;
padding: 0px 3px;
background: transparent url(${base}/resources/shop/images/dot.png) no-repeat center top;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 50% -9px;
}
.slidesjs-pagination li a:hover {
background-position: 50% -9px;
}
#slides a:link,
#slides a:visited {
color: #333
}
#slides a:hover,
#slides a:active {
color: #9e2020
}
</style>
3.js滑动事件:
(当有多个div滑动可以定义多个slides)
script type="text/javascript">
$(function() {
$('#slides').slidesjs({
width: 940,
height: 380,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides1').slidesjs({
width: 940,
height: 380,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
</script>
4.div图片展示:
<div class="storeinfoimagediv" id="slides" >
<a><img src="${base}/resources/shop/images/meiwu1.jpg" class="storeinfoimage"/></a>
<a><img src="${base}/resources/shop/images/meiwu2.jpg" class="storeinfoimage"/></a>
</div>
<div class="storeinfoimagediv" id="slides1">
<a><img src="${base}/resources/shop/images/gaoding1.jpg" class="storeinfoimage"/></a>
<a><img src="${base}/resources/shop/images/gaoding2.jpg" class="storeinfoimage"/></a>
</div>