Question

如何使用层叠样式表和 java脚本为网页创建幻灯片交易？

Answer 1

您可以使用reveal.js库，该库使用javascript和css创建幻灯片。 http://lab.hakim.se/reveal-js/#/

它可以选择滑动渐变缩放或旋转每张幻灯片。

要创建每个带有两个幻灯片的幻灯片，标记如下：

 <div class="reveal">

            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">
                <section>
                    <h1>Slide Title</h1>
                    <p>Slide content goes here</p>
                </section>

                <section>
                    <h1>Slide Title</h1>
                    <p>Slide content goes here</p>
               </section>

            </div>

        </div>

Answer 2

jQuery是最简单的闪存，但css3中没有闪存的关键帧是您的选择。

示例代码：

<html>
<head><title>Slide transaction</title><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(window).ready(function(){
$("#btn").click(function(){
 $(".slide1").animate({
  width : 'toggle'
 },1000,function () { $(".slide2").animate({
  width : 'toggle'
 },1000);});
 });
 });
 </script>
 <style>
 .slide1 {
  background-color : yellowgreen;
  width:100%;
  height : 250px;
  display : block;
  }
  .slide2 {
  background-color : darkblue;
  width : 100%;
  height : 250px;
  display: none;
  }
  </style>
  <body>
  <div class="slide1">
  This is slide 1.
  </div>
  <div class="slide2">
  This is slide 2
   </div>
   <input type="button" id="btn" value="Click Me!" style="position:absolute;top:400px;"/>
   </body>
   </html>

我想做一个Web幻灯片交易

2 个答案: