效果图
正常的滑动轮播图在换到末尾时会有一个大的回滚，转移到第一张图片。这样给客户的视觉冲击十分的不好，所以我给大家分享一下原创的无缝轮播图。
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</titl
<style>
.lun{
width:100%;
min-width: 1200px;
}
.lun .main{
position: relative;
overflow: hidden;
}
.lun .lun_bo{
overflow: hidden;
position: absolute;
}
.lun .lun_bo:hover{
cursor: pointer;
}
.lun .lun_bo img{
display: block;
float:left;
}
.lun .btn_demo{
width:100%;
height:100px;
background: rgba(0,0,0,0.5);
position:absolute;
bottom: 0;
left:0;
z-index: 1000;
}
.lun .btn_disc{
overflow: hidden;
text-align: center;
}
.lun .desc{
color: #fff;
text-align: center;
font-size: 20px;
margin: 15px;
}
.lun a{
width:15px;
height:15px;
background: #fff;
border-radius: 50%;
margin: 5px;
display: inline-block;
}
.lun a:hover{
cursor: pointer;
}
.lun .direct{
background: transparent;
position: absolute;
top: 200px;
height: 30px;
line-height: 25px;
text-align: center;
font-size: 40px;
padding: 3px;
border: 4px solid #fff;
color: #fff;
font-weight: 700;
display: none;
}
.lun .left{
left:70px;
}
.lun .right{
right:70px;
}
.lun .direct:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="lun">
<div class="main">
<div class="lun_bo">
<img src="../images/lun5.png" alt="">
<img src="../images/lun1.png" alt="">
<img src="../images/lun2.png" alt="">
<img src="../images/lun3.png" alt="">
<img src="../images/lun4.jpg" alt="">
<img src="../images/lun5.png" alt="">
<img src="../images/lun1.png" alt="">
</div>
<div class="btn_demo">
<div class="desc"></div>
<div class="btn_disc">
<a id="1" class="circle"></a>
<a id="2" class="circle"></a>
<a id="3" class="circle"></a>
<a id="4" class="circle"></a>
<a id="5" class="circle"></a>
</div>
</div>
<div class="left direct"><</div>
<div class="right direct">></div>
</div>
</div>
<script src="../js/jquery.js"></script>
<script>
$(function(){
var scrollIndex = 1;
var $lunbo = $(".lun_bo");
var $circle = $(".circle");
var $main = $('.lun .main');
var isAnimated = false;
var len;
var arr = ["立德树人 知行合一",
"求是 筑基 勤勉 致用",
"实事求是 笃学诚行",
"博学 求真 惟恒 创新",
"历史学院召开本科教学专题会议"]
function init(){
// 动态设置轮播图的大小
var $m_width = $main.width();
$('.lun_bo>img').css("width",$m_width);
// 设置图片父容器的大小
$('.lun_bo').css("width",$m_width*7+"px");
// $('.lun_bo').css("left")
var $lun_height = $('.lun_bo').height();
$(".lun .main").css("height",$lun_height + "px");
// 设置轮播图初始的left
$('.lun_bo').css("left",-$m_width*scrollIndex +"px");
showCir();
showContent();
}
init();
$(window).on("resize load",function(){
init();
})
// 轮播图滚动
function lunShow(){
len = $('.lun .main').width();
$lunbo.animate({left:-len*scrollIndex+"px"},function(){
show();
});
}
function show(){
//right
if(scrollIndex <= 0){
$lunbo[0].style.left = -5*len+"px";
scrollIndex = 5;
}
//left
if(scrollIndex>=6){
$lunbo[0].style.left=-1*len+"px";
scrollIndex = 1;
}
showCir();
showContent();
isAnimated = false;
}
function showCir(){
$circle.css("background","#fff");
$circle.eq(scrollIndex -1).css("background","red");
}
function autoPlay(){
if(!isAnimated){
isAnimated = true;
scrollIndex++;
lunShow();
}
}
function showContent(){
$(".lun .desc").empty();
$(".lun .desc").append(arr[scrollIndex -1]);
}
$(".lun .left").on("click",function(){
if(!isAnimated){
isAnimated = true;
scrollIndex++;
lunShow();
}
})
$(".lun .right").on("click",function(){
if(!isAnimated){
isAnimated = true;
scrollIndex--;
lunShow();
}
})
$(".btn_disc>a").on("click",function(){
if(!isAnimated){
isAnimated = true;
scrollIndex=this.id;
lunShow();
}
})
var timer = setInterval(autoPlay,2000);
$main.on("mouseout",function(){
$(".lun .left").css("display","none");
$(".lun .right").css("display","none");
timer = setInterval(autoPlay,2000);
})
$main.on("mouseover",function(){
$(".lun .left").css("display","block");
$(".lun .right").css("display","block");
clearInterval(timer);
})
})
</script>
</body>
</html>