<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.swiper_box {
width: 750px;
height: 530px;
margin: 10px auto;
overflow: hidden;
}
.swiper_box .swiper_list {
list-style: none;
width: 9999px;
}
.swiper_box .swiper_list .swiper_list_item {
float: left;
background-color: #fff;
padding: 15px;
width: 250px;
}
.swiper_box .swiper_list .swiper_list_item .con {
width: 100%;
text-align: center;
}
.swiper_box .swiper_list .swiper_list_item .con .img_box {
width: 200px;
height: 200px;
margin: 0 auto;
/**border: 2px solid #226592;**/
border-radius: 50%;
overflow: hidden;
margin-bottom: 10px;
}
.swiper_box .swiper_list .swiper_list_item .con .img_box img {
width: 100%;
}
.swiper_box .swiper_list .swiper_list_item .con p {
width: 100%;
font-size: 16px;
font-weight: bold;
color: #005c99;
}
.swiper_box .swiper_list .swiper_list_item .con:first-child {
margin-bottom: 20px;
}
</style>
<div class="swiper_box">
<ul class="swiper_list clearfix">
<li class="swiper_list_item">
<div class="con">
<div class="img_box">
<img src="/images/img/1.jpg" />
</div>
<p>1111</p>
</div>
<div class="con">
<div class="img_box">
<img src="/images/img/2.jpg" />
</div>
<p>22222</p>
</div>
</li>
<li class="swiper_list_item">
<div class="con">
<div class="img_box">
<img src="/images/img/3.jpg" />
</div>
<p>3333</p>
</div>
<div class="con">
<div class="img_box">
<img src="/images/img/4.jpg" />
</div>
<p>44444</p>
</div>
</li>
<li class="swiper_list_item">
<div class="con">
<div class="img_box">
<img src="/images/img/5.jpg" />
</div>
<p>555555</p>
</div>
<div class="con">
<div class="img_box">
<img src="/images/img/6.jpg" />
</div>
<p>66666</p>
</div>
</li>
<li class="swiper_list_item">
<div class="con">
<div class="img_box">
<img src="/images/img/7.jpg" />
</div>
<p>7777</p>
</div>
<div class="con">
<div class="img_box">
<img src="/images/img/8.jpg" />
</div>
<p>8888</p>
</div>
</li>
<li class="swiper_list_item">
<div class="con">
<div class="img_box">
<img src="/images/img/9.jpg" />
</div>
<p>9999</p>
</div>
<div class="con">
<div class="img_box">
<img src="/images/img/10.jpg" />
</div>
<p>1010</p>
</div>
</li>
<li class="swiper_list_item">
<div class="con">
<div class="img_box">
<img src="/images/img/11.jpg" />
</div>
<p>111111</p>
</div>
<div class="con">
<div class="img_box">
<img src="/images/img/12.jpg" />
</div>
<p>12121212</p>
</div>
</li>
<li class="swiper_list_item">
<div class="con">
<div class="img_box">
<img src="/images/img/13.jpg" />
</div>
<p>131313</p>
</div>
<div class="con">
<div class="img_box">
<img src="/images/img/14.jpg" />
</div>
<p>141414</p>
</div>
</li>
<li class="swiper_list_item">
<div class="con">
<div class="img_box">
<img src="/images/img/15.jpg" />
</div>
<p>1515</p>
</div>
<div class="con">
<div class="img_box">
<img src="/images/img/16.jpg" />
</div>
<p>161616</p>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function () {
var left = $(".swiper_list_item").outerWidth()
function scroll() {
$(".swiper_list").animate({ "margin-left": "-"+left+"px" }, function () {
$(".swiper_list li:eq(0)").appendTo($(".swiper_list"));
$(".swiper_list").css({ "margin-left": 0 });
});
}
var scrolling = setInterval(scroll, 3000);
$('.swiper_list_item').hover(function () {
clearInterval(scrolling);
}, function () {
scrolling = setInterval(scroll, 3000);
});
})
</script>