欢迎光临
我会一直在努力

实现轮播图的两种方法

第一种方法:

&lt;!DOCTYPE <strong>html</strong>&gt;
&lt;<strong>html</strong>&gt;

&lt;<strong>head</strong>&gt;
    &lt;<strong>meta </strong><strong>charset=</strong><strong>"utf-8" </strong>/&gt;
    &lt;<strong>title</strong>&gt;图片自动切换 图片轮播&lt;/<strong>title</strong>&gt;
    &lt;<strong>style </strong><strong>type=</strong><strong>"text/css"</strong>&gt;
        <em>/*注意 第一张图片z-index值是5,后面的图片值为1*/
</em>        <strong>*</strong>{<strong>margin</strong>: 0;<strong>padding</strong>: 0;}
        .<strong>banner </strong>{
            <strong>width</strong>: 1200<strong>px</strong>;
            <strong>height</strong>: 688<strong>px</strong>;
            <strong>position</strong>: <strong>relative</strong>;
            <strong>overflow</strong>: <strong>hidden</strong>;
            <strong>background-position</strong>: <strong>center</strong>;
        }

        .<strong>banner_slide_1 </strong>{
            <strong>position</strong>: <strong>absolute</strong>;
            <strong>top</strong>: 0;
            <strong>left</strong>: 0;
            <strong>display</strong>: <strong>block</strong>;
            <strong>transition</strong>: <strong>opacity </strong>0.5<strong>s</strong>;
            <strong>opacity</strong>: 1;
            <strong>z-index</strong>: 5;
        }

        .<strong>banner_slide_2 </strong>{
            <strong>position</strong>: <strong>absolute</strong>;
            <strong>top</strong>: 0;
            <strong>left</strong>: 0;
            <strong>display</strong>: <strong>none</strong>;
            <strong>transition</strong>: <strong>opacity </strong>0.5<strong>s</strong>;
            <strong>opacity</strong>: 0;
            <strong>z-index</strong>: 1;
        }

        .<strong>banner_slide_3 </strong>{
            <strong>position</strong>: <strong>absolute</strong>;
            <strong>top</strong>: 0;
            <strong>left</strong>: 0;
            <strong>display</strong>: <strong>none</strong>;
            <strong>transition</strong>: <strong>opacity </strong>0.5<strong>s</strong>;
            <strong>opacity</strong>: 0;
            <strong>z-index</strong>: 1;
        }
    &lt;/<strong>style</strong>&gt;

&lt;/<strong>head</strong>&gt;

&lt;<strong>body</strong>&gt;

&lt;<strong>div </strong><strong>class=</strong><strong>"banner"</strong>&gt;
    &lt;<strong>div </strong><strong>class=</strong><strong>"banner_slide_1" </strong><strong>id=</strong><strong>"banner1"</strong>&gt;&lt;<strong>img </strong><strong>src=</strong><strong>"./imgs/1.jpg" </strong><strong>alt=</strong><strong>"" </strong>/&gt;&lt;/<strong>div</strong>&gt;
    &lt;<strong>div </strong><strong>class=</strong><strong>"banner_slide_2" </strong><strong>id=</strong><strong>"banner2"</strong>&gt;&lt;<strong>img </strong><strong>src=</strong><strong>"./imgs/2.jpg" </strong>/&gt;&lt;/<strong>div</strong>&gt;
    &lt;<strong>div </strong><strong>class=</strong><strong>"banner_slide_3" </strong><strong>id=</strong><strong>"banner3"</strong>&gt; &lt;<strong>img </strong><strong>src=</strong><strong>"./imgs/3.jpg" </strong>/&gt;&lt;/<strong>div</strong>&gt;
