none
alternar imagens

    質問

  • Tenho algumas imagens, fotos em uma pasta, e preciso que ao abrir a página estas fotos sejam alternadas com slides.

    Eu sei associar uma imagem no comando image, mas neste caso tenho mais de uma imagem e precisso que alterne automaticamente. 

    Alguém poderia sugerir algo?

    2012年11月5日 19:05

回答

  • Rapaz,

    Pra ficar bom mesmo seu slide de imagem, utiliza um já pronto onde você só especifica as imagens que irão ser usadas. Existem bibliotecas javascript livres que possuem muito recurso, desde de efeitos legais como componentes como grid, slide de foto, slider, calendário e etc tudo clientside. A biblioteca mais usada é o "jquery", que possui uma variedade enorme de recurso. Dá uma olhada no site "jquery.com" e confere os componentes e os recursos que ele oferece. Para usa-lo basta setar uma referência para o script do "jquery" em sua página. Você pode fazer o download do script jquery no site mesmo. Dá uma olhada, garanto que não irá perder tempo.

    Abraço!

    • 回答としてマーク Wilson Boris 2012年11月6日 11:57
    2012年11月6日 11:40

すべての返信

  • Fazer um script (javascript) que use a função "setInterval", dessa forma você poderá executar determinado comando em intervalos de tempo.

    Algo Assim:

    setInterval(function()  { alert("OK"); }, 5000);

    Nesse comando estou dizendo para o comando "alert('ok')';" ser executado a cada 5 segundos infinitamente. Você só precisa alterar o source da imagem neste comando e definir um tempo.

    2012年11月5日 19:34
  • Marcos, muito obrigado pelo retorno.

    Parece-me uma sugestão!

    Na minha página aspx eu tenho uma imagem em um panel conforme código abaixo.

    Eu nunca usei javascript e estou em dúvida quanto ao source da imagem, pois como verifica estou usando "ImageUrl".

    Caso possa dar mais um empurranzinho, rsrsrsrs.

    <asp:Panel ID="Panel10" runat="server" Height="256px" Width="916px">
                            <asp:Image ID="Image3" runat="server"
                                ImageUrl="~/Imagens/Site/Corpo/Banner/banner extendido azul.png" />
    </asp:Panel>

    2012年11月5日 20:15
  • Certo.

    Você está utilizando controles do asp.net, mas isso não é problema e não tem diferença quando se usa javascript, pois todo elemento asp.net é renderizado como seu elemento html respectivo. Assim um controle Image do asp.net será renderizado como um "img", uma gridview é renderizada como "table" e assim vai. Quero dizer com isso, que a maniuplação dos elementos via javascript é dada da mesma forma só tomando cuidado com o id do elemento em questão, pois o asp.net altera o id do elemento quando renderizado no browser (quando utiliza masterpage e não especificou se o "ClientID" é static).

    Agora vai o exemplo de código (coloca o bloco de código antes do fechamento da tag body):

    <script type="text/javascript" >

    function AlteraImagem()
            {
                var imagem = document.getElementById("minhaimagem");
                imagem.src =  'caminho_da_minha_imagem';
            }

            setInterval(AlteraImagem(), 5000);

    </script>

    2012年11月5日 20:32
  • Tentei com a estrutura abaixo, sem sucesso:

    <asp:Panel ID="Panel10" runat="server" Height="256px" Width="916px">
                            <asp:Image ID="Image3" runat="server" />
                        </asp:Panel>

    <script type="text/javascript" >

            function AlteraImagem() {
                var imagem = document.getElementById("Image3");
                imagem.src = '~/Imagens/Site/Corpo/Banner/bannerextendidoazul.png';
                imagem.src = '~/Imagens/Site/Corpo/Banner/bannerextendido.png';
            }

            setInterval(AlteraImagem(), 5000);

    </script>


    </body>

    2012年11月5日 20:44
  • Vamos lá,

    1° - O símbolo "~" utilizado para pegar o caminho relativo do arquivo só funciona via asp.net. Isso não funciona no javascript. Você terá de fornecer o caminho exato do arquivo ou fazer de forma relativa também usando o ".." para voltar um diretório. Exemplo: "../../MinhaImagem.jpg" (Aqui, minha imagem está dois níveis acima do arquivo atual (página)).

    2° - Verifique o id do elemento (da imagem no caso) gerado no browser, as vezes o asp.net altera o id dependendo de algumas coisas. Execute a página no browser, clique com o botão direito e veja o código fonte da página, pegue o id da imagem e use no script.

    3 ° - Caso esteja dando erro no script, você não conseguirá saber se deu erro ou o pq do erro. Você deve baixar a ferramenta "firebug" do firebox e usa-la. Aconselho o uso do firefox para desenvolvimento. Acredite, cada vez mais você precisará do javascript, e sem o firefox as coisas tornam-se bem complicadas, pois com o firebug você detecta qualquer erro que deu client-side e ainda o pq do erro. Por exemplo, caso o seu script esteja correto, mas nenhuma imagem aparece é provavel que o caminho que você setou para a imagem não contêm nada. Assim você não conseguirá saber, a não ser pelo firebug que já alerta.

    2012年11月5日 21:05
  • Opa!

    Consegui qua apareça uma imagem como código abaixo. Peguei o id da imagem no código fonte da página e acertei o endereço, mas falta alternar.

    Quanto ao "getElementById" e "imagem.src" é isso mesmo?

    <script type="text/javascript" >

            function AlteraImagem() {
                var imagem = document.getElementById("Image3");
                imagem.src = 'http://localhost:51764/Imagens/Site/Corpo/Banner/bannerextendidoazul.png';
                imagem.src = 'http://localhost:51764/Imagens/Site/Corpo/Banner/bannerextendido.png';
            }
            setInterval(AlteraImagem(), 5000);

    </script>

    2012年11月6日 0:42
  • iss mesmo. Agora você deve criar uma lógica para alterar as imagens (um "if" ou "switch"). A automação está pronta.
    2012年11月6日 11:33
  • Rapaz,

    Pra ficar bom mesmo seu slide de imagem, utiliza um já pronto onde você só especifica as imagens que irão ser usadas. Existem bibliotecas javascript livres que possuem muito recurso, desde de efeitos legais como componentes como grid, slide de foto, slider, calendário e etc tudo clientside. A biblioteca mais usada é o "jquery", que possui uma variedade enorme de recurso. Dá uma olhada no site "jquery.com" e confere os componentes e os recursos que ele oferece. Para usa-lo basta setar uma referência para o script do "jquery" em sua página. Você pode fazer o download do script jquery no site mesmo. Dá uma olhada, garanto que não irá perder tempo.

    Abraço!

    • 回答としてマーク Wilson Boris 2012年11月6日 11:57
    2012年11月6日 11:40
  • Marcos,

    achei uma estrutura simples com "Timer1", não sei se é a mais adequada, mas funciona:

    <asp:UpdatePanel ID="UpdatePanel4" runat="server">
                            <ContentTemplate>
                                <asp:Panel ID="Panel10" runat="server" Height="240px" Width="916px">
                                    <asp:Image ID="Image3" runat="server"
                                        ImageUrl="~/Imagens/Site/Corpo/Banner/bannerextendidoazul.png" />
                                    <asp:Timer ID="Timer1" runat="server" Interval="5000">
                                    </asp:Timer>
                                </asp:Panel>
                            </ContentTemplate>
    </asp:UpdatePanel>

    Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
            If Image3.ImageUrl = "http://localhost:51764/Imagens/Site/Corpo/Banner/bannerextendidoazul.png" Then
                Image3.ImageUrl = "http://localhost:51764/Imagens/Site/Corpo/Banner/bannerextendido.png"
            Else
                Image3.ImageUrl = "http://localhost:51764/Imagens/Site/Corpo/Banner/bannerextendidoazul.png"
            End If
    End Sub

    2012年11月6日 13:20