先上效果:
为什么效果图没办法发布?
多图片轮播
html代码:
<div class="showCountyHallLowerPhoto">
<div class="basicStyles">现场照片</div>
<!-- 左边尖括号图片 -->
<a class="leftImage">
<img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/left.png"/>
</a>
<!-- 轮播的图片 -->
<div class="box" style="display:inline-block;">
<ul class="picBox">
<li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/1.jpg"/></li>
<li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/2.jpg"/></li>
<li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/3.jpg"/></li>
<li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/4.png"/></li>
<li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/5.jpeg"/></li>
<li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/6.png"/></li>
<li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/7.jpg"/></li>
<li><img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/8.jpg"/></li>
</ul>
</div>
<!-- 右边尖括号图片 -->
<a class="rightImage">
<img src="static/stxcsjk/bacdb/detailfinancial/portlet/image/right.png"/>
</a>
</div>
css代码:
/*轮播图style*/
.box{
width:1000px;
height:150px;
margin:20px auto;
overflow:hidden;
position:relative;
}
.picBox{
position:absolute;
margin:0px;
padding:0px;
list-style:none;
width:2000px;}<!--此处很关键,在实现无疑轮播时这个宽度一定要比显示图片数量+1的宽度宽-->
.picBox:hover{
cursor:pointer;
}
.picBox li{
float:left;
}
.picBox img{
width:200px;
height:150px;
}
.leftImage img,.rightImage img{
padding:80px 40px;
}
js代码:
// <!--第一种图片轮播:非无缝轮播-->
function rollOne(){
$(".picBox").animate({right:"0"},"linear",function(){
var litag=$(this).find('li:last').remove().clone(true)
$(this).find('li:first').before(litag).fadeIn("slow");
});
}
function rollRight(){
$(".picBox").animate({left:"0"},"linear",function(){
$(this).find('li:first').remove().clone(true).appendTo(".picBox").fadeIn("slow");
});
}
var startRollOne=setInterval(rollRight,1000);
//<!--鼠标移入停止移出继续-->
$(".box").hover(function(){
clearInterval(startRollOne);
},function(){
startRollOne=setInterval(rollRight,1000);
});
$(".leftImage,.rightImage").hover(function(){
clearInterval(startRollOne);
},function(){
startRollOne=setInterval(rollRight,1000);
});
$(".leftImage").click(function(){
rollOne();
});
$(".rightImage").click(function(){
rollRight();
});
若有错误或者不足之处,欢迎指正