&lt;/<strong>div</strong>&gt;
&lt;<strong>script </strong><strong>type=</strong><strong>"text/javascript"</strong>&gt;
    <strong>window</strong>.<strong>onload</strong>=<strong>function </strong>bannerSlide() {
        <strong>var </strong>i = 0;
        <strong>var </strong>banner = <strong>new </strong>Array<em>//将图片创建为一个数组
</em>        banner[0] = <strong>document</strong>.getElementById(<strong>"banner1"</strong>);
        banner[1] = <strong>document</strong>.getElementById(<strong>"banner2"</strong>);
        banner[2] = <strong>document</strong>.getElementById(<strong>"banner3"</strong>);
        <strong>sli </strong>= setInterval(slide, 3000); <em>//轮播间隔时间
</em>        <strong>function </strong>slide() {
            <strong>if </strong>(i == banner.<strong>length </strong>- 1) {
                banner[0].<strong>style</strong>.<strong>display </strong>= <strong>"block"</strong>;
                banner[0].<strong>style</strong>.<strong>opacity </strong>= <strong>"1"</strong>;
                banner[i].<strong>style</strong>.<strong>opacity </strong>= <strong>"0"</strong>;
                setTimeout(<strong>function</strong>() {
                    banner[i].<strong>style</strong>.<strong>display </strong>= <strong>"none"</strong>;
                    banner[i].<strong>style</strong>.<strong>zIndex </strong>= <strong>"1"</strong>;
                    banner[0].<strong>style</strong>.<strong>zIndex </strong>= <strong>"5"</strong>;
                    i = 0;
                }, 500)
            } <strong>else </strong>{
                banner[i + 1].<strong>style</strong>.<strong>display </strong>= <strong>"block"</strong>;
                banner[i + 1].<strong>style</strong>.<strong>opacity </strong>= <strong>"1"</strong>;
                banner[i].<strong>style</strong>.<strong>opacity </strong>= <strong>"0"</strong>;
                setTimeout(<strong>function</strong>() {
                    banner[i + 1].<strong>style</strong>.<strong>zIndex </strong>= <strong>"5"</strong>;
                    banner[i].<strong>style</strong>.<strong>display </strong>= <strong>"none"</strong>;
                    banner[i].<strong>style</strong>.<strong>zIndex </strong>= <strong>"1"</strong>;
                    i++;
                }, 500)
            }
        }
    }
&lt;/<strong>script</strong>&gt;
&lt;/<strong>body</strong>&gt;

&lt;/<strong>html</strong>&gt;

第二种方式:

&lt;!DOCTYPE <strong>html</strong>&gt;
&lt;<strong>html</strong>&gt;

