image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
.slider {
/* width: 760px; */
width: 80%;
border: 1px #708090 solid;
padding: 10px 20px;
height: 130px;
margin: 100px auto;
position: relative;
cursor: pointer;
min-width: 620px;
}
#slider_pic {
/* width: 630px; */
/* width: 70%; */
min-width: 500px;
margin: 0 auto;
overflow: hidden;
height: 130px;
position: relative;
background-color: #daa520;
}
.prev,
.next {
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
top: 60px;
background-color: #daa520;
text-align: center;
line-height: 20px;
font-weight: bold;
color: #fff;
user-select: none;
display: none;
}
.next {
right: 2%;
}
.no_click {
background-color: #808080;
}
#slider_pic li {
float: left;
margin-right: 10px;
border: 1px solid red;
}
#slider_pic ul {
position: absolute;
left: 0;
}
#slider_pic ul li img {
width: 100px;
height: 130px;
}
</style>
</head>
<body>
<div class="slider">
<span class="prev" id="prev"><<</span>
<span class="next" id="next">>></span>
<div id="slider_pic">
<ul>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/1231571400_-1521539850.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/1150988978_1109774436.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/1231571400_-1521539850.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/1231571400_-1521539850.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/1231571400_-1521539850.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/1231571400_-1521539850.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/257742608_1593433674.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/257742608_1593433674.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/257742608_1593433674.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/257742608_1593433674.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
<li>
<img
src="https://ms.bdimg.com/pacific/0/pic/257742608_1593433674.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
/>
</li>
</ul>
</div>
</div>
</body>
</html>
<script src="./jquery1.42.min.js"></script>
<script>
$(function () {
var oPic = $("#slider_pic").find("ul");
var oImg = oPic.find("li");
var oLen = oImg.length + 1;
var oLi = oImg.width();
var prev = $("#prev");
var next = $("#next");
var emptyDiv = 3; //填补
var itemWidth = 100; //一个item的宽度
oPic.width(oLen * itemWidth); //计算总长度
var iNow = 0;
var iTimer = null;
prev.click(function () {
if (iNow > 0) {
iNow--;
}
ClickScroll();
});
next.click(function () {
if (iNow < oLen - emptyDiv) {
iNow++;
}
ClickScroll();
});
function ClickScroll() {
// iNow == 0 ? prev.addClass("no_click") : prev.removeClass("no_click");
// iNow == oLen - emptyDiv
// ? next.addClass("no_click")
// : next.removeClass("no_click");
oPic.animate({
left: -iNow * itemWidth,
});
}
function getCompareWidth() {
// 箭头的显示与隐藏(item总宽度大于可视区域宽度时)
if (oPic.width() >= $("#slider_pic").width()) {
$(".prev").css({ display: "block" });
$(".next").css({ display: "block" });
} else {
$(".prev").css({ display: "none" });
$(".next").css({ display: "none" });
}
//设置可视区域的宽度
$("#slider_pic").css({ width: 80 + "%" });
//不同分辨率下，边界值
emptyDiv = ($("#slider_pic").width() / itemWidth).toFixed() * 1;
}
// 获取分辨率
getCompareWidth();
window.onresize = function (e) {
getCompareWidth();
};
});
</script>
