Existem muitos controles deslizantes de imagem na Internet. A maioria deles é escrita por jQuery. Eu só quero aprender JS e ter um melhor entendimento dele, então eu uso javascript para completá-lo.
você pode encontrar a demonstração aqui:
1.básico: http://cssdeck.com/labs/image-slider-1
2.com o botão anterior / próximo: http://cssdeck.com/labs/imageslider-button
3.com pager: http://cssdeck.com/labs/imageslider-pager
A demonstração 1 é diferente da demonstração 2 e 3; e demo 2 e 3 estão usando os mesmos códigos básicos.
Abaixo está como fazer o básico – passar para a próxima imagem após um determinado intervalo de tempo. sem interrupção do usuário.
A ideia básica do controle deslizante de imagem é criar uma lista longa. na verdade é um longo ‘ul’
A parte html é:
<div class=”container”>
<div class=”image-slider-wrapper”>
<ul id=”image_slider”>
<li><img src=”./image/1.jpg”></li>
<li><img src=”./image/4.jpg”></li>
<li><img src=”./image/5.jpg”></li>
<li><img src=”./image/4.jpg”></li>
<li><img src=”./image/1.jpg”></li>
<li><img src=”./image/5.jpg”></li>
</ul>
</div>
</div>a parte do envoltório do controle deslizante da imagem é para conveniência quando eu faço trabalhos futuros.
a parte css é:
.container{
width:800px;
height:400px;
padding:20px;
border:1px solid gray;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: black;
}
.image-slider-wrapper{
overflow: hidden;
}
#image_slider{
position: relative;
height: 280px;
padding:0;
}
#image_slider li{
max-width: 100%;
float:left;
list-style: none;
}O image-slider-wrapper precisa definir overflow: hidden cause ul será uma lista muito longa em uma linha. mas apenas uma imagem pode ser vista.
Não há largura definida para ul (id = image_slider) porque iremos definir em Javascript. Portanto, quando houver mais / menos imagens, não precisamos alterar o css.
O Webkit tem preenchimento e margem padrão para ul, portanto, iremos inicializá-lo com 0px.
Defina li como list-style: none e float left, então as imagens ficarão em uma linha longa.
Tudo bem, agora temos tudo pronto para mover.
A seguir está a parte JS.
Na função init (), 1. defina a largura ul 2. mova ul
var ul;
var liItems;
var imageWidth;
var imageNumber;
function init(){
ul = document.getElementById(‘image_slider’);
liItems = ul.children;
imageNumber = liItems.length;
imageWidth = liItems[0].children[0].offsetWidth;
// set ul’s width as the total width of all images in image slider.
ul.style.width = parseInt(imageWidth * imageNumber) + ‘px’;
slider(ul);
}.offsetWidht retorna um número! (typeof (imageWidth) retorna “número”).
offsetWidth é a largura que inclui conteúdo, preenchimento, barra de rolagem e borda. se houver bordas para cada imagem, a largura de ul também estará correta.
também podemos usar computedStyle para obter a largura de uma imagem, mas, nesse caso, o que obtemos é “760px”, não 760
var computedStyle = document.defaultView.getComputedStyle(liItems[i].childNodes[0], null);
imageWidth = computedStyle.width;aqui está o controle deslizante de função ()
/**delta function is to set how the image slide—keep still for a while and move to next picture.
*step function will be called many times until clearInterval() been called
* currentImage * imageWidth is the currentImage position of ul
* delta start from 0 to 1, delta * imageWidth is the pixels that changes
**/
function slider(ul){
animate({
delay:17,
duration: 3000,
delta:function(p){return Math.max(0, -1 + 2 * p)},
step:function(delta){
ul.style.left = ‘-’ + parseInt(currentImage * imageWidth + delta * imageWidth) + ‘px’;
},
callback:function(){
currentImage++;
// if it doesn’t slied to the last image, keep sliding
if(currentImage < imageNumber-1){
slider(ul);
}
// if current image it’s the last one, it slides back to the first one
else{
var leftPosition = (imageNumber - 1) * imageWidth;
// after 2 seconds, call the goBack function to slide to the first image
setTimeout(function(){goBack(leftPosition)},2000);
setTimeout(function(){slider(ul)}, 4000);
}
}
});
}A função delta garante que cada animação fique parada por um tempo e depois passe para a próxima imagem. (se y <0, então y = 0;)
A função step faz a animação. Mas é só deslizar uma imagem. A função de retorno de chamada garantirá que haja um loop para todas as imagens. E se for a última imagem, ele chama a função “goBack” para deslizar para a primeira imagem.
function goBack(leftPosition){
currentImage = 0;
var id = setInterval(function(){
if(leftPosition >= 0){
ul.style.left = ‘-’ + parseInt(leftPosition) + ‘px’;
leftPosition -= imageWidth / 10;
}
else{
clearInterval(id);
}
}, 17);
}Aqui está a função de animação genérica que aprendi no tutorial de animação javascript que postei no link abaixo. A única diferença é depois de clearInterval () eu chamarei a função de retorno de chamada para manter o loop de animação em andamento.
A função animar é uma função genérica deste artigo:
Eu acho que é muito bom.
http://javascript.info/tutorial/animation#the-generic-animation
//generic animate function
function animate(opts){
var start = new Date;
var id = setInterval(function(){
var timePassed = new Date - start;
var progress = timePassed / opts.duration
if(progress > 1){
progress = 1;
}
var delta = opts.delta(progress);
opts.step(delta);
if (progress == 1){
clearInterval(id);
opts.callback();
}
}, opts.dalay || 17);
}
window.onload = init;Com o window.inload = init; como final, o controle deslizante da imagem foi finalizado com sucesso!
Eu sei que há muitos lugares para melhorar, por exemplo este não é um ágil, também a arquitetura pode ter problemas também. Estou aprendendo coisas novas todos os dias. Vou continuar praticando e escrever códigos melhores!
周 周 加油！