Carousel map of fade in and fade out effect based on jQuery

  • 2021-07-09 06:42:39
  • OfStack

After the focus carousel with JavaScript for smooth switching, a simple fade-in and fade-out carousel with jQuery was written, the code was not optimized, the structure of html was slightly adjusted, and the picture part replaced the previous div with ul.

The structure of html is as follows:


<div id="container">
 <ul class="pic">
 <li><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1"></a></li>
 <li><a href="javascript:;"><img src="DSC01628.jpg" alt="pic2"></a></li>
 <li><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3"></a></li>
 </ul>
 <ul id="position">
 <li class="cur"></li>
 <li class=""></li>
 <li class=""></li>
 </ul>
 <a href="javascript:;" id="prev" class="arrow">&lt;</a>
 <a href="javascript:;" id="next" class="arrow">&gt;</a>

 </div>

css Settings:


*{ 
 margin: 0;
 padding: 0; 
 text-decoration: none;
 }
 ul{
 list-style: none;
 }
 #container{
 position: relative;
 width: 400px;
 height: 200px;
 margin: 20px auto;
 }
 
 .pic li {
 position: absolute;
 top: 0;
 left: 0;
 display: none;
 }
 .pic li img {
 width: 400px;
 height: 200px;
 }
 #position{
 position: absolute;
 bottom: 0;
 right:0;
 margin: 0;
 background: #000;
 opacity: 0.4;
 width: 400px;
 text-align: center;
 }
 #position li{
 width: 10px;
 height: 10px;
 margin:0 2px;
 display: inline-block;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background-color: #afafaf;
 }
 #position .cur{
 background-color: #ff0000;
 }

 .arrow { 
 cursor: pointer;
 display: none; 
 line-height: 39px; 
 text-align: center; 
 font-size: 36px; 
 font-weight: bold; 
 width: 40px; 
 height: 40px; 
 position: absolute; 
 z-index: 2; 
 top: 50%;
 margin-top: -20px; /*width Adj. 1 Half */
 background-color: RGBA(0,0,0,.3); 
 color: #fff;
 }
 .arrow:hover { 
 background-color: RGBA(0,0,0,.7);
 }
 #container:hover .arrow { 
 display: block;
 }
 #prev { 
 left: 20px;
 }
 #next { 
 right: 20px;
 }

JavaScript code:


$(function(){
 // No. 1 1 Zhang display 
 $(".pic li").eq(0).show();
 // Slide over the mouse to switch manually, fade in and fade out 
 $("#position li").mouseover(function() {
 $(this).addClass('cur').siblings().removeClass("cur");
 var index = $(this).index();
 i = index;// Without this sentence, there is a bug After the mouse moves out of the dot, the automatic carousel is not the back of the dot 1 A 
 // $(".pic li").eq(index).show().siblings().hide();
 $(".pic li").eq(index).fadeIn(500).siblings().fadeOut(500);
 });
 // Automatic carousel 
 var i=0;
 var timer=setInterval(play,2000);
 // Switch to the right 
 var play=function(){
 i++;
 i = i > 2 ? 0 : i ;
 $("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
 $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
 }
 // Switch to the left 
 var playLeft=function(){
 i--;
 i = i < 0 ? 2 : i ;
 $("#position li").eq(i).addClass('cur').siblings().removeClass("cur");
 $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500);
 }
 // Mouse move in and out effect 
 $("#container").hover(function() {
 clearInterval(timer);
 }, function() {
 timer=setInterval(play,2000);
 });
 // Click left and right to switch 
 $("#prev").click(function(){
 playLeft();
 })
 $("#next").click(function(){
 play();
 })
 })

Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel


Related articles: