<div class=”copr”>
<div class=”img_box”>
<a href=”javascript:void(0);”><img src=”20170519023851343.jpg” width=”570″ height=”266″ ></a>
<a href=”javascript:void(0);”><img src=”20170531034235698.jpg” width=”570″ height=”266″ ></a>
</div>
<div class=”gaol”>
<p class=”check”>
<a href=”javascript:;” class=””>1</a>
<a href=”javascript:;” class=””>2</a>
</p>
</div>
<input type=”hidden” id=”hfnum” value=”2″ />
</div>
.copr{ width:570px; height:266px; overflow:hidden; position:relative;}
.copr .gaol{ position:absolute; bottom:10px; right:10px; }
.copr .gaol .check a{border:1px solid #ccc; padding:2px 8px; display:inline-block; background-color:#FFF;}
.copr .gaol .check a.dd{ color:#FFF; border:1px solid #004b72; background-color:#004b72;}
$(function(){
var hfnum=$("#hfnum").val();
$('.img_box a').eq(0).show();
$('.check a').eq(0).addClass('dd');
//$('.title_box a').eq(0).show();
var num = 1;
var timer;
$('.check a').click(function(){
$(this).addClass('dd').siblings().removeClass('dd');
$('.img_box a').eq($(this).index()).fadeIn().siblings().hide();
//$('.title_box a').eq($(this).index()).fadeIn().siblings().hide();
num = $(this).index()+1;
})
function autoplay(){
if(num >= hfnum){
num = 0;
}
$('.check a').eq(num).addClass('dd').siblings().removeClass('dd');
$('.img_box a').eq(num).fadeIn().siblings().hide();
//$('.title_box a').eq(num).fadeIn().siblings().hide();
num++;
console.log(num);
}
timer = setInterval(autoplay,3000);
$('.copr a').mouseover(function(){
clearInterval(timer);
}).mouseout(function(){
timer = setInterval(autoplay,3000);
})
})
