JQuery 点击文字切换图片的幻灯片特效

效果如下：

下面是相关的代码

HTML

<div class="billboardwrapper">
<div id="billboard">

    
    
        <ul id="slideshow-nav">
            <li><a href="Javascript:void(0)"><span>text01</span>
                </a>

            </li>
            <li><a href="Javascript:void(0)"><span>text02</span>
                </a>

            </li>
            <li><a href="Javascript:void(0)"><span>text03</span>
                </a>

            </li>
			<li><a href="Javascript:void(0)"><span>text04</span>
                </a>

            </li>
            <li><a href="Javascript:void(0)"><span>text05</span>
                </a>

            </li>
			<li><a href="Javascript:void(0)"><span>text06</span>
                </a>

            </li>
        </ul>

	<div id="slideshow-main"><div class="play"><span></span></div>
        <ul id="slideshow-list">
                    <li>
			<a href="https://www.sbboke.com">
			<div class="bbimg" style="background-image: url('https://www.sbboke.com/wp-content/uploads/2022/11/0a02f487ccc246a191a50e80948b56b0.jpg')"></div>	
			
			</a>

            </li>
             <li>
			<a href="https://www.sbboke.com">
			<div class="bbimg" style="background-image: url('https://www.sbboke.com/wp-content/uploads/2022/11/0ac034dbc0ef4c0784132d5a9365888c.png')"></div>		
			
			</a>

            </li>
                         <li>
			<a href="https://www.sbboke.com/">
			<div class="bbimg" style="background-image: url('https://www.sbboke.com/wp-content/uploads/2022/11/8a75556ac6d24fdf8840f707eb4a31bf.png')"></div>		
			
			</a>

            </li>
			              <li>
			<a href="https://www.sbboke.com">
			<div class="bbimg" style="background-image: url('https://www.sbboke.com/wp-content/uploads/2022/11/bd699004c43e4b6fb43e5c92a0833f30.png')"></div>
			</a>

            </li>
                        <li>
			<a href="https://www.sbboke.com">
			<div class="bbimg" style="background-image: url('https://www.sbboke.com/wp-content/uploads/2022/11/d441da65635a4d9da3750f0121c8a853.png')"></div>		
			</a>

            </li>
		<li>
			<a href="https://www.sbboke.com">
			<div class="bbimg" style="background-image: url('https://www.sbboke.com/wp-content/uploads/2022/11/bd699004c43e4b6fb43e5c92a0833f30.png')"></div>
			</a>

            </li>
        </ul>
    </div>
</div><!--/billboard--->

</div><!--/billboardwrapper-->

CSS

<style>
  @media only screen and (max-width: 767px){
	.billboardwrapper{
	  height: 210px!important;
	}
	#slideshow-nav{
	  display: none;
	}
	#slideshow-list li{
	  left: 0 !important;
	  width: 100% !important;
	  padding:0 !important;
	  
	}
	#slideshow-list li div.bbimg {
	  background-size: 100% 100% !important;
	}
  }
* {margin: 0; padding: 0;}

div,a,ul,li {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.billboardwrapper {
height: 380px;
padding: 10px;
width: 100%;
display: inline-block; float: left;
}

#billboard {
display: inline-block; float: left;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
border: 0 solid transparent;
border-radius: 2px;
background: #eee;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
#slideshow-nav,
#slideshow-nav li,
#slideshow-nav li a {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;	
}


#slideshow-nav {
width: 18%;
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: 150;
}
#slideshow-nav li {display: inline-block; float: left; width: 100%;position:relative; height: 17%;

}
#slideshow-nav li a {height: 100%; width: 100%; display: inline-block; float: left; margin: 0 0; position: relative;background: #d5455d;}
#slideshow-nav li a img {
    width: 100%;
    height: 100%;
    opacity: 0.5;
	display: inline-block; float: left;
}
#slideshow-nav li:last-child {padding-bottom: 0;}
#slideshow-nav li a img:hover, .active {
    opacity: 1;
}

