HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>卡片旋转轮播</title>
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
</head>
<body>
<div id="banner">
<div id="carousel">
<img src="statics/images/1.png" data-url="#">
<img src="statics/images/2.png" data-url="#">
<img src="statics/images/3.png" data-url="#">
<img src="statics/images/4.png" data-url="#">
<img src="statics/images/5.png" data-url="#">
<img src="statics/images/6.png" data-url="#">
<img src="statics/images/7.png" data-url="#">
<img src="statics/images/8.png" data-url="#">
</div>
</div>
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/slider.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('#carousel').carousel({
curDisplay: 0, //默认索引
autoPlay: false, //是否自动播放
interval: 3000 //间隔时间
});
});
</script>
</body>
</html>
CSS
body {
padding:0;
margin:0;
background:#fff;
}
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;
}
}
js
(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({
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);
