当前位置:主页 > 网站优化 >

实现轮播图的两种方法

作者: 采集侠 分类: 网站优化 发布时间: 2019-08-16 11:21 阅读量:

实现轮播图的两种方法

第一种方法: &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;
本文链接地址:http://www.seohuizhou.com/webyouhua/1483.html
上一篇:<<全网最热Python3入门+进阶 更快上手实际开发
下一篇:我们为什么要学习前端开发>>