#slideshow-nav li.active a:after {
background: #000;
color: #fff;
width: 100%;
height: 100%;
top: 0; left: 0;
content: '';box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#slideshow-nav li.active a {background: rgb(0 0 0 / 90%);}
#slideshow-nav li.active img {
    opacity: 1;
}

#slideshow-nav li a span {
width: 100%;
height: 62px;
line-height: 62px;
display: block;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
color: #fff;
font-family: 'geomanistmedium', Arial;
text-align: center;
text-decoration: underline;
text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}


#slideshow-main {
    float: left;
    width: 100%;
    height: 100%;
	position:relative;
	border-radius: 2px;
}
#slideshow-list {
display: inline-block;
float: left;
width: 100%;
height: 100%;
position: relative;
background: #333;
}
#slideshow-list li {
position: absolute; 
top: 0px; 
padding-left:18%;
z-index: 0;
width: 100%;
height: 100%;
  display: block;
}

#slideshow-list li.active {
opacity:1;

z-index: 5;

}
#slideshow-list li a {
	display: inline-block;
	float: left;
	width: 100%;
	height: 100%;
}

#slideshow-list li div.bbimg {
width: 100%;
height: 100%;
overflow: hidden;
display: inline-block; 
float: left;
border: 0;
background-size: cover;
background-position:center;
background-repeat: no-repeat;
background-color: #333;
}


#slideshow-list li div.bbtext {
position: absolute;
display: inline-block; 
bottom: 0px;
left: 0;
width: 100%;
height: auto;
padding-right: 80px;
/*
padding-right: 30%;
padding-top: 80px;*/
opacity: 0;
text-align: left;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
color: #fff;

}

#slideshow-list li.active div.bbtext {
opacity: 1;
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
-moz-transform: tranlateY(-20px);
transition: all 0.6s ease 0.3s;
-webkit-transition: all 0.6s ease 0.3s;
}

#slideshow-list li div.bbtext h2 {
font-family: 'boldfont', Arial;
font-weight: normal;
font-size: 30px;
letter-spacing: 0;
line-height: 35px;
color: #fff;
}



#slideshow-list li div.bbtext p {
margin-top: 10px;
font-size: 16px;
line-height: 20px;
color: #fff;
position: relative;
}




.pause, .play {
position: absolute;
display: none;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #fff;
background: rgba(0,0,0,0.2);
bottom: 15px;
right: 110px;
z-index: 150;
cursor: pointer;
}
.play span {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #ffffff;
left: 50%;
top: 50%;
margin: -6px 0 0 -3px;
}
</style>

JavaScript

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script>
/* TT Billboard by Csaba Kurucz 2014 */
$(document).ready(function(){
 var firstSlides = $("#slideshow-list li"),
     secondSlides = $("#slideshow-nav li"),
     nbSlides = firstSlides.length,
     slideTime = 6000,
     nextSlide = 0,
     timer;

 function slideshow() {
     secondSlides.eq(nextSlide).addClass('active').siblings().removeClass('active');
     firstSlides.eq(nextSlide).addClass('active').siblings().removeClass('active'); 
     nextSlide = (nextSlide + 1) % nbSlides;
     timer = setTimeout(slideshow, slideTime);
 }

 slideshow();

 $('#slideshow-nav li').click(function () {
     $('#billboard').addClass('clicked');
	 $('.play').fadeIn();
     clearInterval(timer);clearTimeout(slideTime);
     var clickIndex = $(this).index();
     $('#slideshow-list li').eq(clickIndex).addClass('active').siblings().removeClass('active');
	 secondSlides.eq(clickIndex).addClass('active').siblings().removeClass('active');nextSlide = (clickIndex + 1) % nbSlides;
  
 });
 
 
 
$('body').on('click','.play',function(){
$('#billboard').removeClass('clicked');
$('.play').fadeOut();
setTimeout(function(){
clearInterval(timer);clearInterval(slideTime);slideshow();
},2000);
});


});
</script>