jQuery manually clicks to implement image carousel effects

jQuery manually clicks to implement image carousel effects_jquery

WBOY

Release： 2016-05-16 15:26:37

Original

1345 people have browsed it

In this article, I wrote a carousel image to practice my skills. I first wrote a carousel image that manually clicks on the carousel. Then I will slowly and deeply write the automatic carousel image and the mouse-over image to stop moving the carousel image.
Let’s take a look at the final manual click carousel effect:

1. Principle explanation

(1) The first is the structure of the carousel image. I used a large outermost div to wrap two small divs. Four pictures are placed in one small div, and four number buttons are placed in the other small div

(2) Set the width of the outermost large div to the width of the image. Anything beyond the width of the large div needs to be hidden. However, set the width of the small div holding the image to 2000px. A larger one will facilitate the left floating of the four images. Layout

(3) When the number button is clicked, get the index value of the button, so that you can know how much width each picture is moved to the left

As can be seen from the above picture, the four pictures are in a floating horizontal layout. When the number button is clicked, the picture will drive the width of N pictures to the parent frame according to the index value of the number button, because Images outside the parent frame will be hidden~~~~~If you still don’t understand the principle, I can only vomit blood~~~~
2. Let’s look at the main program

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>轮播图①（手动点击轮播）</title>
  <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
  <div class="slideShow">
   <!--图片布局开始-->
   <ul>
    <li><a href="#"><img src="img/picture01.jpg" /></a></li>
    <li><a href="#"><img src="img/picture02.jpg" /></a></li>
    <li><a href="#"><img src="img/picture03.jpg" /></a></li>
    <li><a href="#"><img src="img/picture04.jpg" /></a></li>
   </ul>
   <!--图片布局结束-->
   
   <!--按钮布局开始-->
   <div class="showNav">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
   </div>
   <!--按钮布局结束-->
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/layout.js"></script>
 </body>
</html>

Copy after login

I have explained the above layout in the principle. If you are interested, you can read the principle by yourself~~~~
3. CSS style

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style: none;
}
.slideShow{
 width: 346px;
 height: 210px;  /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2000px;
 position: relative;  /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
 float: left;  /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
 width: 346px;
}
.slideShow .showNav{  /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

Copy after login

I have noted the important points in the above style. I believe it will be easy to understand if you have a basic knowledge. At first, I forgot to write position: relative; in the .slideShow ul style, which caused the subsequent jquery program images to be unable to move. It took me a long time to find this error. I hope everyone can pay attention to this place~~~~~~~
4. jQuery program

$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮被点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   ul.animate({
    "left":-oneWidth*index, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
   })
  })
})

Copy after login

Do you think it is very simple? You can achieve the carousel effect of manual clicks in just a few words. What you need to pay attention to in the above program is that the left attribute is moved to the left, so it is a negative value~~~~~~~

I will share with you the automatic carousel effects in the next article, I hope you don’t miss it.