<div class="proscroll clearfix">
<ul class="proimg">
<li><a href="###"><img src="images/ind_22.jpg" alt="" /></a></li>
<li><a href="###"><img src="images/ind_37.jpg" alt="" /></a></li>
<li><a href="###"><img src="images/ind_39.jpg" alt="" /></a></li>
<li><a href="###"><img src="images/ind_59.jpg" alt="" /></a></li>
<li><a href="###"><img src="images/ind_62.jpg" alt="" /></a></li>
</ul>
<ul class="protitle">
<li><a href="###">循环式热泵水机组系列</a></li>
<li><a href="###">第二组</a></li>
<li><a href="###">第三组</a></li>
<li><a href="###">444444444444</a></li>
<li><a href="###">555555555555</a></li>
</ul>
<div class="pronum"></div>
<div class="nextpic">下一页</div>
</div>
样式
.proscroll{width:530px; height:368px; border:1px solid #ddd; float:left; overflow:hidden; margin:0 10px; position:relative;}
.proscroll .proimg{ position:absolute; top:0; left:0;}
.proimg li{ width:530px; height:368px;}
.proimg li a{display:block;}
.proimg li a img{width:100%; min-height:368px;}
.protitle{background:rgba(0,0,0,0.5); width:100%; height:40px; position:absolute; left:0; bottom:0;}
.protitle li a{ display:block; line-height:40px; color:#fff; padding-left:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.protitle li a:hover{color:#34d2d0;}
.pronum{ width:80px; position:absolute; right:0; bottom:16px; overflow:hidden;}
.pronum span{width:8px; height:8px; background:#fff; border-radius:50%; display:inline-block; margin-right:4px; text-indent:-100px;}
.pronum .ddcur{ background:#34d2d0 !important;}
.nextpic{position:absolute; bottom:20px; left:40px; background:red; width:50px; height:30px; z-index:999; cursor:pointer; display:none;}
jq
//********************首页产品轮播开始********************//
//确定轮播小点个数
var plen = $(".proimg li").length;
for(var a=0;a<plen;a++){
$(".pronum").append("<span>"+a+"</span>");
}
//全局变量
var i=0;
var plength = $(".proimg li").length;
var everytime = 2000;//切换时间
$(function(){
$(".proimg li").eq(i).show().siblings().hide();
$(".protitle li").eq(i).show().siblings().hide();
$(".pronum span").eq(i).addClass("ddcur").siblings().removeClass("ddcur");
//点击
$(".nextpic").click(function(){
i++;
if(i==plength){
i=0;
}
proShow();
});
//上浮停止轮播
$(".proimg li").hover(function(){
i=$(this).index();
proShow();
clearInterval(timer);
},function(){
startL();
});
startL();
});
//
function proShow(){
$(".proimg li").eq(i).fadeIn(200).siblings().fadeOut(200);
$(".protitle li").eq(i).show().siblings().hide();
$(".pronum span").eq(i).addClass("ddcur").siblings().removeClass("ddcur");
}
//自动轮播
function startL(){
timer=setInterval(function(){
i++;
if(i==plength){
i=0;
}
proShow();
},everytime);
}
//********************首页产品轮播结束********************//
![](https://i-blog.csdnimg.cn/blog_migrate/c744a1ca2ea9bca14d3267b99842e2b5.jpeg)