<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 420px;
height: 300px;
background-color: #bfa;
margin: 50px auto;
padding: 10px 0;
position: relative;
overflow: hidden;
}
#imgList {
list-style-type: none;
/* 开启定位移动 */
position: absolute;
/* 每次显示到下一张图片 420px */
/* left: -420px; */
}
#imgList li {
float: left;
margin: 0 10px;
}
#imgList img {
width: 400px;
height: 300px;
}
#navDiv {
position: absolute;
bottom: 15px;
/*
outer:宽度420
navDiv:(宽度 :超链接宽度+margin*2)*6个=15+10=25*6=150
420-150=270
270/2=135_不能写死
*/
/* left: 135px; */
}
#navDiv a {
float: left;
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.5;
/* 兼容IE8的半透明 */
filter: alpha(opacity=50);
}
#navDiv a:hover {
background-color: black;
}
#prev {
position: absolute;
bottom: 150px;
font-size: 12px;
text-align: center;
line-height: 15px;
text-decoration: none;
width: 15px;
height: 15px;
background: yellow;
float: left;
}
#next {
bottom: 150px;
position: absolute;
font-size: 12px;
text-align: center;
line-height: 15px;
text-decoration: none;
width: 15px;
height: 15px;
background: yellow;
left: 400px;
}
</style>
<script src="js/jquery-3.6.1.js"></script>
<script src="../javascript/tool动画.js"></script>
<script>
$(function () {
var $outer = $('#outer');
var $imgList = $('#imgList');
var $a = $('#navDiv>a');
var $next = $('#next');
var $prev = $('#prev');
var pageWidth = 420;//移动一页的宽度
var TIME = 400;//翻页持续时间
var ItemTime=20;//单元移动的间隔时间
//设置图片容器的宽度
$imgList.css('width', pageWidth * $imgList.children().length);
//点击向左向右的图标进行平滑翻页
$prev.click(function () {
nextPage(false); //是否翻到下一页
});
$next.click(function () {
nextPage(true); //是否翻到下一页 是下页
});
function nextPage(next) {
//得到当前的图片位置 然后进行偏移
//相对父元素左上角的坐标
var curLeft = $imgList.position().left;
//总偏移量 offest
var offest = next ? -pageWidth : pageWidth;
//目标位置偏移量
var targetLeft=curLeft+offest;
//总时间 TIME
//单元移动的间隔时间 ItemTime=20
//单元移动偏移量
var itemOffest=offest/(TIME/ItemTime);
//使用循环定时器--到达目标停止定时器
var num1= setInterval(function(){
//计算最新的left
curLeft+=itemOffest;//先增加 再判断
if(curLeft===targetLeft){//到达目标位置
clearInterval(num1);
}
//设置偏移
$imgList.css("left",curLeft);
},ItemTime)
};
})
</script>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li>
<img src="../img/a5.png" alt="图片">
</li>
<li>
<img src="../img/a0.png" alt="图片">
</li>
<li>
<img src="../img/a1.png" alt="图片">
</li>
<li>
<img src="../img/a2.png" alt="图片">
</li>
<li>
<img src="../img/a3.png" alt="图片">
</li>
<li>
<img src="../img/a4.png" alt="图片">
</li>
<li>
<img src="../img/a5.png" alt="图片">
</li>
<li>
<img src="../img/a0.png" alt="图片">
</li>
</ul>
<div id="navDiv">
<a href="javascript:;" class=""></a>
<a href="javascript:;" class=""></a>
<a href="javascript:;" class=""></a>
<a href="javascript:;" class=""></a>
<a href="javascript:;" class=""></a>
<a href="javascript:;" class=""></a>
</div>
<a href="javascript:;" id="prev">
< </a>
<a href="javascript:;" id="next"> > </a>
</div>
</body>
</html>
中间还存在些许问题 再后面会有改进 目前的效果和预想的一致
实现点击切换的步骤
function nextPage(next) {
//得到当前的图片位置 然后进行偏移
//相对父元素左上角的坐标
var curLeft = $imgList.position().left;
//总偏移量 offest
var offest = next ? -pageWidth : pageWidth;
//目标位置偏移量
var targetLeft=curLeft+offest;
//总时间 TIME
//单元移动的间隔时间 ItemTime=20
//单元移动偏移量
var itemOffest=offest/(TIME/ItemTime);
//使用循环定时器--到达目标停止定时器
var num1= setInterval(function(){
//计算最新的left
curLeft+=itemOffest;//先增加 再判断
if(curLeft===targetLeft){//到达目标位置
clearInterval(num1);
}
//设置偏移
$imgList.css("left",curLeft);
},ItemTime)
};