轮播图2

最新推荐文章于 2022-05-07 19:57:53 发布

mumu42

最新推荐文章于 2022-05-07 19:57:53 发布

阅读量176

点赞数

分类专栏：学习笔记

学习笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="static/js/jquery.js"></script>
<style>
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body{
background-color: lightgray;
}
.MarginDiv{
border: 1px solid green;
width: 1320px;
height: 245px;
overflow: hidden;
margin: 0px auto;
position: relative;
}
.MarginDiv ul{
list-style: none;
}
.MarginDiv ul li{
float: left;
width: 420px;
height: 240px;
margin: 0px 10px;
padding-top:10px ;
background-color: whitesmoke;
}
.MarginDiv ul:after{
display: block;
clear: both;
content: "";
}
.MarginDiv img {
width: 400px;
height: 220px;
display: block;
margin:0px auto;
}
</style>
</head>

<body>
<div class="MarginDiv">
<ul>
<li><a href="javascript:;"><img src="img/1.jpg"></a></li>
<li><a href="javascript:;"><img src="img/2.jpg"></a></li>
<li><a href="javascript:;"><img src="img/3.jpg"></a></li>
<li><a href="javascript:;"><img src="img/4.jpg"></a></li>
<li><a href="javascript:;"><img src="img/5.jpg"></a></li>
<li><a href="javascript:;"><img src="img/6.jpg"></a></li>
<li><a href="javascript:;"><img src="img/3.jpg"></a></li>
</ul>
</div>

<script>
$(function(){
var ul = $('.MarginDiv ul');
var lis = $('.MarginDiv ul').find('li');
//获取长度
lis.size();
//获取li的宽度（含有内外边距）；
lis.outerWidth(true);
//动态计算ul的宽度
$('.MarginDiv ul').width(lis.size()*lis.outerWidth(true))



// list轮动元素的父元素
// items轮动元素
// moveWidth移动的长度
// lastTime动画时间
// time动画间隔时间
function banner (list, items, moveWidth, lastTime, time) {
// 轮动元素
var arr = []
// 轮动元素的html值
var arrHtml = []
// 遍历轮动元素数组，并为上述变量赋值
$.each(items, function (i, v) {
arr.push(v)
arrHtml.push(v.innerHTML)
})
// 当前元素只有一个元素时，不进行轮播动画
if (arr.length === 1) {
return
}
// 定时器触发轮动动画
var inc = setTimeout(function () {
// 将第一个元素移动到最后
arr.push(arr.shift())
// 将第一个元素移动到最后
arrHtml.push(arrHtml.shift())
// 动画
list.animate({ left: moveWidth }, lastTime, function () {
// 将父级元素置空，并设置left为0
list.html('').css({ 'left': '0px' })
// 将arrHtml内容填充到轮动元素中，最后放到父元素中
arr.forEach(function (v, i) {
$(v).html(arrHtml[i])
list.append($(v))
})
banner(list, arr, moveWidth, lastTime, time)
})
}, time)
// 移除用on绑定的事件
list.find('img').off().on('mouseleave', function (et) {
banner(list, arr, moveWidth, lastTime, time)
}).on('mouseenter', function (et) {
clearTimeout(inc)
})
}
banner(ul, lis, '-420px', 200, 2000)
})
</script>
</body>
</html>