Question

图像突然变化，我希望它们具有幻灯片效果。

HTML

<div><img src="1.jpg" id="sliderImage"></div>

这是我正在使用的脚本：

var myImage = document.getElementById("sliderImage");
var imageArray = ["1.jpg","2.jpg","3.jpg"];
var imageIndex = 0;

function changeImage() {
                        myImage.setAttribute("src",imageArray[imageIndex]);
                        imageIndex++;
                        if (imageIndex >= imageArray.length){imageIndex = 0;}
                        }

var intervalHandle = setInterval(changeImage,5000);

Answer 1

实现这一目标的最简单方法是使用css进行转换效果，使用javascript设置计时器。此外，它有助于在列表中组织元素。由于相同的原始策略，您无法在下面的代码中看到图像。在本地尝试并下载图像，它应该工作。

这是我构建的一个简单的滑块https://github.com/rotexhawk/Javascript-Practice/tree/master/slider-simple

document.ready = function(){
	
	var slides = document.querySelectorAll('#slider li'); 
	
	var position = 0; 
	slides[position].style.transition = '0s';
	slides[position].style.left = '1200px';	

	var myInterval = setInterval(startSlider,4000);
	
	function startSlider(){
		
		if (position == 3){
			slides[position].style.transition = '0s';
			slides[position].style.left = '1200px';	
			
			position = 0; 

			slides[position].style.transition = '2s';
			slides[position].style.left = 0; 

		}

		else{
			slides[position].style.transition = '0s';
			slides[position].style.left = '1200px';	
			
			position ++; 

			slides[position].style.transition = '2s';
			slides[position].style.left = 0;
		}

	}



}();

.container{
	width: 1200px;
	box-shadow: 5px 5px 35px 0px rgba(0,0,0,0.4);
	-webkit-box-shadow: 5px 5px 35px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 5px 5px 35px 0px rgba(0,0,0,0.4);
	overflow: hidden;
	margin: 0 auto; 
	padding: 5%;
}

#slider{
    width: 1200px;
    height: 400px;
    position: relative;
    overflow: hidden;
    padding-left: 0;
    margin: 0 auto;
}

#slider li{
	width: 100%; 
	position: absolute;
	left: 1200px; 
	top: 0;
	visibility: hidden;
	opacity:0;
	transition: 2s;
}

#slider li img{
	width: 100%;
}

#slider-buttons ul{
	text-align: center;
}
#slider-buttons ul li{
	display: inline-block;
    width: 8px;
    height: 8px;
    border: 3px solid #afafaf;
    border-radius: 50%;
    margin: 0 3px;
    cursor: pointer;
}

#slider-buttons ul li.active{
	background-color: #249CD8;
}

#slider-buttons ul li:hover{
	background-color: #676767;
}

#effects{
	margin-bottom: 30px;
}

#effects h4, #effects select{
	display: inline-block;
}

 #effects select{
 	min-width: 150px;
 }

<div class="container">
	<h1 class="page-title underline-text">Simple Slider</h1> 
	
	<div class="slider-container">
	
	<ul id="slider">
		<li><img src="https://raw.githubusercontent.com/rotexhawk/Javascript-Practice/master/slider-simple/images/slider1.jpg"></li>
		<li><img src="https://raw.githubusercontent.com/rotexhawk/Javascript-Practice/master/slider-simple/images/slider2.jpg"></li>
		<li><img src="https://raw.githubusercontent.com/rotexhawk/Javascript-Practice/master/slider-simple/images/slider3.jpg"></li>
		<li><img src="https://raw.githubusercontent.com/rotexhawk/Javascript-Practice/master/slider-simple/images/slider4.jpg"></li>
	</ul>
	<div id="slider-buttons"></div>
	</div>

如何设置用于使用javascript / Jquery制作图像滑块的setInterval？

1 个答案: