Question

我想为我的其中一个页面添加幻灯片放映过渡..

这是代码，

＆＃13;

        var index= 1;
        
        var toggle=0;
        
        function plusIndex(n){
        	index = index + n;
        	showImage(n);
        }
        showImage(1);
        
        function showImage(n){
        var i;
        var x = document.getElementsByClassName("placestovisit");
        if (index > x.length) {index=1};
        if (index < 1) {index= x.length};
        for (i=0; i<x.length; i++)
        {
          x[i].style.display="none";
        }
            x[index-1].style.display= "block";
        }
        
        autoSlide();   
        function autoSlide(){
        if (toggle) {return};
        var i;
        var x = document.getElementsByClassName("placestovisit");
        for (i=0; i<x.length; i++)
        {
          x[i].style.display="none";
        }
        if (index > x.length) {index = 1};
            x[index-1].style.display= "block";
        index++;
        setTimeout(autoSlide, 4000);
        }

＆＃13;

Fiddle Demo

我是javascript以及css的新手。

以上工作正常，离线过渡，我不知道小提琴有什么问题。我认为有一些小的误解，那就是......

任何人都可以帮我添加幻灯片转换。

我需要类似链接http://www.devtrix.net/sliderman/examples.html

的内容

Answer 1

你可以使用css并让你的Slider改变图像像褪色，缩放，..

animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

检查W3Schools示例：here

您也可以使用Amazing Slider等SildeShow Maker软件。易于下载，易于使用：download link

从中看到Screeshot：

参见jsfiddle示例：jsfiddle

Answer 2

问题是你正在将css显示属性交换到 display：none ，这会立即使div不可见，而不是等待任何淡入淡出。

不要一次打开/关闭显示，而是尝试fadeOut：

fadeOut("slow", function () {
$(this).css({display:"none"});
});

区别在于 fadeOut 的第二个参数是一个回调函数，它在淡出完成后运行。

Answer 3

看一下下面的代码片段。我已经介绍了jQuery用于简单的动画效果。

使用效果：jQuery.fadeIn

jQuery还有很多其他动画效果，可以在jQuery.fadeIn被使用的地方使用。

看看jQuery.animate方法

我还清理了一些代码并编写了一个简单的逻辑来显示autoSlide中的下一个位置

var index = 0,
  totalPlaceCount = 0;

function plusIndex(n) {
  index = index + n;
  showImage(index);
}

function updateVisible(index) {
  $(".placestovisit").css({
    display: "none"
  });
  var targetPlace = $($(".placestovisit").get(index));
  targetPlace.fadeIn(1000);
  //console.log("Showing : ", index);
}

function showImage(n) {
  updateVisible(n);
}

function autoSlide() {
  index++;
  var targetPlaceToShow = index % totalPlaceCount;
  showImage(targetPlaceToShow);
  setTimeout(autoSlide, 4000);
}
$(document).ready(function() {
  totalPlaceCount = $(".placestovisit").length;
  $("#btn1").on("click", plusIndex.bind(null, -1));
  $("#btn2").on("click", plusIndex.bind(null, 1));
  autoSlide();
});

.html .body {
  height: 100%;
}

#placescontainer {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border: 1px solid black;
}

#placescontainer img {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: width 2s, height 4s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 4s;
}

#placescontainer .btn {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 2px solid;
  border-radius: 50px;
  top: 50%;
  background: none;
  color: white;
  font-size: 20px;
}

#placescontainer .play {
  position: absolute;
  height: 50px;
  border: 2px solid;
  top: 20%;
  right: 10%;
  color: white;
  border-radius: 20px;
  background: none;
  font-size: 20px;
}

#placescontainer .play:hover {
  position: absolute;
  height: 50px;
  border: 2px solid;
  top: 20%;
  right: 10%;
  color: white;
  border-radius: 20px;
  background: #06445F;
  font-size: 20px;
}

#placescontainer #btn2 {
  position: relative;
  float: right;
}

#placescontainer #btn3 {
  position: absolute;
  top: 5%;
}

#placescontainer #btn1:hover {
  background: #06445F;
}

#placescontainer #btn2:hover {
  background: #06445F;
}

.placestovisit {
  position: absolute;
  width: 100%;
  height: 100%;
}

.placestovisit h1 {
  position: absolute;
  display-type: block;
  top: 17%;
  left: 5%;
  color: white;
  border: 2px solid;
  padding: 10px;
}

.placestovisit h1:hover {
  position: absolute;
  display-type: block;
  top: 17%;
  left: 5%;
  color: white;
  border: 2px solid;
  background: #06445F;
  padding: 10px;
}

.placestovisit h2 {
  position: absolute;
  color: white;
  top: 30%;
  left: 5%;
  width: 30%;
  font: 15px/25px Serif;
  font-weight: 300;
  padding: 10px;
  border-radius: 15px;
  background: rgba(4, 10, 12, 0.6);
}

