利用jquery实现一个轮播图

[01-首先搭建轮播图骨架]：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5     　　 <title></title>
 6     </head>
 7     <body>
 8 
 9     </body>
10 </html>

[02-添加区块]：

 1 <div class="banner">
 2         <div class="b_main">
 3             <div class="b_m_pic">
 4                 <ul>
 5                     <li>
 6                         <a>
 7                             <img src="img/1.png" width="100%" height="100%"/><!--这里的宽高是为了占满盒子-->
 8                         </a>
 9                     </li>
10                     <li>
11                         <a>
12                             <img src="img/2.png" width="100%" height="100%"/>
13                         </a>
14                     </li>
15                     <li>
16                         <a>
17                             <img src="img/3.jpg" width="100%" height="100%"/>
18                         </a>
19                     </li>
20                     <li>
21                         <a>
22                             <img src="img/4.jpg" width="100%" height="100%"/>
23                         </a>
24                     </li>
25                     <li>
26                         <a>
27                             <img src="img/5.png" width="100%" height="100%"/>
28                         </a>
29                     </li>
30                     <li>
31                         <a>
32                             <img src="img/6.png" width="100%" height="100%"/>
33                         </a>
34                     </li>
35                 </ul>
36             </div>
37         </div>
38         <!--小圆点-->
39         <div class="b_list">
40             <ul>
41                 <li class="l_click"></li>
42                 <li></li>
43                 <li></li>
44                 <li></li>
45                 <li></li>
46                 <li></li>
47             </ul>
48         </div>
49         <div class="b_btn">
50             <div class="b_left">&lt</div>
51             <div class="b_right">&gt</div>
52         </div>
53     </div>

[03-css样式]：

 1 <style>
 2         *{margin:0;padding:0}
 3         ul li{list-style:none}
 4         img{margin: 0}
 5     </style>
 6     <style>
 7         .banner{position: relative;width: 1366px;height: 780px;margin: 100px auto;border: 10px solid #009999;border-radius: 15px}
 8         .banner .b_main{position: relative;width: 1366px;height: 780px;}
 9         .banner .b_main .b_m_pic{position: relative;width: 1366px;height: 780px;}
10         .b_main .b_m_pic li{position: absolute;width: 1366px;height: 780px;top: 0;left: 0;}/*这里给绝对定位，是为了把li叠在一起*/
11     </style>
12     <style>
13         /*小圆点的样式*/
14         .b_list ul{position:absolute;right: 40px;bottom: 30px;}/*这里的ul根据banner定位*/
15         .b_list ul li{width: 20px;height: 20px;float: left;background: #333;margin-left: 20px;border-radius: 50px;
16             border:2px solid white;}
17         .b_list ul .l_hover,.b_list ul .l_click{border:2px solid #333;background: white}
18         /*两边耳朵的样式*/
19         .b_btn div{position: absolute;width: 100px;height: 100px;background: rgba(0,0,0,0.7);font-size: 60px;color: white;text-align: center;line-height: 100px;top: 50%;margin-top: -80px;cursor: pointer;}
20         .b_btn .b_left{left:0;border-radius: 50%}/*移到左边*/
21         .b_btn .b_right{right:0;border-radius: 50%}/*移到右边*/
22     </style>

[04-js代码]：

var $li = $(".b_list ul li");//获取.b_list里面的所有li，放到$li这个变量里面
        var len = $li.length-1;
        var _index = 0;//li的索引
        var $img = $(".b_main .b_m_pic li");//同上
        var $btn = $(".b_btn div");

        var timer = null;

        //  alert(typeof timer); timer是一个对象

        $li.hover(function(){
            $(this).addClass("l_hover");//指向li添加样式
        },function(){
            $(this).removeClass("l_hover");//指向li删除样式
        });

        //点击事件
        $li.click(function(){
            _index = $(this).index();
            //获取li的下标，改变样式
            //$li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
            //获取图片的下标，实现淡入淡出
            //$img.eq(_index).fadeIn().siblings().fadeOut();
            play();
        });

        //封装函数
        function play(){
            //获取li的下标，改变样式
            $li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
            //获取图片的下标，实现淡入淡出
            $img.eq(_index).fadeIn().siblings().fadeOut();
        }

        //两边耳朵的点击事件
            $btn.click(function(){
                var index = $(this).index();
                if(index) {
                    _index++;
                    if (_index > len) {
                        _index = 0;
                    }
                    play();
                }else {
                    _index--;
                    if(_index < 0){
                        _index = len;
                    }
                    play();
                }
            });

        //定时轮播
        function auto(){
            //把定时器放进timer这个对象里面
            timer = setInterval(function(){
                _index++;
                if(_index > len){
                    _index = 0;
                }
                play();
            },2000);
        }
        auto();

        //当我移上d_main的时候停止轮播
        $(".b_main").hover(function(){
            clearInterval(timer);
        },function(){
            //移开重新调用播放
            auto();
        });
        //当我移上两边耳朵的时候停止轮播
        $(".b_btn div").hover(function(){
            clearInterval(timer);
        },function(){
            //移开重新调用播放
            auto();
        });

 

[05-下面是我们的效果图]：

　　

[06-总结]：

　　1、图片、小圆点、两边的耳朵要使用position：absolute绝对定位，进行叠加。

　　　　注：绝对定位要根据父级元素进行定位，父级元素要加上position: relative;

　　2、根据索引值改变图片，达成切图

　　　　注：实现淡入淡出分别是fadeIn和fadeOut两个jq方法

　　　　　　siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。

　　3、定时器（实现轮播）：

　　　　　　setInterval()是开始播放，clearInterval()是关闭，有始有终嘛~~~~~

　　　　　　定时器有两个参数，第一个是函数方法（可以另写一个方法，写上方法名调用，也可以直接写一个function），第二个是时间

posted @ 2018-02-03 17:37  Lay-Buddhist  阅读(186)  评论(0)    收藏  举报