我制作了这个简单的javascript代码，以便在某个时间间隔内更改幻灯片中的图像。然后我尝试使用css添加一些效果但它不起作用。任何提示或小型演示都将不胜感激。谢谢！
<script type="text/JavaScript">
var imagecount = 1;
var total = 3;
function slide(x) {
var image = document.getElementById('img');
imagecount = imagecount + x;
if (imagecount > total) { imagecount = 1 }
if (imagecount < 1) { imagecount = total }
image.src = "img" + imagecount + ".jpg";
}
window.setInterval(function slideA(x) {
var image = document.getElementById('img');
imagecount = imagecount + 1;
if (imagecount > total) { imagecount = 1 }
if (imagecount < 1) { imagecount = total }
image.src = "img" + imagecount + ".jpg";
}, 3000);
</script>
答案 0 :(得分：0)
在这里，我完成了它。有一些小错误（不是大问题），目前代码可能有点乱（没有时间清理，老板希望在不到4天的时间内建立一个完整的网站）但它的确有效。如果您想要没有页面的图像淡入效果，只需删除页面并相应地清理代码。
var settings;
$(document).ready(function () {
settings = {
images: {
structure: {
id: "image-slider",
active: "slider-image-active"
},
animation: {
interval: 7000,
effect: 1000
},
dimensions: {
height: 0
}
},
pages: {
structure: {
id: "page-slider",
class: "featured",
active: "slider-page-active",
effect: "slider-page-effect"
},
animation: {
interval: 7000,
effect: 1000
},
dimensions: {
minWidth: 200
}
}
};
});
$(window).load(function () {
resetImageSliderHeight();
//setPageRows(settings);
$(window).resize(function (e) {
resetImageSliderHeight();
var delay = (function () {
var delayTimer = 0;
return function (callback, ms) {
clearTimeout(delayTimer);
delayTimer = setTimeout(callback, ms);
};
})();
delay(function () {
pageEffectFunction($('#' + settings.pages.structure.id + ' .' + settings.pages.structure.active));
}, 500);
});
pageEffectFunction($('#' + settings.pages.structure.id + ' .' + settings.pages.structure.active));
// run every 7s
var timer = function () {
interval = setInterval(function () {
cycleImages();
cyclePages();
},
settings.images.animation.interval);
};
timer();
$('#' + settings.pages.structure.id + ' .' + settings.pages.structure.class).stop(true).click(function () {
pageEffectFunction($(this));
cyclePagesImagesClick($(this));
clearInterval(interval);
timer();
});
});
//IMAGES
function cycleImages() {
var $active = $('#' + settings.images.structure.id + ' .' + settings.images.structure.active);
var $next = ($active.next().length > 0) ? $active.next() : $('#' + settings.images.structure.id + ' img:first');
/*$next.css('z-index', 2); //move the next image up the pile
$active.fadeOut(settings.images.animation.effect, function () { //fade out the top image
$active.css('z-index', 1).show().removeClass(settings.images.structure.active); //reset the z-index and unhide the image
$next.css('z-index', 3).addClass(settings.images.structure.active); //make the next image the top one
});*/
$('#' + settings.images.structure.id + ' img:not(.' + settings.images.structure.active + ', :eq(' + ($next.index() - 1) + '))').css('z-index', 1);
$active.css('z-index', 2);
$next.css({
'z-index': 3,
display: 'none'
}); //move the next image up the pile
$next.fadeIn(settings.images.animation.effect, function () { //fade out the top image
$active.css('z-index', 1).removeClass(settings.images.structure.active); //reset the z-index and unhide the image
$next.addClass(settings.images.structure.active); //make the next image the top one
});
}
function resetImageSliderHeight() {
settings.images.dimensions.height = getSmallestImageHeight(settings);
setImageContainerHeight(settings);
}
function getSmallestImageHeight() {
smallestImageHeight = 1000;
$('#' + settings.images.structure.id).find('img').each(function () {
if ($(this).height() < smallestImageHeight) smallestImageHeight = $(this).height();
});
return smallestImageHeight;
}
function setImageContainerHeight() {
$('#' + settings.images.structure.id).find('img').each(function (index, element) {
$(element).parent().height(settings.images.dimensions.height);
});
}
function cyclePages() {
var $active = $('#' + settings.pages.structure.id + ' .' + settings.pages.structure.active);
var $element = $('#' + settings.pages.structure.id + ' .' + settings.pages.structure.class);
var $next;
if ($element.eq($element.index($("." + settings.pages.structure.active)) + 1).length > 0) {
$next = $element.eq($element.index($("." + settings.pages.structure.active)) + 1);
} else {
$next = $element.eq(0);
}
//alert($next.html());
$active.removeClass(settings.pages.structure.active, settings.pages.animation.effect);
$next.addClass(settings.pages.structure.active, settings.pages.animation.effect);
pageEffectFunction($next);
}
function cyclePagesImagesClick(element) {
//Page
var index = element.index() - 1;
var $active = $('#' + settings.pages.structure.id + ' .' + settings.pages.structure.active);
$active.removeClass(settings.pages.structure.active, settings.pages.animation.effect);
element.addClass(settings.pages.structure.active, settings.pages.animation.effect);
//Image
var $imageElement = $('#' + settings.images.structure.id + ' img').eq(index);
$active = $('#' + settings.images.structure.id + ' .' + settings.images.structure.active);
if ($active.index() != $imageElement.index()) {
/*var $next = ($('#' + settings.images.structure.id + ' img').eq(index).next().length > 0) ? $('#' + settings.images.structure.id + ' img').eq(index) : $('#' + settings.images.structure.id + ' img').eq(0);*/
$('#' + settings.images.structure.id + ' img:not(.' + settings.images.structure.active + ', :eq(' + ($imageElement.index() - 1) + '))').css('z-index', 1);
$active.css('z-index', 2);
$imageElement.css({
'z-index': 3,
display: 'none'
}); //move the next image up the pile
$imageElement.fadeIn(settings.images.animation.effect, function () { //fade out the top image
$active.css('z-index', 1).removeClass(settings.images.structure.active); //reset the z-index and unhide the image
$imageElement.addClass(settings.images.structure.active); //make the next image the top one
});
}
}
function pageEffectFunction(element) {
var width = element.outerWidth();
var height = element.outerHeight();
var left = element.position().left;
var top = element.position().top;
$('#' + settings.pages.structure.effect).animate({
left: left,
top: top,
width: width,
height: height
}, 200);
}@charset"utf-8";
/* CSS Document */
#slider-container {
position: relative;
display: block;
overflow: hidden;
width: 100%;
}
#slider-container #image-slider {
width: 100%;
overflow: hidden;
}
#slider-container #image-slider-container {
width: inherit;
}
#slider-container #image-slider-container #image-slider {
position: relative;
width: inherit;
list-style: none;
padding-left: 0;
}
#slider-container #image-slider-container #image-slider img {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width: inherit;
}
#slider-container #image-slider-container #image-slider img.slider-image-active {
display: block;
z-index: 3;
}
#slider-container #page-slider-container {
margin: 0;
padding: 0;
position: relative;
display: block;
width: inherit;
background-color: white;
overflow-x: auto;
overflow-y: hidden;
}
#slider-container #page-slider-container #page-slider {
display: table;
border-spacing: 0;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
background-color: white;
}
#slider-container #page-slider-container #page-slider .page-slider-row {
display: table-row;
margin: 0;
padding: 0;
}
#slider-container #page-slider-container #page-slider #slider-page-effect {
position: absolute;
z-index: 1;
background-color: #85BC2B;
}
#slider-container #page-slider-container #page-slider .featured {
margin-left: 0;
position: relative;
display: table-cell;
width: 20%;
min-width: 200px;
transition: background 0.45s ease-in-out;
cursor: pointer;
z-index: 2;
}
#slider-container #page-slider-container #page-slider .featured:not(.slider-page-active):hover {
background-color: #D3FEA0;
}
#slider-container #page-slider-container #page-slider .featured.slider-page-active {
background-color: none;
}
#slider-container #page-slider-container #page-slider .featured:not(:last-of-type) {
border-right: 1px dashed #DCDCDC;
}
#slider-container #page-slider-container #page-slider .featured .featured-text-container {
padding: 15px 33px 27px;
}
#slider-container #page-slider-container #page-slider .featured .featured-text-container .featured-title {
color: #17513B;
}
#slider-container #page-slider-container #page-slider .featured.slider-page-active .featured-text-container .featured-title {
color: white;
}
#slider-container #page-slider-container #page-slider .featured .featured-text-container .featured-description {
font-family: Georgia, serif;
font-style: italic;
font-size: 13px;
color: #51A351;
margin-bottom: 40px;
}
#slider-container #page-slider-container #page-slider .featured.slider-page-active .featured-text-container .featured-description {
color: white;
}
#slider-container #page-slider-container #page-slider .featured .featured-link {
position: absolute;
left: 50%;
bottom: 10px;
text-align: center;
}
#slider-container #page-slider-container #page-slider .featured .featured-link button.read-more {
position: relative;
left: -50%;
background: #62C462;
background-image: -webkit-linear-gradient(top, #62C462, #51A351);
background-image: -moz-linear-gradient(top, #62C462, #51A351);
background-image: -ms-linear-gradient(top, #62C462, #51A351);
background-image: -o-linear-gradient(top, #62C462, #51A351);
background-image: linear-gradient(to bottom, #62C462, #51A351);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
padding: 7px 17px 7px 17px;
border: solid #008a05 2px;
text-decoration: none;
outline: none;
white-space: nowrap;
}
#slider-container #page-slider-container #page-slider .featured .featured-link button.read-more:hover {
background: #62C462;
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider-container">
<div id="image-slider-container">
<div id="image-slider">
<!-- InstanceBeginEditable name="Images Section" -->
<img class='slider-image-active' src="http://upload.wikimedia.org/wikipedia/commons/a/af/Aerosol.png" alt="Yay I have info" />
<img class="" src="http://upload.wikimedia.org/wikipedia/commons/1/17/Arpino_panorama.jpg" alt="Some alt thing" />
<img class="" src="http://upload.wikimedia.org/wikipedia/commons/1/17/Bobbahn_ep.jpg" alt="Image of something" />
<img class="" src="http://upload.wikimedia.org/wikipedia/commons/a/a3/Cabreuva.jpg" alt="Soemthing" />
<img class="" src="http://upload.wikimedia.org/wikipedia/commons/c/c7/DenglerSW-Peach-faced-Lovebird-20051026-1280x960.jpg" alt="Parrot" />
<!-- InstanceEndEditable -->
</div>
</div>
<div id="page-slider-container">
<div id="page-slider">
<div class="page-slider-row">
<div id="slider-page-effect"></div>
<div class="featured slider-page-active">
<div class="featured-text-container">
<div class="featured-title">
<h2><!-- InstanceBeginEditable name="Item 0 Header" -->Some title<!-- InstanceEndEditable --></h2>
</div>
<div class="featured-description">
<p>
<!-- InstanceBeginEditable name="Item 0 Description" -->Some description, can be really long if i want it to!!! The boxes next to me will resize to my height, which I think is pretty darn cool!!!
<!-- InstanceEndEditable -->
</p>
</div>
</div>
<div class="featured-link">
<!-- InstanceBeginEditable name="Item 0 Link" --><a href="#">
<button class="read-more">Read more...</button>
</a>
<!-- InstanceEndEditable -->
</div>
</div>
<div class="featured">
<div class="featured-text-container">
<div class="featured-title">
<h2><!-- InstanceBeginEditable name="Item 1 Header" -->Title 2<!-- InstanceEndEditable --></h2>
</div>
<div class="featured-description">
<p>
<!-- InstanceBeginEditable name="Item 1 Description" -->Description 2
<!-- InstanceEndEditable -->
</p>
</div>
</div>
<div class="featured-link">
<!-- InstanceBeginEditable name="Item 1 Link" --><a href="#">
<button class="read-more">Read more...</button>
</a>
<!-- InstanceEndEditable -->
</div>
</div>
<div class="featured">
<div class="featured-text-container">
<div class="featured-title">
<h2><!-- InstanceBeginEditable name="Item 2 Header" -->Title 3<!-- InstanceEndEditable --></h2>
</div>
<div class="featured-description">
<p>
<!-- InstanceBeginEditable name="Item 2 Description" -->Description 3
<!-- InstanceEndEditable -->
</p>
</div>
</div>
<div class="featured-link"><a href="#">
<button class="read-more">Read more...</button>
</a>
<!-- InstanceEndEditable -->
</div>
</div>
<div class="featured">
<div class="featured-text-container">
<div class="featured-title">
<h2><!-- InstanceBeginEditable name="Item 3 Header" -->Title 4<!-- InstanceEndEditable --></h2>
</div>
<div class="featured-description">
<p>
<!-- InstanceBeginEditable name="Item 3 Description" -->Description 4
<!-- InstanceEndEditable -->
</p>
</div>
</div>
<div class="featured-link">
<!-- InstanceBeginEditable name="Item 3 Link" --><a href="#">
<button class="read-more">Read more...</button>
</a>
<!-- InstanceEndEditable -->
</div>
</div>
<div class="featured">
<div class="featured-text-container">
<div class="featured-title">
<h2><!-- InstanceBeginEditable name="Item 4 Header" -->Title 5<!-- InstanceEndEditable --></h2>
</div>
<div class="featured-description">
<p>
<!-- InstanceBeginEditable name="Item 4 Description" -->Description 5
<!-- InstanceEndEditable -->
</p>
</div>
</div>
<div class="featured-link">
<!-- InstanceBeginEditable name="Item 4 Link" --><a href="#">
<button class="read-more">Read more...</button>
</a>
<!-- InstanceEndEditable -->
</div>
</div>
<!-- InstanceBeginEditable name="Other Featured" -->
<!-- InstanceEndEditable -->
</div>
</div>
</div>
</div>
如果不起作用，这里有一个小问题（它应该但之前我已经遇到过问题）：http://jsfiddle.net/ctwheels/qhk4zj9r/