<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.father{
position: relative;
width: 1500px;
height: 450px;
left: 12%;
overflow: hidden;
}
.clearfix:after{
content: "";
clear: both;
display: block;
}
.son{
display: inline-block;
width: 6500px;
height: 450px;
overflow: hidden;
}
span{
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
color: white;
background: black;
}
.ht{
position: absolute;
left: 0px;
top: 45%;
z-index: 999;
}
.qj{
position: absolute;
left: 1475px;
top: 45%;
z-index: 999;
}
.jj{
display: inline-block;
width: 6500px;
height: 450px;
}
img:gt(1){
display: none;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<img src="image/T1AwdvBTxQ1RCvBVdK.jpg" alt="">
<img src="image/T1edYbB7Dv1RCvBVdK.jpg" alt="">
<img src="image/T1GpLbBjJv1RCvBVdK.jpg" alt="">
<img src="image/T1hcxQB4C_1RCvBVdK.jpg" alt="">
<img src="image/T1PoDjB7W_1RCvBVdK.jpg" alt="">
<img src="image/T1ttDsBsDT1RCvBVdK.jpg" alt="">
<img src="image/T1W.CsBgbv1RCvBVdK.jpg" alt="">
<img src="image/T13kJsB5Ev1RCvBVdK.jpg" alt="">
</div>
<span class="qj">></span>
<span class="ht"><</span>
</div>
</body>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$.extend({
one:function(){
//首先在原先第一张图片前面插入最后一张图片,使之成为第一张图片
var a = $("img:first").before($("img:last"));
//设置第一张图片的样式为-750px
a.css({"margin-left":"-750px"});
//设置第一个图片的动画
a.animate({
//每一次第一张图片向右移动
"margin-left": "0px"
}, 500,function(){
//恢复不是第一张图片的原始位置
$("img").eq(1).animate({
"margin-left": "0px"
},500);
})
},two:function(){
//实现思路使第一张图片向左移动
var a = $("img:first");
a.animate({
"margin-right":"-750px"
},500,function(){
//移除一张图片使之成为最后一张图片
$(".son").append(a);
//每次要恢复成为最后一张图片的原始位置
$("img:last").css({"margin-right":"0px"});
});
}
})
$(".qj").click(function(){
$.one();
})
$(".ht").click(function(){
$.two();
})
</script>
</html>
封装的多张轮播图片滚动插件
猜你喜欢
转载自blog.csdn.net/qq_41839784/article/details/89493354
今日推荐
周排行