&lt;<strong>head</strong>&gt;
    &lt;<strong>meta </strong><strong>charset=</strong><strong>"utf-8" </strong>/&gt;
    &lt;<strong>title</strong>&gt;&lt;/<strong>title</strong>&gt;
    &lt;<strong>style </strong><strong>type=</strong><strong>"text/css"</strong>&gt;
        <strong>*</strong>{<strong>padding</strong>: 0;<strong>margin</strong>: 0;
        }
        .<strong>banner </strong>{
            <strong>width</strong>: 100%;
            <strong>min-width</strong>: 1200<strong>px</strong>;
            <strong>height</strong>: 688<strong>px</strong>;
            <strong>overflow</strong>: <strong>hidden</strong>;
        }

        .<strong>banner_index </strong>{
            <strong>position</strong>: <strong>relative</strong>;
        }

        .<strong>banner_slide_1 </strong>{
            <strong>position</strong>: <strong>absolute</strong>;
            <strong>top</strong>: 0;
            <strong>left</strong>: 0;
            <strong>right</strong>: 0;
            <strong>bottom</strong>: 0;
            <strong>display</strong>: <strong>block</strong>;
            <strong>transition</strong>: <strong>opacity </strong>0.5<strong>s</strong>;
            <strong>opacity</strong>: 1;
            <strong>z-index</strong>: 5;
            <strong>background</strong>: <strong>url</strong>(<strong>imgs/1.jpg</strong>) <strong>no-repeat</strong>;
            <strong>background-position</strong>: 30% 30%;

        }

        .<strong>banner_slide_2 </strong>{
            <strong>position</strong>: <strong>absolute</strong>;
            <strong>top</strong>: 0;
            <strong>left</strong>: 0;
            <strong>right</strong>: 0;
            <strong>bottom</strong>: 0;
            <strong>display</strong>: <strong>none</strong>;
            <strong>transition</strong>: <strong>opacity </strong>0.5<strong>s</strong>;
            <strong>opacity</strong>: 0;
            <strong>z-index</strong>: 1;
            <strong>background</strong>: <strong>url</strong>(<strong>./imgs/2.jpg</strong>) <strong>no-repeat</strong>;
            <strong>background-position</strong>: 30% 30%;
        }

        .<strong>banner_slide_3 </strong>{
            <strong>position</strong>: <strong>absolute</strong>;
            <strong>top</strong>: 0;
            <strong>left</strong>: 0;
            <strong>right</strong>: 0;
            <strong>bottom</strong>: 0;
            <strong>display</strong>: <strong>none</strong>;
            <strong>transition</strong>: <strong>opacity </strong>0.5<strong>s</strong>;
            <strong>opacity</strong>: 0;
            <strong>z-index</strong>: 1;
            <strong>background</strong>: <strong>url</strong>(<strong>imgs/3.jpg</strong>) <strong>no-repeat</strong>;
            <strong>background-position</strong>: 30% 30%;
        }
    &lt;/<strong>style</strong>&gt;
    &lt;<strong>script </strong><strong>type=</strong><strong>"text/javascript"</strong>&gt;
        <strong>window</strong>.<strong>onload</strong>=<strong>function </strong>bannerSlide() {
            <strong>if </strong>(!<strong>document</strong>.getElementById) <strong>return false</strong>;
            <strong>if </strong>(!<strong>document</strong>.getElementsByTagName) <strong>return false</strong>;
            <strong>if </strong>(!<strong>document</strong>.getElementById(<strong>"bannerBox"</strong>)) <strong>return false</strong>;
            <strong>var </strong>i = 0;
            <strong>var </strong>box = <strong>document</strong>.getElementById(<strong>"bannerBox"</strong>);
            <strong>var </strong>banner = box.getElementsByTagName(<strong>"div"</strong>);
            <strong>sli </strong>= setInterval(slide, 4000); <em>//轮播间隔时间
</em>            <strong>function </strong>slide() {
                <strong>if </strong>(i === banner.<strong>length </strong>- 1) {
                    banner[0].<strong>style</strong>.<strong>display </strong>= <strong>"block"</strong>;
                    banner[0].<strong>style</strong>.<strong>opacity </strong>= <strong>"1"</strong>;
                    banner[i].<strong>style</strong>.<strong>opacity </strong>= <strong>"0"</strong>;
                    setTimeout(<strong>function</strong>() {
                        banner[i].<strong>style</strong>.<strong>display </strong>= <strong>"none"</strong>;
                        banner[i].<strong>style</strong>.<strong>zIndex </strong>= <strong>"1"</strong>;
                        banner[0].<strong>style</strong>.<strong>zIndex </strong>= <strong>"5"</strong>;
                        i = 0;
                    }, 500) <em>//动画过渡时间,搭配CSS使用
</em>                } <strong>else </strong>{
                    banner[i + 1].<strong>style</strong>.<strong>display </strong>= <strong>"block"</strong>;
                    banner[i + 1].<strong>style</strong>.<strong>opacity </strong>= <strong>"1"</strong>;
                    banner[i].<strong>style</strong>.<strong>opacity </strong>= <strong>"0"</strong>;
                    setTimeout(<strong>function</strong>() {
                        banner[i + 1].<strong>style</strong>.<strong>zIndex </strong>= <strong>"5"</strong>;
                        banner[i].<strong>style</strong>.<strong>display </strong>= <strong>"none"</strong>;
                        banner[i].<strong>style</strong>.<strong>zIndex </strong>= <strong>"1"</strong>;
                        i++;
                    }, 500)
                }
            }
        }
    &lt;/<strong>script</strong>&gt;

&lt;/<strong>head</strong>&gt;

&lt;<strong>body</strong>&gt;

&lt;<strong>div </strong><strong>id=</strong><strong>"bannerBox" </strong><strong>class=</strong><strong>"banner banner_index"</strong>&gt;
    &lt;<strong>div </strong><strong>class=</strong><strong>"banner_slide_1" </strong><strong>id=</strong><strong>"banner1"</strong>&gt;&lt;/<strong>div</strong>&gt;
    &lt;<strong>div </strong><strong>class=</strong><strong>"banner_slide_2" </strong><strong>id=</strong><strong>"banner2"</strong>&gt;&lt;/<strong>div</strong>&gt;
    &lt;<strong>div </strong><strong>class=</strong><strong>"banner_slide_3" </strong><strong>id=</strong><strong>"banner3"</strong>&gt;&lt;/<strong>div</strong>&gt;
&lt;/<strong>div</strong>&gt;

&lt;/<strong>body</strong>&gt;

&lt;/<strong>html</strong>&gt;
赞(3) 打赏
未经允许不得转载:前端范 » 实现轮播图的两种方法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