.placestovisit h2:hover {
  position: absolute;
  color: white;
  top: 30%;
  left: 5%;
  width: 30%;
  font: 15px/25px Serif;
  font-weight: 300;
  padding: 10px;
  border-radius: 15px;
  background: #06445F;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="placescontainer">
  <div class="placestovisit fade">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Hanumangundi_Falls.jpg/1200px-Hanumangundi_Falls.jpg" alt="" />
    <h1>Hanumanagundi Falls</h1>
    <h2> Suthanabbe Falls or Hanumanagundi Falls is located in the hilly surroundings of the Kudremukh National Park in the Chikkamagaluru district of Karnataka, India. Suthanabbe Falls is located between Karkala and Lakya dam in the Kudremukh national park.
      The water falls from a height of 22 meters creating a scenic surroundings around it.</h2>
  </div>

  <div class="placestovisit fade">
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Hampi_virupaksha_temple.jpg" alt="" />
    <h1> Hambi(Hambe) </h1>
    <h2> Hampi (Hampe) is a village and temple town recognised as a UNESCO World Heritage Site, listed as the Group of Monuments at Hampi. in northern Karnataka, India. It was one of the richest and largest cities in the world during its prime. It is located
      within the ruins of the city of Vijayanagara, the former capital of the Vijayanagara Empire. Predating the city of Vijayanagara, Hampi continues to be an important religious centre, housing the Virupaksha Temple and several other monuments belonging
      to the old city. According to statistics of 2014, Hampi is the most searched historical place in Karnataka on Google.</h2>
  </div>
  <div class="placestovisit w3-animate-fading">
    <img src="http://www.thebetterindia.com/wp-content/uploads/2012/09/IMG_0750-Com-800x533.jpg" alt="" />
    <h1> Agumbe </h1>
    <h2> Agumbe is a hill station which can be reached by bikes or cars. The way to this place is a diversion from Parkala (The diversion is just a few kms from DT). The best part of the trip to Agumbe is the ride. Beautiful sceneries on both sides will keep
      company all along the way. This place is abount 45 km from Manipal. Agumbe is one of the highest peaks of the Western Ghats located about 60kms from Udupi. Situated at a height of 830 metres from sea level, it overlooks the Arabian Sea. Agumbe is
      part of the Shimoga district which is a neighboring district of Udupi. </h2>
  </div>

  <div class="placestovisit fade">
    <img src="https://d28dwf34zswvrl.cloudfront.net/wp-content/uploads/2017/01/kerala-carbon-neutral-panchayat.jpg" alt="" />
    <h1> Kerala </h1>
    <h2> The border of Kerala is just 75 km from Manipal. The 300-year-old Bekal Fort, shaped like a giant key-hole, is one of the largest and best-preserved forts in Kerala. Surrounded by a splendid beach, the historic Bekal Fort offers a superb view of the
      Arabian Sea from its tall observation towers, where a few centuries ago huge cannons used to be placed. Today, it is one of the favourite spots for film-makers because the Bekal Fort and its surroundings with backwaters and hilly destinations make
      fascinating locales. This fort was made by Tipu Sultan and is built right next to the sea. The popular song 'Tu Hi Re' was picturised with this fort in the backdrop.</h2>
  </div>

  <div class="placestovisit fade">
    <img src="http://udupitoday.com/udtoday/images/uploads/January/images/jan1431attur1.jpg" alt="" />
    <h1> Attur church </h1>
    <h2> Attur Church situated in the outskirts of Karkala town in Karnataka state — India. It is situated 58 km from Mangalore. Placed amidst placid greenery, the Attur-Karkala parish has a rich history with its origin tracing back to 1759. Moreover it is
      known for its miraculous history. Miracle, history, beauty, social activities, all bundled into one. Unlike others, the church is a place of worship and belief for all, irrespective of caste and creed. An vidence for universal peace and brotherhood.
      People from all walks of the society come here to offer their prayers to St Lawrence</h2>
  </div>
  <button class="btn" id="btn1"> &#10094;</button>
  <button class="btn" id="btn2"> &#10095;</button>

  <button class="play" onclick="toggle=1-toggle; autoSlide()" id="btn3"> Play/Pause </button>

</div>

Answer 4

简单的淡入效果可以通过css完成，如下所示。拼贴效果需要更多编码;）

    var index = 1;

    var toggle = 0;

    function plusIndex(n) {
      index = index + n;
      showImage(n);
    }
    showImage(1);

    function showImage(n) {
      var i;
      var x = document.getElementsByClassName("placestovisit");
      if (index > x.length) {
        index = 1
      };
      if (index < 1) {
        index = x.length
      };
      for (i = 0; i < x.length; i++) {
        x[index - 1].style.opacity = 0
      }
      x[index - 1].style.opacity = 0;
      if (x[index - 1].className.indexOf('initial') == -1) {
        x[index - 1].className += ' initial';
      }
      x[index - 1].style.opacity = 1;
    }

    autoSlide();

    function autoSlide() {
      if (toggle) {
        return
      };
      var i;
      var x = document.getElementsByClassName("placestovisit");
      for (i = 0; i < x.length; i++) {
        x[i].style.opacity = 0;
      }
      if (index > x.length) {
        index = 1
      };
      x[index - 1].style.opacity = 0;
      if (x[index - 1].className.indexOf('initial') == -1) {
        x[index - 1].className += ' initial';
      }
      x[index - 1].style.opacity = 1;
      index++;
      setTimeout(autoSlide, 4000);
    }

    .initial {
      -webkit-transition: opacity 2s;
      transition: opacity 2s;
    }

    #placescontainer {
      position: relative;
      clear: both;
      height: 1500px;
    }

    .fade {
      position: absolute;
      top: 0;
      left: 0;
    }

