|
阅读：7944回复：2
如何使用原生js实现“滑动效果的轮播”分享
如下图：
图片：lunbo.png  上面是一个滑动效果的轮播：在我们自己用原生js实现时，在滑动效果的首尾连接的问题最大，下面分享下我的实现思路。 核心步骤如下： 1.改变margin-left来实现滑动效果。 2.再利用节点操作，在实现首尾的连接。 $("#imglist")[0].style.marginLeft="-200px";
$("#imglist").animate({marginLeft:"0px"},function(){
$("#imglist img").last().remove()//删除最后一个
$("#bigImg img").attr("src", $("#imglist img").first().attr('src'));
}); //进行移动下面分享一个自己写的DEMO注：没有写完，样式也比较丑，就不上效果图了。大家直接看代码的思路吧。 代码如下： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
#bigImg{
/*width: 1400px;*/
height: 530px;
margin: auto;
overflow: hidden;
text-align: center;
}
#bigImg img{
width: auto ;
height: 100%;
text-align: center;
}
#imgItem{
width: 90%;
margin: 0 auto;
}
#btnNext{
top:20px;
rihgt:20px;
}
#btnNext,#btnPrev{
position: absolute;
z-index: 2;
}
#imgItem{
position: relative;
overflow: hidden;
width: 100%;
height:180px;
overflow:hidden;
}
#imgItem ul li{
list-style-type: none;
width: 180px;
height: 180px;
float:left;
margin-left: 20px;
overflow: hidden;
/*border: 1px solid red;*/
position: relative;
z-index: 1;
margin-bottom:20px;
}
#imglist{
/*transition: all 1s linear;*/
width: 90%;
margin: auto;
position: absolute;
/*z-index: -1;*/
border: 2px solid green;
}
#imglist img{
width: 180px;
height: 180px;
margin-left: 20px;
}
#imgItem ul li {
background-color: transparent;
}
li.selected{
border: 5px solid white;
}
#imgItem ul{
overflow: hidden;
margin-bottom: 20px;
}
#imgItem{
background-color: #2d2c41;
}
</style>
<body>
<div id="lunbo">
<div id="bigImg">
<img src="img/1.jpg" alt="">
</div>
<div id="imgItem">
<a id="btnNext">Next</a>
<a id="btnPrev">Prev</a>
<div id="imglist">
<img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""><img
src="img/4.jpg" alt=""><img src="img/5.jpg" alt=""><img src="img/6.jpg" alt="">
</div>
<ul>
<li class="selected" data-index="0"></li>
<li data-index="1"></li>
<li data-index="2"></li>
<li data-index="3"></li>
<li data-index="4"></li>
<li data-index="5"></li>
</ul>
</div>
</div>
<script src="jquery.min.js"></script>
<script type="text/javascript">
var disIndex = 0;
$("#btnPrev").click(function(){
var imgList = $("#imglist img");
var len = $("#imglist img").length;
$("#imglist").append($("#imglist img").eq(0).clone()); //添加一个到最后
$("#imglist").animate({marginLeft:"-200px"},function(){
$("#imglist img").eq(0).remove()//删除第一个
$("#imglist")[0].style.marginLeft="0px";
$("#bigImg img").attr("src", $("#imglist img").first().attr('src'));
}); //进行移动
})
$("#btnNext").click(function () {
var imgList = $("#imglist img");
var len = $("#imglist img").length;
$("#imglist").prepend($("#imglist img").last().clone()); // 最后一个加到第一个
$("#imglist")[0].style.marginLeft="-200px";
$("#imglist").animate({marginLeft:"0px"},function(){
$("#imglist img").last().remove()//删除最后一个
$("#bigImg img").attr("src", $("#imglist img").first().attr('src'));
}); //进行移动
});
$("#imgItem ul li").click(function () {
var index = $(this).attr("data-index");
for(var i=0;i<index;i++){
$("#btnPrev").click();
}
})
</script>
</body>
</html> |
|
|
|
沙发#
发布于：2020-04-20 16:31
哈哈，后面优化哈，能使用这个思路就好，写的有点充忙，见谅了
|
|
|
