jquery 视觉特效（幻灯片效果）

描述：

让图片按分页的形式显示，点击那一页。就显示哪副图片，应该就是幻灯片的效果了。

思路：

1，一副幻灯片的效果，有页码区域和图片区域。

2，页码区域如何实现，页码的阿拉伯数字哪里来？图片区域图片是要重合叠加的，当页面刚加载完的时候，首先显示的是第一张图片，其他不显示。

3，点击页码，图片区域要显示相应的图片，如何实现？

4，我该采取哪种页码区域和图片区域的代码的组合方式？

此时脑里有了一种组合方式：

我觉得让页码区域直接用HTML写上，看着不舒服，此刻我就决定用让JS来实现页码区域，HTML只实现图片区域。页码区域干脆就显示在图片区域左上方。管它合理不合理，先写了再说。

HTML:

        <!--ID为images就是包含页码区域和图片区域的盒子-->
        <div id="images">
            <a href="#"><img src="images1.jpg" alt=""/></a>
            <a href="#"><img src="images2.jpg" alt=""/></a>
            <a href="#"><img src="images3.jpg" alt=""/></a>
            <a href="#"><img src="images4.jpg" alt=""/></a>
            <a href="#"><img src="images5.jpg" alt=""/></a>
        </div>

CSS:

 

         #images{
                /*因为页码有margin等边距，宽高可以自行设置差不多就可以了*/
                width: 155px;
                height: 170px;
                /*用360browser刷新页面会出现闪一下出现其他的页面,故超出了就隐藏，就不会闪一下出现其他页面了*/
                overflow: hidden;
                /*为了让图片以images的左上角为基点*/
                position: relative;
            }
            img{
                width:150px;
                height: 150px;
                border: 0px;
            }         
            /*jquery代码里添加的页码类*/
            .page{
                /*为页码增加点间距*/
                margin: 5px;
            }
            .hover{
                cursor: pointer;
                color: blue;
                background-color: cyan;
            }

 

Jquery：

 

//                a图片链接对象的集合（数组）
                var $img_obj = $('#images a');
//                a图片链接的个数
                var img_obj_num = $img_obj.length;
//                第一张图片链接对象
                var first_img = $img_obj.eq(0);
//                页面刚加载完成时，隐藏所有图片连接，再只显示第一张图片链接
                $img_obj.hide();
                first_img.show();
                
//                让所有的a连接对象绝对定位，并且距左5px，因为稍后页码需要5px的间距
                $img_obj.css({'position':'absolute','left':5});
//                页面区域的盒子对象
                var page_div = $('<div id="pages"></div>');
//                把页面区域插入到第一个a图片链接的前面，因为是div，独占一行，于是默认页码会在左上角
                page_div.insertBefore(first_img);
//                循环把页码添加到页码区域，并未每个页面添加一个page类
                for(var i=1;i<=img_obj_num;i++){
                    //                    alert(i);
                    $('<span class="page">'+i+'</span>').appendTo('div#pages');
                    
                }
//              鼠标划入划出页码，页码的效果  
                $('.page').hover(function(){
                    $(this).addClass('hover');
                }, function(){
                    $(this).removeClass('hover');
                });
//                点击页码时a图片链接的切换
                $('.page').click(function(){
//                    当点击时，首先隐藏所有，然后显示当前页码的a图片链接
                  $img_obj.hide();
//                  获取当前的页码值
                  page_num = $(this).text();
//                  当前页码减1等于索引值
                  need_to_show_img = $img_obj.eq(page_num-1);
//                  显示当前索引值的图片链接
                  need_to_show_img.show();
                });

 

截图（点击相应的页码：）：