diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..3a3b2a6 Binary files /dev/null and b/.DS_Store differ diff --git a/css/shuffing.css b/css/shuffing.css new file mode 100644 index 0000000..43d0979 --- /dev/null +++ b/css/shuffing.css @@ -0,0 +1,32 @@ +#marquee { + width: 600px; + height: 300px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + } + + .control-btn{ + width: 30px; + height: 30px; + line-height: 30px; + cursor: pointer; + position: absolute; + top: 50%; + font-size: 30px; + color: #ffffff; + text-align: center; + background: #3f3f3f; + } + .control-btn.next{ + right: 0px; + } + .control-btn.prev{ + left: 0; + } + #marquee a img { + width: 100%; + } \ No newline at end of file diff --git a/imgs/1.jpg b/imgs/1.jpg new file mode 100644 index 0000000..9415de5 Binary files /dev/null and b/imgs/1.jpg differ diff --git a/imgs/2.jpg b/imgs/2.jpg new file mode 100644 index 0000000..40e7e77 Binary files /dev/null and b/imgs/2.jpg differ diff --git a/imgs/3.jpg b/imgs/3.jpg new file mode 100644 index 0000000..746dbc3 Binary files /dev/null and b/imgs/3.jpg differ diff --git a/imgs/4.jpg b/imgs/4.jpg new file mode 100644 index 0000000..91738cb Binary files /dev/null and b/imgs/4.jpg differ diff --git a/index.html b/index.html index a9a96b5..17826ea 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,33 @@ -
- - - -
- + + + + + + + Index + + + + + +
+ + < + + + > + +
+ + + + + + + \ No newline at end of file diff --git a/libs/marquee.js b/libs/marquee.js index 58a35aa..5d8e0b3 100644 --- a/libs/marquee.js +++ b/libs/marquee.js @@ -1,5 +1,64 @@ -$.fn.marquee = function() { - // 可翻页 - // popup when click - // 可以用 fancybox -} +/** + * @param {Array} 轮播图片数据 + * @param {Object} 配置参数 + */ +$.fn.marquee = function (data, options) { + if (!data instanceof Array) return + if (typeof options !== 'object') return + var count = 0 + var timer + var config = { + interval: options.interval || 2000 + } + var methods = { + // 自动轮播初始化 + init: function () { + timer = setInterval(function () { + count++ + methods.render() + }, config.interval) + }, + // 更新数据 + render: function () { + console.log(count) + count = count % data.length + $('#marquee a').attr('href', data[count]); + $('#marquee a img').attr('src', data[count]); + }, + next: function () { + count += 1 + this.render() + }, + prev: function () { + count = count ? count - 1 : data.length - 1 + this.render() + } + } + // 点击下一张 + $(".control-btn.next").on('click', function () { + console.log('next') + clearInterval(timer) + methods.next() + }) + // 点击上一张 + $(".control-btn.prev").on('click', function () { + console.log('prev') + clearInterval(timer) + methods.prev() + }) + // 绑定fancybox + $.each($("#marquee a"), function (indexInArray, valueOfElement) { + $(valueOfElement).fancybox() + }); + // 鼠标移入暂停 + $('#marquee').mouseover(function () { + console.log('鼠标移入暂停播放') + clearInterval(timer) + }); + // 鼠标移除开始 + $('#marquee').mouseleave(function () { + console.log('鼠标移除开始播放') + methods.init() + }); + methods.init() +} \ No newline at end of file