注意事项
- 假设 container 的宽度设置为 500px, li的宽度设置为100px, 则可视区域显示5个图片,此时ul 下应至少有5个开始的图片,中间图片个数随意,最后应追加 与最前面5个图片相同的图片。
看下图:
源码 运行一下看看
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- <script type="text/javascript" src="jquery-1.11.1.min.js"></script> -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
body{
padding:0;
margin: 0;
}
#container{
position: relative;
left: 200px;
top: 200px;
border: 1px solid red;
width: 500px;/* 视野可见的宽度, 如果可视范围内有3个li,li的宽度是100,则设置宽度大于300,小于400 */
height: 150px;
overflow: hidden;
}
#container ul {
border: 1px solid blue;
position: absolute;
width: 3500px; /* 需要设置足够宽,容纳所有的li */
height:100%;
margin:20px 0 0 0;
padding: 0;
}
#container ul>li{
list-style: none;
float: left;
position:relative;
}
.li_size{
width: 100px;
height: 100px;
}
#container img{
width: 100%;
height: 100%;
}
.enlargeLi{
width: 130px;
height:130px;
margin: -20px -15px 0 -15px;
z-index: 9;
}
</style>
<script>
var containerWidth ;//整个div的宽度
var lunboInterval = 2000;//轮播频率 毫秒
var slideInterval = 400; //li动画速度 毫秒
var liWidth = 0, imgNum = 0, visiableImgNum = 0;//li的宽度 //图片的个数 //可视区域的图片个数
var clickNum = 0, myleft = 0, toInitClickNum = 0;//点击次数 //距离左侧的绝对位置 //ul回归原始位置的点击次数
var midPos = 0;//可视区域内中间 li 的下标
$(function(){
containerWidth = $('#container').width();
liWidth = $("li").width();
console.log('liwidth'+liWidth);
imgNum = $('ul>li').length;
console.log('imgNum:'+imgNum);
visiableImgNum = $("#container").width() / liWidth;//可视区域的图片个数
toInitClickNum = imgNum - visiableImgNum;
console.log('toInitClickNum:'+toInitClickNum);
midPos = parseInt((containerWidth /liWidth -1 )/2);
// 设置可视范围内中间 li 的样式
$('ul').children().eq(midPos).addClass('enlargeLi');
setInterval(() => {
toright();
}, lunboInterval);
})
function changeMid(){
//ul归位
if(clickNum == 0){
$('ul').children().eq(midPos).addClass('enlargeLi');
$('ul').children().eq(toInitClickNum+1).removeClass('enlargeLi');//第二次出现第一个图片时,clickNum已经重置为0
}else if(clickNum > 0){
// ul正常移动
$('ul').children().eq(midPos+clickNum).addClass('enlargeLi');//给 中间 li 的增加样式
$('ul').children().eq(midPos+clickNum-1).removeClass('enlargeLi')//移除 中间左侧 li 的样式
}
}
function toright(){
clickNum++;
myleft = -1 * clickNum * liWidth;//距离外部div的距离
if(clickNum == toInitClickNum){//如果最后一个图已经出现了,ul恢复到初始位置(即 marginLeft=0)
$("ul").hide(); //先隐藏,否则动画像后退
$("ul").css({"margin-left": '0px'});
$('ul').show();//显示-此时ul距离左侧为100px
$("ul").animate({marginLeft: '0px'}, 100);
clickNum = 0;//点击次数归零
}else{
// 正常情况下的移动
$("ul").animate({marginLeft: '-=100px'}, slideInterval);
}
// 改变中间li的样式
changeMid();
}
</script>
</head>
<body>
<button style="display: none;" onclick="toright()">向右</button>
<div id="container">
<ul>
<li class="li_size"><img src="images/1.png" /></li>
<li class="li_size"><img src="images/2.png" /></li>
<li class="li_size"><img src="images/3.png" /></li>
<li class="li_size"><img src="images/4.png" /></li>
<li class="li_size"><img src="images/5.png" /></li>
<li class="li_size"><img src="images/6.png" /></li>
<li class="li_size"><img src="images/7.png" /></li>
<li class="li_size"><img src="images/8.png" /></li>
<li class="li_size"><img src="images/9.png" /></li>
<li class="li_size"><img src="images/10.png" /></li>
<!-- 可视区域默认有几个,结尾需要增加几个img,且和前几个图片一致 -->
<li class="li_size"><img src="images/1.png" /></li>
<li class="li_size"><img src="images/2.png" /></li>
<li class="li_size"><img src="images/3.png" /></li>
<li class="li_size"><img src="images/4.png" /></li>
<li class="li_size"><img src="images/5.png" /></li>
</ul>
</div>
</body>
</html>