How to implement image carousel effect-JS Tutorial-php.cn

How to implement image carousel effect

小云云

Release： 2018-01-12 10:43:54

Original

4386 people have browsed it

How to realize the picture carousel effect? This article mainly introduces the production principle and implementation code of JQuery to realize the picture carousel effect. The source code download is attached at the end of the article, which has a good reference value. Let's take a look with the editor below, I hope it can help everyone.

It is really convenient to use JQuery to operate DOM, and JQuery provides a very user-friendly API to meet our various needs, which greatly simplifies the js code.

Production principle:

Here is a brief introduction to the entire process:

1, hide all pictures except the first one,

2, obtain The alt information of the first picture is displayed in the information bar, and a click event is added

3. Add click listeners for the four buttons, click the corresponding button, and use the fadeOut and fadeIn methods to display the picture

4, set setInterval, execute the switching function regularly

Code description:

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

unbind(): From matching 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

HTML Part:

<body>
<p id="banner"> 
 <p id="banner_bg"></p>
 <p id="banner_info"></p>
 <ul>
  <li class="on">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
 <p id="banner_list">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_1.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_2.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_3.jpg" title="图片" alt="图片"/></a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="imgs/img_4.jpg" title="图片" alt="图片"/></a>
 </p>
</p>
</body>

Copy after login

CSS part:

<style type="text/css">
#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden;}
#banner_list img {border:0px;}
#banner_bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000;
cursor:pointer; width:478px;}
#banner_info{position:absolute; bottom:0; left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer}
#banner_text {position:absolute;width:120px;z-index:1002; right:3px; bottom:3px;}
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
   margin:0; padding:0; bottom:3px; right:5px;}
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
#banner ul li.on { background:#900}
#banner_list a{position:absolute;}
</style>

Copy after login

javascript code:

<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('alt'));
  $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_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('alt'));
   $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_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('click');
 }
</script>

Copy after login

Related recommendations:

WeChat Xiaocheng swiper component implementation Picture carousel switching function tutorial

A simple example of how to realize the picture carousel effect using JavaScript

How to realize the simple picture carousel effect with jQuery and css Example

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