Javascript实现图片轮播:(一)让图片跳动起来!-吴统威的博客_html/css

Heim

Web-Frontend

HTML-Tutorial

Javascript实现图片轮播:(一)让图片跳动起来!-吴统威的博客_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:57 AM

Javascript实现图片轮播:(一)让图片跳动起来!

作者 :towaywu

2016-02-16 11:42:53.0

29 浏览

类别 :HTML/CSS/JAVASCRIPT 前端编程编程语言

图片轮播效果,在现在的网站的首页,差不多是必备的效果显示. 所以我从三个方面来讲解这一效果的简单实现.

图片跳动起来
图片序列控制的实现
前后按钮控制的实现

这篇文章来看图片按照间隔时间进行切换.

我们先把结构代码完成,这个我就不做详细的讲解了.看效果

代码如下:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style>        * {            box-sizing: border-box;        }        a {            text-decoration: none;        }        ul,ol,li{          list-style: none;            margin: 0;            padding: 0;        }        #slider{            width: 800px;            height: 300px;            overflow: hidden;            position: relative;            margin: 0 auto;        }        #slider ul{            width: 2400px;            position: relative;        }        #slider ul:after{            content: " ";            width: 0;            height: 0;            display: block;        }        #slider ul li{            float: left;            width: 800px;            height: 300px;            overflow: hidden;        }        #slider ul li img{            width: 100%;        }        #slider ol{            position: absolute;            bottom: 10px;            left: 46%;        }        #slider ol li{            display: inline-block;        }        #slider ol li a{            display: inline-block;            padding:4px 8px;            border-radius:15px;            background-color: #000;            color: #fff;        }        #slider .prev, #slider .next{            display: inline-block;            position: absolute;            top: 49%;            background-color: #000;            opacity: 0.6;            color: #fff;            padding: 3px;        }        #slider .prev{            left: 10px;        }        #slider .next{            right: 10px;        }    </style></head><body>       <div id="slider">        <ul>            <li> <img  src="/static/imghwm/default1.png"  data-src="http://www.bates-hewett.com/images/sliders/slider-1.jpg"  class="lazy" / alt="Javascript实现图片轮播:(一)让图片跳动起来!-吴统威的博客_html/css_WEB-ITnose" > </li>            <li> <img  src="/static/imghwm/default1.png"  data-src="http://www.bates-hewett.com/images/sliders/slider-2.jpg"  class="lazy" / alt="Javascript实现图片轮播:(一)让图片跳动起来!-吴统威的博客_html/css_WEB-ITnose" > </li>            <li> <img  src="/static/imghwm/default1.png"  data-src="http://www.bates-hewett.com/images/sliders/slider-3.jpg"  class="lazy" / alt="Javascript实现图片轮播:(一)让图片跳动起来!-吴统威的博客_html/css_WEB-ITnose" > </li>        </ul>        <ol>            <li> <a href="#">1</a> </li>            <li> <a href="#">2</a> </li>            <li> <a href="#">3</a> </li>        </ol>        <a href="#">上一张</a>        <a href="#">下一张</a>   </div></body></html>

好的,现在我们来通过JS控制图片的跳转.

首先我们需要找到图片所在的位置,这里我们是通过ul来进行布局的所以首先得找到UL下的LI的数目

接着让图片一张一张的展示,我们使用了视窗的模式,就是遮罩层的模式.#slider是一个视窗,ul是视窗外的景色,而ul得景色是横向排版的

然后就是让外面的景色显示为视窗的大小,也就是让每一张图片作为每一次的视窗景色,这里就是控制图片的大小要与视窗同等大小.

上面讲解的是一个概念,也就是布局的处理,下面我们JS的控制了,要实现图片间隔的显示不同.我们就需要用到JS的setInterval或者setTimeout.这里我们使用setInterval(因为这个用起来方便.)

每跳转一次,我们控制的是UL的position的left,这样就可以让ul下的景色,在每一次都是显示不一样,而这个left是根据视窗的宽度来决定,第一张left当然是-800 * 0 ,第二种就是 -800*1,第三种是-800*2...依次类推.那我们就可以得出下面的代码

<script>      (function(){          var slider = document.getElementById("slider");          var imgul = slider.getElementsByTagName("ul")[0];          var imglis = imgul.getElementsByTagName("li");          var len = imglis.length;          var index = 0;          setInterval(function(){              if(index >= len){                  index = 0;              }               imgul.style.left = - (800 * index) + "px";               index++;          },2000);      })();  </script>

JS代码这样看起来就很简单了. 我这里是设置2秒跳转依次,然后跳转的次数大于等于图片的数目后,让其返回到第一张图片.

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=202 ,欢迎大家传播与分享.

标签 :javascript教程javascript实例

HTML5 Camera(摄像头) 和 Video(视频)控制

已经没有数据

towaywu

一个喜欢技术,走在创业路上的屌丝!欢迎一起交流

编程的人微信公众号: bianchengderen

交流QQ群: 186659233

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?Mar 04, 2025 pm 12:32 PM

Das offizielle Konto -Webseite aktualisiert Cache, dieses Ding ist einfach und einfach und es ist kompliziert genug, um einen Topf davon zu trinken. Sie haben hart gearbeitet, um den offiziellen Account -Artikel zu aktualisieren, aber der Benutzer hat die alte Version immer noch geöffnet. Schauen wir uns in diesem Artikel die Wendungen und Wendungen und wie man dieses Problem anmutig ansehen. Nach dem Lesen können Sie sich leicht mit verschiedenen Caching -Problemen befassen, sodass Ihre Benutzer immer den frischesten Inhalt erleben können. Sprechen wir zuerst über die Grundlagen. Um es unverblümt auszudrücken, speichert der Browser oder Server einige statische Ressourcen (wie Bilder, CSS, JS) oder Seiteninhalte, um die Zugriffsgeschwindigkeit zu verbessern. Wenn Sie das nächste Mal darauf zugreifen, können Sie ihn direkt aus dem Cache abrufen, ohne ihn erneut herunterzuladen, und es ist natürlich schnell. Aber dieses Ding ist auch ein zweischneidiges Schwert. Die neue Version ist online,

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?Mar 04, 2025 pm 02:39 PM

Dieser Artikel zeigt einen effizienten PNG -Grenzzusatz zu Webseiten mithilfe von CSS. Es wird argumentiert, dass CSS im Vergleich zu JavaScript oder Bibliotheken eine überlegene Leistung bietet, um zu beschreiben, wie die Randbreite, Stil und Farbe für subtile oder herausragende Effekte angepasst werden können

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Was ist der Zweck des & lt; datalist & gt; Element?Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was ist der Zweck des & lt; Meter & gt; Element?Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Was ist der Zweck des & lt; Fortschritts & gt; Element?Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

See all articles