Use JQuery to achieve image carousel effect

This article mainly brings you an example of using JQuery to achieve the image carousel effect (recommended). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

[The effect is shown in the picture]

##[Brief description of the principle]

Here is a brief introduction to the entire process:

1, hide all pictures except the first one,

2, get the alt information of the first picture Display in the information bar, and add click events

3, add click listeners to the 4 buttons, click the corresponding buttons, use fadeOut, fadeIn methods to display the picture

4, set setInterval, timing Execute the switching function

[Code Description]

filter(":visible"): Get all visible elements

unbind(): Match from Delete the bound event in the element

siblings: Obtain an element set containing all unique sibling elements of each element in the matching element set

[Program source code]

First introduce the JS file:

　 <script src="bootstrap/js/jquery-1.11.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>

HTML part:

<p id="banner"> 
   <ul>
    <li class="on"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">6</a></li>
   </ul>
   <p id="banner_list">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img  src="/static/imghwm/default1.png"  data-src="img/a1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="Use JQuery to achieve image carousel effect" ></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img  src="/static/imghwm/default1.png"  data-src="img/a2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="Use JQuery to achieve image carousel effect" ></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img  src="/static/imghwm/default1.png"  data-src="img/a3.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="Use JQuery to achieve image carousel effect" ></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img  src="/static/imghwm/default1.png"  data-src="img/a4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="Use JQuery to achieve image carousel effect" ></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img  src="/static/imghwm/default1.png"  data-src="img/a5.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="Use JQuery to achieve image carousel effect" ></a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_self"><img  src="/static/imghwm/default1.png"  data-src="img/a6.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="Use JQuery to achieve image carousel effect" ></a>
   </p>
  </p>

CSS part:

##

<style type="text/css">
 #banner {position:relative; width:280px; height:160px; border:1px solid #666; overflow:hidden;}
 #banner ul { width:138px; height:18px;position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8;z-index:1002;
    margin:0; padding:0; bottom:3px; right:5px; line-height: 18px; text-align: center;}
 #banner ul li { width: 18px; height: 18px; margin:0px 2px;float:left;display:block;color:#FFF;
　　　　　　　　　　 border:#e5eaff 1px solid;background:#6C6D6E;cursor:pointer} 
 #banner ul li.on { background:#900}
 #banner ul li a { color: white;}
 #banner ul li a:hover{text-decoration: none;}
 #banner_list a{position:absolute;} <!-- 让六张图片都可以重叠在一起-->
 #banner_list{position:absolute; right: 5px; bottom: 5px;}
 </style>

JS part:

<script type="text/javascript">
 var t = n =0, count;
 $(document).ready(function(){ 
  count=$("#banner_list a").length;
  $("#banner_list a:not(:first-child)").hide();
  $("#banner_info").html($("#banner_list a:first-child").find("img").attr(&#39;alt&#39;));
  $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr(&#39;href&#39;), "_blank")});
  $("#banner li").click(function() {
   var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
   n = i;
   if (i >= count) return;
   $("#banner_info").html($("#banner_list a").eq(i).find("img").attr(&#39;alt&#39;));
   $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr(&#39;href&#39;), "_blank")})
   $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
   document.getElementById("banner").style.background="";
   $(this).toggleClass("on");
   $(this).siblings().removeAttr("class");
  });
  t = setInterval("showAuto()", 4000);
  $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
 })
 
 function showAuto()
 {
  n = n >=(count -1) ?0 : ++n;
  $("#banner li").eq(n).trigger(&#39;click&#39;);
 }
 </script>

Have you learned it yet? Hurry up and give it a try.

Related recommendations:

WeChat Xiaocheng swiper component implements image carousel switching function tutorial

JQuery image Implementation example of carousel effect

How to use js to implement web page image carousel

The above is the detailed content of Use JQuery to achieve image carousel effect. For more information, please follow other related articles on the PHP Chinese website!