我正在使用3D旋转木马。而且图像有些不透明。但我不希望图像不透明。
$('.carousel').carousel({
dist:0,
shift:0,
padding:20,
interval:100
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
</div>
我希望减少所有图像的不透明度。
答案 0 :(得分：2)
carousel插件没有选项可以在图像上设置不透明度，因此您必须通过CSS样式实现它。不是最好的选择，但我没有看到任何更简单的方法：）
$('.carousel').carousel({
dist: 0,
shift: 0,
padding: 20,
interval: 100
});.carousel .carousel-item {
opacity: 1 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div class="carousel">
<a class="carousel-item" href="#one!">
<img src="http://lorempixel.com/250/250/nature/1">
</a>
<a class="carousel-item" href="#two!">
<img src="http://lorempixel.com/250/250/nature/2">
</a>
<a class="carousel-item" href="#three!">
<img src="http://lorempixel.com/250/250/nature/3">
</a>
<a class="carousel-item" href="#four!">
<img src="http://lorempixel.com/250/250/nature/4">
</a>
<a class="carousel-item" href="#five!">
<img src="http://lorempixel.com/250/250/nature/5">
</a>
</div>
答案 1 :(得分：0)
上面的解决方案删除了所有不透明度转换，包括左侧最后一项和右侧最后一项的转换。我不喜欢它的外观，因此浏览了Materialize Carousel的代码，最后提出了使用原型更改_scroll函数的解决方案，希望对您有所帮助，只需在初始化Carousel之前放置以下代码即可：
M.Carousel.prototype._scroll = function(x) {
// Track scrolling state
if (!this.$el.hasClass('scrolling')) {
this.el.classList.add('scrolling');
}
if (this.scrollingTimeout != null) {
window.clearTimeout(this.scrollingTimeout);
}
this.scrollingTimeout = window.setTimeout(() => {
this.$el.removeClass('scrolling');
}, this.options.duration);
// Start actual scroll
let i,
half,
delta,
dir,
tween,
el,
elLastLeft,
elLastRight,
alignment,
zTranslation,
tweenedOpacity,
centerTweenedOpacity;
let lastCenter = this.center;
let numVisibleOffset = 1 / this.options.numVisible;
this.offset = typeof x === 'number' ? x : this.offset;
this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
delta = this.offset - this.center * this.dim;
dir = delta < 0 ? 1 : -1;
tween = -dir * delta * 2 / this.dim;
half = this.count >> 1;
if (this.options.fullWidth) {
alignment = 'translateX(0)';
centerTweenedOpacity = 1;
} else {
alignment = 'translateX(' + (this.el.clientWidth - this.itemWidth) / 2 + 'px) ';
alignment += 'translateY(' + (this.el.clientHeight - this.itemHeight) / 2 + 'px)';
centerTweenedOpacity = 1 - numVisibleOffset * tween;
}
// Set indicator active
if (this.showIndicators) {
let diff = this.center % this.count;
let activeIndicator = this.$indicators.find('.indicator-item.active');
if (activeIndicator.index() !== diff) {
activeIndicator.removeClass('active');
this.$indicators
.find('.indicator-item')
.eq(diff)[0]
.classList.add('active');
}
}
// center
// Don't show wrapped items.
if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
el = this.images[this._wrap(this.center)];
elLastLeft = this.images[this._wrap(this.center - half)];
elLastRight = this.images[this._wrap(this.center + half)];
// Add active class to center item.
if (!$(el).hasClass('active')) {
this.$el.find('.carousel-item').removeClass('active');
el.classList.add('active');
}
let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
this.options.shift *
tween *
i}px) translateZ(${this.options.dist * tween}px)`;
this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
}
for (i = 1; i <= half; ++i) {
// right side
if (this.options.fullWidth) {
zTranslation = this.options.dist;
tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
} else {
zTranslation = this.options.dist * (i * 2 + tween * dir);
// Amend the tweenedOpacity
tweenedOpacity = (1 * (1 * 2 + tween * -dir )) -1;
tweenedOpacity = parseFloat(tweenedOpacity.toFixed(2));
}
// Don't show wrapped items.
if (!this.noWrap || this.center + i < this.count) {
el = this.images[this._wrap(this.center + i)];
let transformString = `${alignment} translateX(${this.options.shift +
(this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
// Only give Opacity Transition to last item
if (i == half ) {
this._updateItemStyle(el, tweenedOpacity, -i, transformString);
}
else {
this._updateItemStyle(el, centerTweenedOpacity, -i, transformString);
}
}
// left side
if (this.options.fullWidth) {
zTranslation = this.options.dist;
tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
} else {
zTranslation = this.options.dist * (i * 2 - tween * dir);
// Amend the tweenedOpacity
tweenedOpacity = (1 * (1 * 2 - tween * -dir )) -1;
tweenedOpacity = parseFloat(tweenedOpacity.toFixed(2));
}
// Don't show wrapped items.
if (!this.noWrap || this.center - i >= 0) {
el = this.images[this._wrap(this.center - i)];
let transformString = `${alignment} translateX(${-this.options.shift +
(-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
// Only give Opacity Transition to last item
if (i == half ) {
this._updateItemStyle(el, tweenedOpacity, -i, transformString);
}
else {
this._updateItemStyle(el, centerTweenedOpacity, -i, transformString);
}
}
}
// center
// Don't show wrapped items.
if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
el = this.images[this._wrap(this.center)];
let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
this.options.shift *
tween}px) translateZ(${this.options.dist * tween}px)`;
this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
}
// onCycleTo callback
let $currItem = this.$el.find('.carousel-item').eq(this._wrap(this.center));
if (lastCenter !== this.center && typeof this.options.onCycleTo === 'function') {
this.options.onCycleTo.call(this, $currItem[0], this.dragged);
}
// One time callback
if (typeof this.oneTimeCallback === 'function') {
this.oneTimeCallback.call(this, $currItem[0], this.dragged);
this.oneTimeCallback = null;
}
};
// Here you init the carousel ...
答案 2 :(得分：0)
第一个答案，就是这样：
.carousel .carousel-item {
opacity: 1 !important;
}
对我来说不起作用，因为我需要在轮播中显示3张图像而没有任何不透明性。
第二个答案，很难理解和进一步调整。
我的解决方案：使用MutationObserver，在.carousel父div上侦听/观察属性更改。
$(document).ready(function () {
$('.carousel').carousel({
'numVisible': 3
});
var targetNode = document.querySelectorAll(".carousel")[0];
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
displayTopThreeImages();
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
function displayTopThreeImages() {
[...document.querySelectorAll(".carousel-item")].forEach(item=>{item.style.opacity = item.style.opacity > 0 ? 1 : item.style.opacity});
}
})