Javascript实现图片轮播:(一)让图片跳动起来!-吴统威的博客_html/css_WEB-ITnose
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/imghw/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/imghw/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/imghw/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
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1663
14
1420
52
1315
25
1266
29
1239
24
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
HTML, CSS et JavaScript: outils essentiels pour les développeurs Web
Apr 09, 2025 am 12:12 AM
HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
HTML: The Structure, CSS: The Style, Javascript: Le comportement
Apr 18, 2025 am 12:09 AM
Les rôles de HTML, CSS et JavaScript dans le développement Web sont: 1. HTML définit la structure de la page Web, 2. CSS contrôle le style de page Web, et 3. JavaScript ajoute un comportement dynamique. Ensemble, ils construisent le cadre, l'esthétique et l'interactivité des sites Web modernes.
L'avenir de HTML: évolution et tendances de la conception Web
Apr 17, 2025 am 12:12 AM
L'avenir de HTML est plein de possibilités infinies. 1) Les nouvelles fonctionnalités et normes comprendront plus de balises sémantiques et la popularité des composants Web. 2) La tendance de la conception Web continuera de se développer vers une conception réactive et accessible. 3) L'optimisation des performances améliorera l'expérience utilisateur grâce à des technologies de chargement d'image réactives et de chargement paresseux.
L'avenir de HTML, CSS et JavaScript: Tendances de développement Web
Apr 19, 2025 am 12:02 AM
Les tendances futures de HTML sont la sémantique et les composants Web, les tendances futures de CSS sont CSS-in-JS et CSShoudini, et les tendances futures de JavaScript sont WebAssembly et sans serveur. 1. La sémantique HTML améliore l'accessibilité et les effets de référencement, et les composants Web améliorent l'efficacité du développement, mais l'attention doit être accordée à la compatibilité du navigateur. 2. CSS-in-JS améliore la flexibilité de gestion du style mais peut augmenter la taille du fichier. CSShoudini permet le fonctionnement direct du rendu CSS. 3.WeBassembly optimise les performances de l'application du navigateur mais a une courbe d'apprentissage abrupte, et sans serveur simplifie le développement mais nécessite une optimisation des problèmes de démarrage à froid.
HTML vs CSS vs JavaScript: un aperçu comparatif
Apr 16, 2025 am 12:04 AM
Les rôles de HTML, CSS et JavaScript dans le développement Web sont: HTML est responsable de la structure du contenu, CSS est responsable du style et JavaScript est responsable du comportement dynamique. 1. HTML définit la structure et le contenu de la page Web via des balises pour assurer la sémantique. 2. CSS contrôle le style de page Web via des sélecteurs et des attributs pour le rendre beau et facile à lire. 3. JavaScript contrôle le comportement de la page Web via les scripts pour atteindre des fonctions dynamiques et interactives.
HTML: construire la structure des pages Web
Apr 14, 2025 am 12:14 AM
HTML est la pierre angulaire de la construction de la structure des pages Web. 1. HTML définit la structure et la sémantique du contenu et les utilisations, etc. Tags. 2. Fournir des marqueurs sémantiques, tels que, etc., pour améliorer l'effet SEO. 3. Pour réaliser l'interaction de l'utilisateur via des balises, faites attention à la vérification de la forme. 4. Utilisez des éléments avancés tels que, combinés avec JavaScript pour obtenir des effets dynamiques. 5. Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non déposées et des outils de vérification sont nécessaires. 6. Les stratégies d'optimisation comprennent la réduction des demandes HTTP, la compression du HTML, l'utilisation de balises sémantiques, etc.
