|
|
@@ -0,0 +1,67 @@
|
|
|
+window.onload = function () {
|
|
|
+ var focus = document.querySelector('.focus');
|
|
|
+ var arrow_l = document.querySelector('.arrow-l');
|
|
|
+ var arrow_r = document.querySelector('.arrow-r');
|
|
|
+ var ul = focus.querySelector('ul');
|
|
|
+ var ol = focus.querySelector('.circle');
|
|
|
+ focus.addEventListener('mouseenter', function () {
|
|
|
+ arrow_l.style.display = 'block';
|
|
|
+ arrow_r.style.display = 'block';
|
|
|
+ clearInterval(timer);
|
|
|
+ });
|
|
|
+ focus.addEventListener('mouseleave', function () {
|
|
|
+ arrow_l.style.display = 'none';
|
|
|
+ arrow_r.style.display = 'none';
|
|
|
+ timer = setInterval(() => {
|
|
|
+ arrow_r.click();
|
|
|
+ }, 2000);
|
|
|
+ });
|
|
|
+ for(var i = 0; i < ul.children.length; i++) {
|
|
|
+ var li = this.document.createElement('li');
|
|
|
+ li.setAttribute('index', i);
|
|
|
+ ol.appendChild(li);
|
|
|
+ li.addEventListener('click', function () {
|
|
|
+ var index = this.getAttribute('index');
|
|
|
+ var left = -1 * index * focus.offsetWidth;
|
|
|
+ // 每点一个小li，就要滚动图片的位置
|
|
|
+ animate(ul, left);
|
|
|
+ liChange(this);
|
|
|
+ num = index;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ ol.children[0].className = 'current';
|
|
|
+ // 循环图片，克隆第一张放到尾部
|
|
|
+ ul.appendChild(ul.children[0].cloneNode(true));
|
|
|
+ var num = 0;
|
|
|
+ arrow_l.addEventListener('click', function () {
|
|
|
+ if(num == 0){
|
|
|
+ num = ul.children.length-1;
|
|
|
+ ul.style.left = -1 * num * focus.offsetWidth + 'px';
|
|
|
+ }
|
|
|
+ num--;
|
|
|
+ var left = -1 * num * focus.offsetWidth;
|
|
|
+ animate(ul, left);
|
|
|
+ liChange(ol.children[num%ol.children.length]);
|
|
|
+ });
|
|
|
+ arrow_r.addEventListener('click', function () {
|
|
|
+ if(num == ul.children.length-1){
|
|
|
+ num = 0;
|
|
|
+ ul.style.left = 0;
|
|
|
+ }
|
|
|
+ num++;
|
|
|
+ var left = -1 * num * focus.offsetWidth;
|
|
|
+ animate(ul, left);
|
|
|
+ liChange(ol.children[num%ol.children.length]);
|
|
|
+ });
|
|
|
+ var timer = setInterval(() => {
|
|
|
+ arrow_r.click();
|
|
|
+ }, 2000);
|
|
|
+
|
|
|
+ function liChange(obj) {
|
|
|
+ // 排他思想，给点击的小li加上样式
|
|
|
+ for(var i = 0; i < ol.children.length; i++){
|
|
|
+ ol.children[i].className = '';
|
|
|
+ }
|
|
|
+ obj.className = 'current';
|
|
|
+ }
|
|
|
+}
|
Cathy