<body style="height:100%;">
      <div id="placescontainer">
        <div class="placestovisit fade">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Hanumangundi_Falls.jpg/1200px-Hanumangundi_Falls.jpg" alt="" />
          <h1>Hanumanagundi Falls</h1>
          <h2> Suthanabbe Falls or Hanumanagundi Falls is located in the hilly surroundings of the Kudremukh National Park in the Chikkamagaluru district of Karnataka, India. Suthanabbe Falls is located between Karkala and Lakya dam in the Kudremukh national park.
            The water falls from a height of 22 meters creating a scenic surroundings around it.</h2>
        </div>

        <div class="placestovisit fade">
          <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Hampi_virupaksha_temple.jpg" alt="" />
          <h1> Hambi(Hambe) </h1>
          <h2> Hampi (Hampe) is a village and temple town recognised as a UNESCO World Heritage Site, listed as the Group of Monuments at Hampi. in northern Karnataka, India. It was one of the richest and largest cities in the world during its prime. It is located
            within the ruins of the city of Vijayanagara, the former capital of the Vijayanagara Empire. Predating the city of Vijayanagara, Hampi continues to be an important religious centre, housing the Virupaksha Temple and several other monuments belonging
            to the old city. According to statistics of 2014, Hampi is the most searched historical place in Karnataka on Google.</h2>
        </div>
        <div class="placestovisit w3-animate-fading">
          <img src="http://www.thebetterindia.com/wp-content/uploads/2012/09/IMG_0750-Com-800x533.jpg" alt="" />
          <h1> Agumbe </h1>
          <h2> Agumbe is a hill station which can be reached by bikes or cars. The way to this place is a diversion from Parkala (The diversion is just a few kms from DT). The best part of the trip to Agumbe is the ride. Beautiful sceneries on both sides will
            keep company all along the way. This place is abount 45 km from Manipal. Agumbe is one of the highest peaks of the Western Ghats located about 60kms from Udupi. Situated at a height of 830 metres from sea level, it overlooks the Arabian Sea. Agumbe
            is part of the Shimoga district which is a neighboring district of Udupi. </h2>
        </div>

        <div class="placestovisit fade">
          <img src="https://d28dwf34zswvrl.cloudfront.net/wp-content/uploads/2017/01/kerala-carbon-neutral-panchayat.jpg" alt="" />
          <h1> Kerala </h1>
          <h2> The border of Kerala is just 75 km from Manipal. The 300-year-old Bekal Fort, shaped like a giant key-hole, is one of the largest and best-preserved forts in Kerala. Surrounded by a splendid beach, the historic Bekal Fort offers a superb view of
            the Arabian Sea from its tall observation towers, where a few centuries ago huge cannons used to be placed. Today, it is one of the favourite spots for film-makers because the Bekal Fort and its surroundings with backwaters and hilly destinations
            make fascinating locales. This fort was made by Tipu Sultan and is built right next to the sea. The popular song 'Tu Hi Re' was picturised with this fort in the backdrop.</h2>
        </div>

        <div class="placestovisit fade">
          <img src="http://udupitoday.com/udtoday/images/uploads/January/images/jan1431attur1.jpg" alt="" />
          <h1> Attur church </h1>
          <h2> Attur Church situated in the outskirts of Karkala town in Karnataka state — India. It is situated 58 km from Mangalore. Placed amidst placid greenery, the Attur-Karkala parish has a rich history with its origin tracing back to 1759. Moreover it
            is known for its miraculous history. Miracle, history, beauty, social activities, all bundled into one. Unlike others, the church is a place of worship and belief for all, irrespective of caste and creed. An vidence for universal peace and brotherhood.
            People from all walks of the society come here to offer their prayers to St Lawrence</h2>
        </div>


      </div>
      <button class="btn" onclick="plusIndex(-1)" id="btn1"> &#10094;</button>
      <button class="btn" onclick="plusIndex(1)" id="btn2"> &#10095;</button>

      <button class="play" onclick="toggle=1-toggle; autoSlide()" id="btn3">  Play/Pause </button>

    </body>

如何为幻灯片放映添加转换？

4 个答案: