jQuery实现异形轮播图

思路：

异形轮播图与普通轮播图不同的一点，是异形轮播图一次性展示多个图片，且图片大小的位置会动态变化。

以往我的处理办法都是直接给要展示的图片动态的添加一个class类，简单粗暴。这次我在很多地方都使用了数组思想和对象思想，比如arr中我放了正在展示的图片的索引值，并通过数组的pop()、push() 、shift()、unshift()方法实现arr数组中储存的图片索引值的动态删减，实现点击按钮就可以控制正在展示的图片的索引值。又比如在给每个li设置背景颜色background-color的时候，我没有使用传统css的方式（一方面想突破自己，一方面用css要写9个li的类名和background-color我想偷懒），我把所有li的背景色background-color放在了listStyle对象中，再通过for循环遍历把background-color绑定给对应的li。又比如classKind中我放了正在展示的5个li的类名，通过list.eq(arr[index]).addClass(classKind[index]);使得正在展示的图片添加对应的样式（宽高、位置、字体大小）。这里需要注意的是，在添加样式之前一定要用list.removeClass();来删除所有li之前的类名，不然的话会出现多个li绑定同一个class类名的情况，轮播几次后场面会相当混乱啦。最后，我们在实现点击按钮可以成功轮播后，可以在css中给li添加一个transition: all 1s;的过渡效果，这样就相当完美了。

源码：

<!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;list-style: none;}.app {width: 804px;height: 300px;margin: 0 auto;background-color: #eee;}.main {width: 804px;height: 160px;display: flex;justify-content: space-evenly;align-items: flex-end;position: relative;}.mid {width: 200px;height: 130px;background-color: #fff;}li {position: absolute;width: 120px;height: 80px;color: #fff;font-size: 60px;text-align: center;display: none;transition: all 1s;}.current {width: 180px;height: 120px;font-size: 90px;display: block;left: 312px;}.next-1, .pre-1 {width: 150px;height: 100px;font-size: 75px;display: block;}.next-1 {right: 148px;}.pre-1 {left: 148px;}.next-2 {width: 120px;height: 80px;font-size: 60px;display: block;}.next-2, .pre-2 {width: 120px;height: 80px;font-size: 60px;display: block;}.next-2 {right: 14px;}.pre-2 {left: 14px;}.control {width: 774px;height: 80px;margin: 0 auto;background-color: #fff;position: relative;}button {width: 40px;height: 40px;background-color: #ccc;border: none;cursor: pointer;position: absolute;top: 50%;margin-top: -20px;right: 10px;}span {display: inline-block;width: 0;height: 0;border: 16px solid transparent;}.btn-left span {border-right-color: #fff;}.btn-left {left: 10px;}.btn-right span {border-left-color: #fff;}</style>
</head>
<body><div class="app"><ul class="main"><li class="pre-2">1</li><li class="pre-1">2</li><li class="current">3</li><li class="next-1">4</li><li class="next-2">5</li><li>6</li><li>7</li><li>8</li><li>9</li><div class="mid"></div></ul><div class="control"><button class="btn-left"><span></span></button><button class="btn-right"><span></span></button></div></div><script src="/通用资源/jquery.js"></script><script>//声明变量var list = $('li');var goNext = $('.btn-right');var goPre = $('.btn-left');var index = 0;var arr = [0, 1, 2, 3, 4];var classKind =['pre-2', 'pre-1', 'current', 'next-1', 'next-2'];var lastmost = arr[arr.length-1];var foremost = arr[0];var listStyle = {0: 'lightgreen',1: 'yellow',2: 'orange',3: 'lightblue',4: 'pink',5: 'skyblue',6: 'lightcoral',7: 'khaki',8: 'plum',};//给每个li绑定样式for (var key in listStyle) {// console.log(key,listStyle[key]);list.eq(key).css({backgroundColor: listStyle[key]});};//封装切换页面函数function goPage() {list.removeClass();for (var index in arr) {for (var index in classKind) {list.eq(arr[index]).addClass(classKind[index]);};};};//下一张goNext.click(function() {arr.shift();lastmost++;if (lastmost > 8) {lastmost = 0;};arr.push( lastmost);// console.log(arr);goPage();});//上一张goPre.click(function() {arr.pop();foremost--;if (foremost < 0) {foremost = 8;};arr.unshift(foremost);// console.log(arr);goPage();});</script>
</body>
</html>

效果图：

jQuery实现异形轮播图

小插曲：

到今天为止，我的jQuery学习就告一段落了，由于jQuery现在企业中也用的少了，所以后面关于jQuery的实战可能就比较少了。我要开始学习JavaScript进阶了，作为信管专业的学生，从大一开始就难免会接触python、java、html等一些代码课，最开始接触的时候，我的感受是敲代码的人真的很酷，不够我是个渣滓哈，巨菜，连python基础的for循环、if条件语句啥的都搞不会，那时候一直在想“别人到底是怎么记住几十行代码的”，现在我的感受就是，没有人能记住那么多代码，学习编程正确方法不是靠记代码，而是在学习了基础知识的基础之上去思考和理解解决问题的思路。很感谢自己选择了自学前端开发，前端很有趣很适合我，会一直加油！