您的位置:首页 > Web前端 > JQuery

JQuery之 响应式卡片轮播切换(Part6)

2019-04-10 16:57 525 查看

轉自《jQuery响应式卡片轮播切换代码

效果如圖:

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>

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: