JQuery之 响应式卡片轮播切换(Part6)
2019-04-10 16:57
525 查看
效果如圖:
css:
[code] <style> body { padding: 0; margin: 0; background: #fff; overflow-x: hidden; overflow-y: hidden; } body, html { height: 100% } div, li, ul { padding: 0; margin: 0 } img { vertical-align: top; border: 0 } li, ul { list-style: none; text-transform: capitalize } #banner { margin-bottom: -10px } #carousel { position: relative; z-index: 2; margin-top: 20px; transform-style: preserve-3d; perspective: 800px } #carousel img { position: absolute; left: 50%; top: 50%; margin-left: -252px; transition: transform .5s ease-in-out; box-shadow: 8px 8px 20px rgba(0, 0, 0, .2); cursor: pointer } #bannerNav { position: relative; margin-top: 20px; height: 10px; padding: 10px 0; text-align: center } #bannerNav ul li { cursor: pointer; overflow: hidden; display: inline-block; width: 22px; margin: 0 2px } #bannerNav ul li a { margin: 0 auto; display: block; width: 6px; height: 6px; vertical-align: top; border-radius: 3px; background: #5e6671; font-size: 0 } #bannerNav ul li.on a, #bannerNav ul li:hover a { background: #00aeff } #bannerNav ul li.on a { width: 20px } #carousel { height: 400px } #carousel img { width: 500px; border-radius: 10px; opacity: 0; } </style>
HTML:
[code] <div id="banner"> <div id="carousel"> <img src="https://popbee.com/image/2018/05/%E7%9F%B3%E5%8E%9F%E9%87%8C%E7%BE%8E.jpg" data-url="#"> <img src="https://truth.bahamut.com.tw/s01/201901/1e788e6dd1e99fbe06458eeba8ad4c62.JPG" data-url="#"> <img src="http://www.metrodaily.hk/wp-content/uploads/2018/04/2018-04-29_22-08-36.jpg" data-url="#"> <img src="https://image-cdn.hypb.st/https%3A%2F%2Fhk.hypebeast.com%2Ffiles%2F2017%2F08%2Fishihara-satomi-encourage-00.jpg?fit=max&cbr=1&q=90&w=750&h=500" data-url="#"> <img src="https://pgw.udn.com.tw/gw/photo.php?u=https://uc.udn.com.tw/photo/2018/07/31/realtime/5068982.jpg&s=Y&x=0&y=214&sw=1250&sh=833" data-url="#"> <img src="http://i1.hdslb.com/bfs/archive/61b67503c024cd1b3af35efcebc5f4be72e0406d.jpg" data-url="#"> <img src="http://castle.womany.net/images/articles/17986/womany_5c0V3hzRfRRZBEhFeEEtb6igpVOutgg4CH_Znwh_mZ8_1549526624-27406-0015-7934.jpeg" data-url="#"> <img src="http://pinkupost.com/wp-content/uploads/2018/05/%E9%AB%98%E5%B6%BA%E4%B9%8B%E8%8A%B1_%E9%AB%98%E5%B6%BA%E3%81%AE%E8%8A%B1_%E7%9F%B3%E5%8E%9F%E9%87%8C%E7%BE%8E_%E7%9F%B3%E5%8E%9F%E8%81%B0%E7%BE%8E_%E5%B3%AF%E7%94%B0%E5%92%8C%E4%BC%B8_%E9%8A%80%E6%9D%8FBOYZ_%E9%87%8E%E5%B3%B6%E4%BC%B8%E5%8F%B8_2018%E5%B9%B4%E5%A4%8F%E5%AD%A3%E6%97%A5%E5%8A%87_%E6%97%A5%E6%9C%AC%E9%9B%BB%E8%A6%96%E8%87%BA.jpg" data-url="#"> </div> </div>
jq:
[code] <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> ; (function ($, window, document, undefined) { var Carousel = function (elem, options) { this.defaults = { curDisplay: 0, autoPlay: false, interval: 3000 }; this.opts = $.extend({}, this.defaults, options); var self = this; this.$carousel = elem; this.$aImg = this.$carousel.find('img'); this.imgLen = this.$aImg.length; this.curDisplay = this.opts.curDisplay; this.autoPlay = this.opts.autoPlay; this.viewWidth = $(window).width() / 2; this.b_switch = true; this.iNow = this.opts.curDisplay; this.timer = null; this.interval = this.opts.interval; var htmlNav = "<ul>"; for (var i = 0; i < this.imgLen; i++) { if (this.curDisplay == i) { htmlNav += "<li class=on><a>" + i + "</a></li>"; } else { htmlNav += "<li><a>" + i + "</a></li>"; } } htmlNav += "</ul>"; this.$carousel.parent().append('<div id=bannerNav>' + htmlNav + '</div>'); this.$aNav = this.$carousel.siblings('#bannerNav').find('ul li'); }; var outerWidth = parseInt(document.body.offsetWidth); var middleWidth = 1920; var _height = outerWidth >= middleWidth ? 380 : 300; var _slideHeight = outerWidth >= middleWidth ? 330 : 260; Carousel.prototype = { play: function () { if (this.autoPlay) { if (this.iNow === this.imgLen - 1) { this.iNow = 0; } else { this.iNow++; } this.movingNext(this.iNow); } }, movingPrev: function (index) { this.curDisplay = index; this.initalCarousel(); }, movingNext: function (index) { this.curDisplay = index; this.initalCarousel(); }, initalCarousel: function () { var self = this; var half_imgLen = Math.floor(this.imgLen / 2); var leftNum, rightNum; var k = 0; for (var i = 0; i < half_imgLen; i++) { leftNum = this.curDisplay - i - 1; if (k == 0) { this.$aImg.eq(leftNum).css({ transform: 'translateX(' + (-535 * (i + 1)) + 'px) translateZ(-120px)', width: "auto", }).animate({ height: _slideHeight + 'px', marginTop: -_slideHeight / 2 + 'px', opacity: '0.6' }, 500); this.$aImg.eq(leftNum).attr('onclick', null); rightNum = this.curDisplay + i + 1; if (rightNum > this.imgLen - 1) rightNum -= this.imgLen; this.$aImg.eq(rightNum).css({ transform: 'translateX(' + (600 * (i + 1)) + 'px) translateZ(-120px) ', width: "auto" }).animate({ 24000 height: _slideHeight + 'px', marginTop: -_slideHeight / 2 + 'px', opacity: '0.6' }, 500); this.$aImg.eq(rightNum).attr('onclick', null); k++; } else { this.$aImg.eq(leftNum).css({ transform: 'translateX(0px) translateZ(-1000px) ', zIndex: -1 }); rightNum = this.curDisplay + i + 1; if (rightNum > this.imgLen - 1) rightNum -= this.imgLen; this.$aImg.eq(rightNum).css({ transform: 'translateX(0px) translateZ(-1000px) ', zIndex: -1 }); } this.$aImg.removeClass('on'); this.$aNav.removeClass('on'); } var _href = 'location.href=' + "'" + this.$aImg.eq(this.curDisplay).attr('data-url') + "'"; this.$aImg.eq(this.curDisplay).css({ transform: 'translateZ(0px)', zIndex: 99999 }).animate({ height: _height + 'px', marginTop: -_height / 2 + 'px', opacity: '1', }, 500).addClass('on').attr('onclick', _href); this.$aNav.eq(this.curDisplay).addClass('on'); this.$carousel.on('webkitTransitionEnd', function () { self.b_switch = true; }); }, inital: function () { var self = this; this.initalCarousel(); this.$aImg.on('click', function (ev) { if (self.b_switch && !$(this).hasClass('on')) { self.iNow = $(this).index(); self.b_switch = false; var direction = self.viewWidth < ev.clientX ? 'next' : 'prev'; var index = $(this).index(); if (direction === 'next') { self.movingNext(index); } else { self.movingPrev(index); } } }).hover(function () { clearInterval(self.timer); }, function () { self.timer = setInterval(function () { self.play(); }, self.interval); }); this.$aNav.on('click', function (ev) { if (self.b_switch && !$(this).hasClass('on')) { self.iNow = $(this).index(); self.b_switch = false; var direction = self.viewWidth < ev.clientX ? 'next' : 'prev'; var index = $(this).index(); if (direction === 'next') { self.movingNext(index); } else { self.movingPrev(index); } } }).hover(function () { clearInterval(self.timer); }, function () { self.timer = setInterval(function () { self.play(); }, self.interval); }); this.timer = setInterval(function () { self.play(); }, this.interval); this.$carousel.on('selectstart', function () { return false; }); }, constructor: Carousel }; $.fn.carousel = function (options) { var carousel = new Carousel(this, options); return carousel.inital(); }; })(jQuery, window, document, undefined); $(function () { $('#carousel').carousel({ curDisplay: 0, //默认索引 autoPlay: false, //是否自动播放 interval: 3000 //间隔时间 }); }); </script>
相关文章推荐
- jquery图片轮播切换
- 15款jQuery带缩略图的图片轮播切换特效代码
- jQuery - 图片叠加旋转木马轮播切换效果 -
- 一款基于jQuery轮播切换焦点图,可播放多张图片
- 一款基于jQuery轮播切换焦点图,可播放多张图片
- jQuery-轮播图(友善滴滚动切换)
- 15款jQuery带缩略图的图片轮播切换特效代码
- <jQuery>首页图片切换/轮播
- jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)
- JQuery实现图片轮播切换效果--水平切换/垂直切换
- jquery 轮播图,左右切换
- jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)
- JQuery的图片的切换和自动轮播
- jQuery插件实现带圆点的焦点图片轮播切换
- jQuery-图片轮播-随意切换图片
- jQuery - 广告图片轮播切换
- jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)
- jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
- jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
- jquery实现多模块切换轮播