横向手风琴轮播图（jquery）
以下是代码：鼠标移入展开
jQuery引入的是本公司的jquery.js、、这个可以自己下载
第一个是确定到底有几个可展开样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1300px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
#box {
width: 1200px;
height: 400px;
margin: 100px auto;
overflow: hidden;
}
#box ul {
width: 100%;
}
#box li {
height: 400px;
overflow: hidden;
border: 5px solid #fff;
box-sizing: border-box;
}
#box li:first-child {
width: 800px;
border-left: none;
}
#box li:last-child {
border-right: none;
}
#box li div {
width: 800px;
height: 400px;
background-size: cover;
background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F57f86b0c604e9.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650961821&t=0e97659b3d21ffb811dc4087d7a57648') !important;
}
/* li 标签的背景图，需要使用 js 代码动态添加 */
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<div>
<div></div>
</div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
</div>
<script src="https://pubunder.artron.net/library/js/jquery-1.12.4.min.js"></script>
<script>
// 获取所有的 li 标签
var $lis = $("#box ul li");
// 模拟后台提供的图片数据
var arr = ["fq1.jpg", "fq2.jpg", "fq3.jpg", "fq4.jpg", "fq5.jpg"];
// 记录文件路径
var path = "img/";
var during = 1000;
var widtheach = (1200 - 800) / ($lis.length - 1)
console.log(widtheach);
// 给每一个 li 去添加背景图
// 遍历方法
$lis.each(function (i) {
if (i == 2) {
$(this).css('width', 800)
} else {
$(this).css('width', widtheach)
}
// 存储路径
var url = "url(" + path + arr[i] + ")";
// this 指的是遍历的这一次的 li 元素
$(this).css("background-image", url);
})
// 给每个 li 标签添加鼠标进入事件，让自己的宽度变为 800，让其他的兄弟变为 100
$lis.mouseenter(function () {
$(this).stop(true).animate({
"width": 800
}, during)
.siblings().stop(true).animate({
"width": widtheach
}, during)
})
// 给最外层的大盒子添加鼠标离开事件，让所有的 li 恢复默认宽度
// $("#box").mouseleave(function () {
// $lis.stop(true).animate({
// "width": 240
// }, during)
// })
</script>
</body>
</html>
在不确定有几个的情况下 写的活的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1300px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
#box {
width: 1400px;
height: 400px;
margin: 100px auto;
overflow: hidden;
}
#box ul {
width: 100%;
}
#box li {
height: 400px;
overflow: hidden;
margin-right: 5px;
max-width: 800px;
}
#box li:first-child {
width: 800px;
border-left: none;
}
#box li:last-child {
border-right: none;
margin-right: 0px;
}
#box li div {
width: 800px;
height: 400px;
background-size: cover;
background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F57f86b0c604e9.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650961821&t=0e97659b3d21ffb811dc4087d7a57648') !important;
}
/* li 标签的背景图，需要使用 js 代码动态添加 */
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
</div>
<script src="https://pubunder.artron.net/library/js/jquery-1.12.4.min.js"></script>
<script>
// 获取所有的 li 标签
var $lis = $("#box ul li");
// 模拟后台提供的图片数据
var arr = ["fq1.jpg", "fq2.jpg", "fq3.jpg", "fq4.jpg", "fq5.jpg"];
// 记录文件路径
var path = "img/";
var during = 1000;
var widd = $lis.length - 1
var widtheach = (1400 - 800 - widd * 5) / widd
var widtheachnobig = (1400 - widd * 5) / $lis.length
console.log(widtheach);
// 给每一个 li 去添加背景图
// 遍历方法
$lis.each(function (i) {
if (i == 3) {
$(this).css('width', 800)
} else {
$(this).css('width', widtheach + 'px')
}
// // 存储路径
// var url = "url(" + path + arr[i] + ")";
// // this 指的是遍历的这一次的 li 元素
// $(this).css("background-image", url);
})
// 给每个 li 标签添加鼠标进入事件，让自己的宽度变为 800，让其他的兄弟变为 100
$lis.mouseenter(function () {
$(this).stop(true).animate({
"width": 800
}, during).siblings().stop(true).animate({
"width": widtheach + 'px'
}, during)
})
// 给最外层的大盒子添加鼠标离开事件，让所有的 li 恢复默认宽度
$("#box").mouseleave(function () {
$lis.stop(true).animate({
"width": widtheachnobig + 'px'
}, during)
})
</script>
</body>
</html>
浙公网安备 33010602011771号