Experiência em IVX na página carrossel caseiro mostrando o efeito do

Recentemente usei um monte de componentes para expandir os componentes já embalados no IVX processo de aprendizagem, os componentes funcionais destes casos são frequentemente utilizados, é também muito fácil de usar. Mas depois de um bom pacote para modificar o estilo que eles receberam um pouco limitado, por isso hoje é como possuir um mapa carrossel feito em casa, onde o primeiro estudo de caso para uma demonstração disso.

1. Use uma matriz para armazenar a imagem para mostrar o recurso
, uma vez que é natural ter diagrama carrossel mostrando as fotos, esta demonstração não é colocar uma imagem em uma matriz. E adicionar uma variável numérica - o número atual, ele é o representante do show atual é qual dos quatro fotos em uma imagem.
Aqui Insert Picture Descrição

2. A porção de imagem de ecrã
e que parte da exibição de imagem, o conjunto intermédio imagem, para a esquerda e direita exibir ícones são usados para mudar a imagem.
Aqui Insert Picture Descrição
Fotos de componentes de recursos de dados endereço ligado matriz unidimensional de um elemento, e este elemento vai mudar com o valor atual do número da variável é alterado. Existem matriz unidimensional em quatro números de imagem começar com 0 são 0, 1, tal como o número de sequência de corrente igual a 0, o componente de imagem é apresentado é uma matriz de número de sequência de 0 para a primeira imagem.
Aqui Insert Picture Descrição
3. imagem carrossel
no demo é no carrossel imagem nas setas esquerda e direita para alcançar. Clique no No. atual + seta para a direita irá mostrar uma série de próxima imagem. Aqui devemos prestar atenção para lidar com a fronteira, porque quando você mostrar a foto para o quarto número atual já é 3, e depois clique na seta para a direita +1 se tornará um 4, mas desta vez não na hora matriz unidimensional de 4 o quinto elemento de imagem, portanto, colocar o reset número corrente a zero, a partir do zero para mostrar (uma matriz de números começam com 0, 0,1,2 ··· n-1, é o número de elementos de n, de modo que quando n é igual a pode ser determinado número dos limites).
evento esquerda seta é a mesma razão, uma vez que o número clique atual menos 1, que mostra uma matriz de imagem anterior, tal como quando a mostrar o número 0. A imagem de primeiro se torna menos 1 -1, que que precisamos conjunto com o número de re-número do último show de imagem. Assim, o número atual só vai 0,1,2,3. A comutação entre estes quatro valores.
Aqui Insert Picture Descrição
4. Peças imagem Carrossel melhorado - o número de imagens no desconhecido matriz unidimensional
porque os casos reais, pode haver um cenário de uso, a matriz é a obtenção de uma imagem do banco de dados, também será adicionado ou subtraído o número de imagens, não está diretamente fixada para o valor escrito quando a lógica de processamento de limite de gravação. Por exemplo, uma matriz e adicionar uma imagem, em seguida, pressione a redação anterior ainda só mostrar os primeiros quatro fotos, o tratamento de fronteira tem um problema. Pode ser modificado para o seguinte padrão, o número de elementos 4 em uma matriz unidimensional (na verdade, o número de elementos podem ser encontrados em uma série de 4 demo é amigos).
Aqui Insert Picture Descrição
5. partes imagem Carrossel melhorado - Autoplay
Nesta demo no carrossel de imagem é feito clicando no ícone, mas eu sou preguiçoso e obstinado, eu não quero apontar Eu quero jogar sob o seu único automática. Aqui também é um método, é conseguido com o gatilho. Adicionar um gatilho no interior da linha.
Aqui Insert Picture Descrição
painel propriedades gatilho existem quatro, o número de peças que podem desencadear o número de vezes que o gatilho, o intervalo de tempo é o intervalo de tempo entre duas gatilho adjacente, reproduzido automaticamente aberto o gatilho se começou a um gatilho depois do outro até que o número de peças ou você deixá-lo fazer uma pausa, animação pertence a otimização otimizar o desempenho.
Aqui Insert Picture Descrição
Aqui para adicionar um evento para gatilho, e, em seguida, clique na seta para a direita é copiar um evento sobre ele. Vire gatilho reprodução automática, defina o intervalo de tempo de 1s, então o número atual será +1 a cada 1 segundo carrossel é também, naturalmente, a cada 1 segundo para jogar a próxima imagem.
Aqui Insert Picture Descrição
Aqui Insert Picture Descrição
6. A porção de indicador
de demonstração utiliza quatro linhas é conseguido indicador de montagem, a cor de cada linha são feitas de ligação de dados. expressões ternários usadas aqui, é o número atual é igual a 2 é montada em frente da cor de fundo # 5FA2DD, se este estiver configurado # E6E9F5 (código de cor). Depois de tal ligação, por exemplo, apenas o número de linha actual é 0 é verdadeiros expressões ternários com uma cor de fundo é azul, os outros três expressões ternários com linha de montagem são falsas, por trás da cinza de exibição.
Aqui Insert Picture Descrição
Aqui Insert Picture Descrição
7. A melhoria da parte indicador
primeira demo do indicador é uma uma linha vazia para conseguir, mas mesmo uma linha vazia criaria um objeto completo no código e gastar um monte de recursos, de modo que pode ser substituído com a linha divisória um componente. Pessoas, se suas exigências de estilo, pode também ser conseguida com imagens e ícones.
Aqui Insert Picture Descrição
Não é uma demonstração de quatro imagens são fixos, e o número utilizada na imagem pode ser incerto, para que possamos criar um loop para criar uma imagem com o número correspondente de indicadores. Isso só vai criar um ponteiro, e o primeiro de vários indicadores em um valor fixo a partir do atual ciclo de roxo No. 1 é criado criado nesta parte do ciclo pode se referir a mensagens falam ensaio criados.
Aqui Insert Picture Descrição
Aqui Insert Picture Descrição
8. Conclusão
IVX função é muito poderoso, mas também pacote de componente muito delicada, podemos usá-lo para alcançar uma série de efeitos, basta olhar para como nós combinação desses componentes. Em seguida, para um caso, nossa mente e pensamento lógico é especialmente importante. Com estes, nós podemos ir para escolher os componentes certos reunidos no caso, queremos evitar o desperdício de recursos e reduzir a complexidade do caso, na prática, lentamente acumular.

Acho que você gosta

Origin blog.51cto.com/14556317/2477275
Recomendado
Clasificación