Table des matières
Presentation Slideshow
Slider #2
Maison interface Web tutoriel HTML jQuery和CSS3类似PPT的演讲稿幻灯片插件_html/css_WEB-ITnose

jQuery和CSS3类似PPT的演讲稿幻灯片插件_html/css_WEB-ITnose

Jun 21, 2016 am 09:01 AM

简要教程

这是一款简单的使用jQuery和CSS3制作类似PPT的演讲稿幻灯片插件。该演讲稿幻灯片插件可以通过键盘上下左右方向键来控制,并且左上角带有菜单按钮,通过菜单项可以选择相应的幻灯片页面。

查看演示       下载插件

使用方法

HTML结构

该演讲稿幻灯片的HTML结构有2个主要的部分:一个

<div class="cd-slideshow-wrapper">  <nav class="cd-slideshow-nav">    <button class="cd-nav-trigger">      Open Navigation      <span aria-hidden="true"></span>    </button>         <div class="cd-nav-items">      <ol>        <li><a href="#slide-1">Slide 1</a></li>        <li>          <a href="#slide-2">Slide 2</a>          <ol class="sub-nav">            <li><a href="#slide-2">Slide 2 - Sub 1</a></li>            <!-- other sub-slide links here -->          </ol>        </li>        <li><a href="#slide-3">Slide 3</a></li>        <!-- other slide links here -->      </ol>    </div> <!-- .cd-nav-items -->  </nav> <!-- .cd-slideshow-nav -->     <ol class="cd-slideshow">    <li class="visible" id="slide-1">      <div class="cd-slider-content">        <div class="content-wrapper">          <h2 id="Presentation-Slideshow">Presentation Slideshow</h2>          <p>A simple presentation template in CSS & jQuery.</p>        </div>      </div>    </li>      <li id="slide-2">      <ol class="sub-slides">        <li>          <div class="cd-slider-content">            <div class="content-wrapper">              <h2 id="Slider">Slider #2</h2>            </div>          </div>        </li>        <!-- sub-slides content here -->               </ol> <!-- .sub-slides -->    </li>      <!-- additional slides here -->  </ol> <!-- .cd-slideshow --></div> <!-- .cd-slideshow-wrapper -->
Copier après la connexion

CSS样式

在小屏幕设备中(视口小于1100像素),插件会将所有的幻灯片项目优化为一个列表。对于右子项目的幻灯片,插件中实现了一个可以触摸滑动的slider,优化可以滑动来查看显示子项目。

.cd-slideshow .sub-slides {  width: 100%;  transition: transform 0.3s;}.cd-slideshow > li, .cd-slideshow .sub-slides > li {  position: relative;  z-index: 1;  height: 100vh;  width: 100vw;}.cd-slideshow .sub-slides > li {  float: left;}
Copier après la connexion

带子项目的有序列表项的宽度使用JavaScript来设置。当用户从一个子项目导航到前一个或前一个子项目的时候,插件会沿X轴移动.sub-slides元素。

在大屏幕设备中,.cd-slideshow-wrapper元素的高度被设置为100vh,并设置为overflow:hidden,所以只有在视口中的幻灯片是可见的。然后.cd-slider-content元素被设置宽度、高度和margin使它相对于视口居中。

.visible class类用于添加到当前可见的幻灯片上:它的作用是隐藏.cd-slider-content::after伪元素(该伪元素用于在幻灯片聚焦时改变页面背景色)以及显示幻灯片的内容。

@media only screen and (min-width: 1100px) {  .cd-slideshow-wrapper {    height: 100vh;    overflow: hidden;  }    .cd-slideshow {    transition: transform 0.6s;  }  .cd-slideshow > li, .cd-slideshow .sub-slides > li {    height: auto;    width: auto;  }    .cd-slider-content {    height: 84vh;    width: 90vw;    margin: 2vh 5vw;    border-radius: 10px;    cursor: pointer;  }  .visible .sub-visible .cd-slider-content,   .visible > .cd-slider-content {    /* visible slide */    cursor: auto;  }  .cd-slideshow > li:first-of-type .cd-slider-content {    margin-top: 8vh;  }  .sub-slides > li:first-of-type .cd-slider-content {    margin-left: 5vw;  }  .sub-slides > li .cd-slider-content {    margin-left: 1.25vw;    margin-right: 1.25vw;  }  .cd-slider-content .content-wrapper {    height: 100%;    /* hide the slide content if the slide is not selected/visible */    opacity: 0;    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);    border-radius: inherit;    transition: opacity 0.6s;  }  .cd-slider-content::after {    /* this is used to change the slide background color when the slide is out of focus */    content: '';    position: absolute;    z-index: 3;    top: 0;    left: 0;    height: 100%;    width: 100%;    border-radius: inherit;    background-color: #3a3a3a;    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);    opacity: 1;    visibility: visible;    transition: opacity 0.6s, visibility 0.6s;  }  .visible .cd-slider-content .content-wrapper {    opacity: 1;  }  .visible .cd-slider-content::after {    opacity: 0;    visibility: hidden;  }}
Copier après la connexion

当用户从一个幻灯片页面导航到另一个幻灯片页面时,插件会使用JavaScript沿Y轴移动.cd-slideshow元素。

JavaScript

该演讲稿幻灯片可以通过2中方式来移动:使用键盘方向键和使用导航菜单。

幻灯片的导航菜单功能通过2个主要的函数来实现:updateSlide函数用于从当前幻灯片导航到下一个或前一个幻灯片,updateSubSlide函数用于从当前幻灯片子项导航到前一个或下一个子项目。例如updateSubSlide函数的代码如下:

function updateSubSlide(listItem, string, subSlide) {  var translate,    marginSlide = Number(listItem.find('.cd-slider-content').eq(0).css('margin-right').replace('px', ''))*6,    windowWidth = window.innerWidth;    windowWidth = ( mq == 'desktop' ) ? windowWidth - marginSlide : windowWidth;    if( listItem.children('.sub-slides').length > 0 ) {    var subSlidesWrapper = listItem.children('.sub-slides'),      visibleSubSlide = subSlidesWrapper.children('.sub-visible');         if( string == 'nav' ) {      /* we have choosen a new slide from the navigation */      var newSubSlide = subSlide;    } else {      var newSubSlide = (string == 'next') ? visibleSubSlide.next() : visibleSubSlide.prev();    }    var newSubSlidePosition = newSubSlide.index();    translate = parseInt(- newSubSlidePosition*windowWidth);    setTransformValue(subSlidesWrapper.get(0), 'translateX', translate + 'px');    visibleSubSlide.removeClass('sub-visible');    newSubSlide.addClass('sub-visible');  }}  function setTransformValue(element, property, value) {  element.style["-webkit-transform"] = property+"("+value+")";  element.style["-moz-transform"] = property+"("+value+")";  element.style["-ms-transform"] = property+"("+value+")";  element.style["-o-transform"] = property+"("+value+")";  element.style["transform"] = property+"("+value+")";  // ...}
Copier après la connexion

来源jQuery之家

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

See all articles