2017-06-19 21 views
2

スライドショーのトランジションを追加するにはどうすればよいですか?私はここで</p> <p>..私は私のページのいずれかに作っていスライドショーのトランジションを追加したい

 var index= 1; 
 
     
 
     var toggle=0; 
 
     
 
     function plusIndex(n){ 
 
     \t index = index + n; 
 
     \t 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); 
 
     }
<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> 
 
<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> 
 

 
</div> 
 

 
    </body>

Fiddle Demo

、コードです私はjavascriptとcssの初心者です。

上記は正常に動作しますが、オフラインではオフラインになりますが、私はフィドルで何が問題なのか分かりません。私はいくつかの小さな誤解があると思います。

スライド遷移を追加する際に助けてくれる人がいますか?

私はリンクhttp://www.devtrix.net/sliderman/examples.html

+2

をそれはなぜあなたがそれをダウンロードし、スライダーのために彼らの方法を使用していない... slidermanは自由であると言いますか? –

+0

ボタンをクリックしたときにFiddleの不明な機能に関するエラーメッセージを修正するには、JavaScriptの設定を "onLoad"から "no wrap-in "に変更します –

答えて

3

問題は、あなたが表示にCSSのdisplayプロパティを交換していることである:なし即座にdivを見えなくし、フェードを待つことはありません。代わりに、一度にオン/オフ表示を点灯させるの

、試すフェードアウト:

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

違いはフェードアウトの2番目のパラメータは、フェードアウトが完了し後を実行するコールバック関数であるということです。

1

ようなものが必要では以下のスニペットを見てください。簡単なアニメーション効果のためにjQueryを導入しました。使用さ

効果:jQuery.fadeIn

jQueryのもjQuery.fadeInが使用されている代わりに使用することができ、他のアニメーション効果をたくさん持っています。

は、ルックjQuery.animate方法

を有し、また、私はいくつかのコードをクリーンアップし、autoSlide

にあなたはCSSを使用することができます

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>

3

を次の場所を表示するには、単純なロジックを書いていると、スライダの画像をフェード、ズームなどのように変更します。

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メーカーのソフトウェアを使用することができます。 簡単にダウンロード、簡単に使用:download link

参照Screeshotそれから: gallery Silder

jsfiddleの例を参照してください:jsfiddle

1

シンプルなフェードインエフェクトは、次のように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>

関連する問題