开发工具与关键技术：vs code，JavaScript、jQuery、html、css
1、 思路：
最基本的轮播要怎样简化？如何拥有够好的扩展性？如何拥有够好的实用性？
2、html布局：
1、如图：
目的——首先明白移动层body类的作用：这个元素内包裹的元素就是移动的元素，当body这个类随意使用某个可移动的样式时，内容元素就会随着body类移动而移动；
问题（1）：当知道要移动body类就可以形成轮播的初步运作逻辑时，body类中的内容元素布局就会很关键！我们要将 内容元素 连着平铺在body这个类中！这个案例中，我给body类的样式改变了display，改成了flex，这样内容元素就会整个平铺在body类中。
如图：
2、如何将内容元素做到100%大小：
图中，给body类的宽度设定了1000%，每个内容元素设置为10%，直观看是10%，但是body类的宽度设为了1000%，也就是说内容元素的宽度10%是依照父元素也就是body类进行设置的。
所以！这里10%就是body类1000%里的100%（1000 / 10 = 100）
3、overflow给谁？为什么要给它？
都知道这个是关键，所以消除边界外的内容肯定是整个轮播的最外层的那个元素。
解释：在图中可看到移动层body类跟控制层clickbutton类被整个轮播内容类content类包裹，控制层也不是内容层那样是占用主力空间的元素。所以将overflow：hidden这个属性给在content类上，这样轮播的结构才是稳固的一体性的！
好处：轮播外的元素可以移入进来，轮播内的元素在轮播外看不见。
4、控制层和html结构拓展性说明
控制层是一部分刚入前端的小白所踩的坑。这里先重点说明：控制层千万千万千万别创建在移动层中，如果你要使用这篇文章说明的轮播效果，那么控制层绝对不能创建在移动层中！否则移动层设置属性值移动时控制层也会像内容元素一样跟着跑！
这里又涉及到结构扩展性的问题，够好的结构是可以明确分明 “一级” 跟 “二级” 元素的层级关系，这就是刚涉及前端的小白犯问题的地方，结构不正确！不正确的结构会导致css样式的设置出现问题，例如position定位的相对、绝对定位。
假设内容的主元素是一级元素，那么往下的直接子元素就是二级元素，二级元素往下的直接子元素就是三级，然后一直往下会有很多的子元素。
当我们将主元素设置为body类，那么body类就是一级元素，它的直接子元素是二级元素。二级元素跟二级元素是相同的也就是兄弟元素，都属于二级元素。
所以在结构上，控制层不能创建在移动层内，不然这里的控制层会被移动层当作是二级元素！当移动层内出现了控制层，控制层的兄弟元素将会是可移动的内容元素！移动层移动后，你要的控制元素可能会不可见！
5、移动层的样式问题
我们要让移动层动起来，肯定不能没有过渡属性，当然在js中使用jQuery里的animate方法设置属性达到动画效果也是可以的，animate的这种方法会在不间断轮播中用到。
首先要看我们的目的性：我们的目的不就是让移动层移动吗？所以给body类设置一个相对定位，再给一个transition属性，时间自定义。如图：
这里也有一个小误区：设置left的位置。
如果将left设置在style样式中，那么，你如果使用js去更改他的left值达到移动效果时，他会先将你设置的值给予在内联样式上，而不是直接更改style样式中的left值！这种的效果在未赋予left于内联样式上的时候会第一步赋予在内联样式上！这一步，没有过渡效果！使用jQuery或许就没有这种问题，为了保险我们还是将left值设置在内联样式上；
如图：
3、JavaScript部分
首先该理解的是当点击按钮时移动层的left值变动。
这里使用jQuery写法，为两个按钮绑定点击事件。这里#next为下一张，#prev为上一张。
绑定好事件后，设置关键的两个全局变量。
一个是index用于记录当前所在内容屏数。
另一个是num用于设定当前的移动距离，100%就是100，多少宽度就是设置多少宽度。
这两个几乎是所有轮播中必备的变量，一定不能忘了用！
图中没有写到，需要再来一个全局变量move，这个变量只需要创建就好值是空的也没问题
1、 点击按钮的事件内容
移动的内容只有这么点。
第一行代码：点击后，内容肯定要换到下一屏内容，所以记录屏数的index变量自加1不难理解。
第二行代码：move的这个变量，也需要是全局变量，因为这个变量就是记录着整个轮播的移动量！上一张和下一张都需要看这个值的多少。
第三行代码：最后将这个计算过后的move值替代left的值，那么点击“下一张”按钮后就可以看清楚运动轨迹了。
“#prev（上一张）”按钮的事件一样，只是将index自加改为了index–（自减）而已。
这里left的设置是设置body类（移动层）喔！不要设置错了！否则是搞大问题！
2、 最后一屏内容的处理
最后的处理点就是移动至最后一屏再次点击按钮后出现的内容。
如图：
通常处理就是加上if判定，判定内容是index（记录屏数的变量）是否等于最后一屏内容。
1-问：这一步的关键是明白index == 4 意味着什么？
1-答：意味着我们所见屏数来到了最后一屏内容，再次按下按钮需要回到第一屏或者最后一屏。
2-问：if判定为什么要放在事件的第一行？
2-答：因为这个判定的内容是判定index变量，所以必须放在index自减或自加的前面；最保险的就是放在第一行。
明白if判定的内容后，再看判定内执行的代码。
首先在脑内构思。在最后一屏内容，再次按下按钮触发了判定，我们需要将可见屏数调回第一屏或最后一屏，所以index 肯定是要重新设置。由于index是全局变量所以if内index值改变是会影响到click事件外的index值的，这也是全局变量的用处之一；
图中显示的是点击“下一张”的按钮所以，这里if内的index重新设置为0（第一屏数）然后将移动的主体代码重新放进if内就好了。
最后！如果不加上else将if外的代码包裹的话，那么这里if内的执行代码，在最后一定要return返回。不然会再次执行if判定外的代码！
“#prev（上一张）”的点击事件中的if判定跟图中的if判定的思路是一样的。同样是判定的最后一屏，更改返回的屏数。
技术点总结：怎么说，轮播的技术点参合了许多的知识点。是刚学前端的人必须跨过去的坎，轮播的形成方式有很多，不只限于这篇文章中的更改left值作为主轮播效果，也可以使用transform: translateX();来移动 “移动层”。再多说一句，轮播的html结构是很重要的！别以为只是单纯的js而已。
希望本篇文章能够帮到你；
源代码（直接复制后，别忘了引入jQuery）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础的轮播效果</title>
<!-- 样式 -->
<style>
body {
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
}
.body {
transition: all .5s;
width: 1000%;
display: flex;
position: relative;
}
[litem="causel"] {
width: 10%;
height: 320px;
text-align: center;
line-height: 280px;
font-size: 30px;
}
.img1 {
background-color: red;
}
.img2 {
background-color: yellow;
}
.img3 {
background-color: blue;
}
.img4 {
background-color: green;
}
.img5 {
background-color: orange;
}
.clickbutton {
display: flex;
justify-content: center;
}
.clickbutton>button {
margin: 0 50px;
width: 80px;
height: 50px;
}
</style>
</head>
<body>
<!-- 页面内容渲染 -->
<div class="content">
<!-- 移动层 -->
<div class="body" style="left: -0%;">
<div class="img1" litem="causel">1</div>
<div class="img2" litem="causel">2</div>
<div class="img3" litem="causel">3</div>
<div class="img4" litem="causel">4</div>
<div class="img5" litem="causel">5</div>
</div>
<!-- 控制层 -->
<div class="clickbutton">
<button id="prev">◀</button>
<button id="next">▶</button>
</div>
</div>
<!-- jQ引入 -->
<script src="./jquery-3.2.1.min.js"></script>
<!-- js部分 -->
<script type="text/javascript">
$(function () {
var index = 0;//记录当前内容
var num = 100//移动距离
var move
// 下一张
$("#next").click(function () {
if(index == 4){
index = 0
move = num*index
$(".body").css("left" , "-"+move+"%")
return
}
index++
move = num*index
$(".body").css("left" , "-"+move+"%")
});
// 上一张
$("#prev").click(function () {
if(index == 0){
index = 4
move = num*index
$(".body").css("left" , "-"+move+"%")
return
}
index--
move = num*index
$(".body").css("left" , "-"+move+"%")
});
})
</script>
</body>
</html>
1927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
