JS原生轮播图

1.首先写好轮播图的HTML页面结构；

HTML结构

2.输写CSS的样式

CSS样式表

看起来好乱，为了方便展示CSS部分的代码，只能这样编排了；

效果图

      这是HTML加上CSS的页面效果图，这两个都是得心应手。

        现在就开始轮播图的重点，JS代码的编写了！！！

        自身对JS部分不是太熟，所以多练手

---

首先：先写出图片的前后运动，

然后：增加前面和后面到底的判断返回（含有索引，后面对焦点跟随有用）；

在每次调用go()后，再调用judge()

接着来写焦点跟随；

到了最后一步了，就是焦点定位，给每个焦点一个点击事件：

---

整体代码：

* { margin: 0; padding: 0;list-style-type: none; } .clearfix:before, .clearfix:after {content: '';display: block;visibility: hidden;clear: both;} .carousel__wrapper {position: relative;margin: 10px auto;width: 600px;height: 300px;} .carousel__wrapper .carousel {width: 100%;height: 300px;overflow: hidden;} .carousel__wrapper .carousel ul li {float: left;} .carousel__wrapper .carousel img {width: 600px;height: 300px;} .carousel__wrapper .items__wrapper {position: relative;} .carousel__wrapper .next, .carousel__wrapper .preview {position: absolute;top: 50%;margin-top: -20px;width: 40px;height: 40px;line-height: 40px;font-size: 32px;text-align: center;color: #fff;background-color: rgba(0, 0, 0, .4);border-radius: 2px;cursor: pointer;z-index: 20;} .carousel__wrapper .next:hover, .carousel__wrapper .preview:hover {background-color: rgba(0, 0, 0, .6);} .carousel__wrapper .next {right: 0;} .carousel__wrapper .preview {left: 0;} .carousel__wrapper .carousel__bottom {position: absolute;width: 100%;height: 60px;left: 0;bottom: 0;} .carousel__bottom ul {height: 60px;line-height: 60px;text-align: center;} .carousel__bottom li {display: inline-block;margin: 0 10px; width: 16px;height: 16px;line-height: 16px;border-radius: 50%;background-color: lightgreen;cursor: pointer;} .carousel__bottom li.active {width: 20px;background-color: red;border-radius: 16px;} < > var carouselWrapper = document.getElementsByClassName('carousel__wrapper')[0]; var itemsWrapper = document.getElementsByClassName('items__wrapper')[0]; var items = itemsWrapper.getElementsByTagName('li'); var next = document.getElementsByClassName('next')[0]; var preview = document.getElementsByClassName('preview')[0]; var focusWrapper = document.getElementsByClassName('focus__wrapper')[0] var foucsItems = focusWrapper.getElementsByTagName('li') var itemWidth = items[0].offsetWidth; var len = items.length; var index = 0; //焦点跟随符 itemsWrapper.style.width = itemWidth * len + 'px'; //计算设置ul的宽度 next.onclick = function() { go(-itemWidth) index++; judge() followFocus() } preview.onclick = function() { go(itemWidth) index--; judge() followFocus() } function go(offsetWidth) { itemsWrapper.style.left = parseInt(itemsWrapper.style.left) + offsetWidth + 'px' } function judge() { if(parseInt(itemsWrapper.style.left) <= -itemsWrapper.offsetWidth) { itemsWrapper.style.left = 0 } else if(parseInt(itemsWrapper.style.left) > 0) { itemsWrapper.style.left = -(itemsWrapper.offsetWidth - itemWidth) + 'px' } if(index > len - 1) { index = 0 } else if(index < 0) { index = len - 1 } } function followFocus() { for(var i = 0; i < foucsItems.length; i++) { foucsItems[i].className = '' } foucsItems[index].className = 'active' } for(var i = 0; i < foucsItems.length; i++) { foucsItems[i].onclick = function() { if(this.className == 'active') { return } else { var idx = this.getAttribute('index') index = idx itemsWrapper.style.left = idx * -itemWidth + 'px' followFocus() } } }

---

总结：

整个实现的过程有点急于快，所以代码可能有点粗糙，但功能还是能够做出来的！

下次实现的内容是JS的原生无缝轮播图！！