文档章节

图片轮播之:静若处子,动若脱兔(为什么我不来写一篇关于图片轮播的博客呢?)

乐派电影
 乐派电影
发布于 2014/04/21 10:23
字数 1589
阅读 528
收藏 13

    一、闲聊:

        图片轮播,一个你再熟悉不过的小东西了。或许在你刚开始学习web的时候就能做出来得到效果。但是你会发现当面对不同的需求的时候又要重新写一个轮播。很是麻烦的对吧。LZ也是这样学习过来的,发现自己写的很多轮播的思路都不一样了。这次写出的下一次也许就写不出来了,或者说是用更好的方式来实现了。下面一起来总结下都有什么样的需求。

    二、需求:

        1) 首先是要能循环显示出来(不考虑循环效果)。

        2)鼠标移到图片上时停止切换,移开之后又自动开始循环。

        3)带有图片标记,两个作用(1、可以给用户提示一共多少张,2、可以知道当前展示得到是第几张)。

        4)带有切换按钮,当用按钮点击的时候就取消自动循环。让用户自由操作(切换按钮需要以上后出现,移开消失)。

    三、思路:

        以前再最开始的时候做轮播是直接改变的图片 url 地址,但是现在不能这样做了。为什么?因为没当变化一下url地址浏览器就会发送一个请求道服务器区拉取这个图片,这样对于性能来说是很不好的。所以不能这样做。Now 那就通过移动图片吧。我的思路(也是在借鉴的基础上)将所有的图片联合成一副大的图片,这样只需要移动一副大的图片就可以实现轮播了。下面一起来看看怎样实现吧!

    四、实现步骤:

    HTML: 

<!--picture-loop-wrapper-->
    <div class="picture-loop-wrapper"> //外部循环显示盒子
        <ul class="imgBox">            //组合长图盒子
            <li id="img1"><a href="#"><img src="img/1.jpg"></a></li>
            <li id="img2"><a href="#"><img src="img/2.jpg"></a></li>
            <li id="img3"><a href="#"><img src="img/3.jpg"></a></li>
            <li id="img4"><a href="#"><img src="img/4.jpg"></a></li>
            <li id="img5"><a href="#"><img src="img/5.jpg"></a></li>
        </ul>
        <div class="currentNum">        //显示标记盒子
            <span class="imgNum mark-color"></span>
            <span class="imgNum"></span>
            <span class="imgNum"></span>
            <span class="imgNum"></span>
            <span class="imgNum"></span>
        </div>
        <div class="control to-left"><img src="img/left-arrow.png"/></div>    //切换按钮组
        <div class="control to-right"><img src="img/right-arrow.png"/></div>
    </div>

    分析:首先是外部的(picture-loop-wrapper)一个显示的盒子,控制显示的窗口大小。里面的 ul 这个就是把所有的图片组合起来作为一张长图。

    CSS: 

ul{
    margin: 0;    //消除自带的间距
    padding: 0;
}
/*picture-loop-wrapper*/
.picture-loop-wrapper{    //外部显示区域
    position: relative;
    width: 520px;
    height: 280px;
    overflow: hidden;    /*这里很重要,控制显示的范围*/
}
.imgBox{
    position: absolute;    //这里因为后面使用的是 left 属性
    width: 2600px;    /*组合长图,因为我是5张图,每张520px,所以长图就是5*520 = 2600px*/
    list-style-type: none;
}
.imgBox > li{
    float: left;     /*实现一排显示,因为li是块元素,所以采取浮动*/
    width: 520px;
}
.imgBox a{
    display: inline-block;     /*这里是为了避免悬空,因为a是内联元素不会被撑开*/
}
.control{
    position: absolute;     /*绝对与wrapper盒子定位,实现在上面浮动*/
    top: 50%;
    margin-top: -20px;     /*锤子居中*/
    left: 20px;
    background: #000;
    opacity: .3;
    text-align: center;
    width: 40px;
    height: 40px;
    display: none;
    cursor: pointer;
}
.control img{
    margin-top: 8px;   /*图片居中*/
}
.control:hover{
    opacity: .8;
}
.to-right{
    left: 450px;
}
/*currentNum*/
.currentNum{
    position: absolute;
    left: 50%;
    top: 250px;
    margin-left: -35px;
    width: 70px;
    height: 11px;
}
/*spanNum*/
.imgNum{
    display: inline-block;
    float: left;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-radius: 9px;
    background: #b7b7b7;
    cursor: pointer;
}

.mark-color{
    background: #f40;
}

    分析:css代码没什么可说的,主要就是注意 定位的使用。补充(在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。)和 overflow 的使用。

    JS:

$(document).ready(function(){
    var $iBox = $('.imgBox'),
        $iNum = $('.imgNum'),  //缓存优化
        indexImg = 1,          //初始下标
        totalImg = 5,          //图片总数量
        imgSize = 520,         //图片尺寸 宽度
        moveTime = 1100,        //切换动画时间
        setTime = 2500,        //中间暂停时间
        clc = null;

    function moveImg(){
        if(indexImg != totalImg){
            $iBox.animate({
                left: -(indexImg*imgSize) + 'px'
            }, moveTime);
            $iNum.removeClass('mark-color')
                .eq(indexImg)
                .addClass('mark-color');
            indexImg++;
        }
        else{
            indexImg = 1;
            $iNum.removeClass('mark-color')
                .eq(indexImg - 1)
                .addClass('mark-color');
            $iBox.animate({
                left: 0
            }, moveTime);
        }
    }
    $iNum.hover(function(){              //鼠标放在下方标记上面
        $iBox.stop();                    //结束当前动画
        clearInterval(clc);              //暂停循环
        $iNum.removeClass('mark-color');
        $(this).addClass('mark-color');
        indexImg = $(this).index();
        $iBox.animate({
            left: -(indexImg*imgSize) + 'px'
        }, 500);
    },function(){
        clc = setInterval(moveImg, setTime);
    });

    //鼠标放在图片上停止动画
    $iBox.hover(function(){
        $('.control').fadeIn(200);       //出现切换按钮
        clearInterval(clc);              //暂停循环
    },function(){
        $('.control').hide();            //隐藏切换
        clc = setInterval(moveImg, setTime);
    });
    //显示左右
    $('.control').hover(function(){       //放在切换按钮上停止动画和循环
        clearInterval(clc);
        $('.control').show();
//        return false;允许传播
    });
    //向右边前进
    $('.to-right').click(function(){
        if(indexImg != totalImg){
            $iBox.animate({
                left: -(indexImg*imgSize) + 'px'
            }, moveTime);
            $iNum.removeClass('mark-color')
                .eq(indexImg)
                .addClass('mark-color');
            indexImg++;
        }
        else{
            indexImg = 1;
            $iNum.removeClass('mark-color')
                .eq(indexImg - 1)
                .addClass('mark-color');
            $iBox.animate({
                left: 0
            }, moveTime);
        }
    });
    //向左边前进
    $('.to-left').click(function(){
        indexImg--;              //下标减一
        if(indexImg != 0){
            $iBox.animate({
                left: -((indexImg - 1)*imgSize) + 'px'
            }, moveTime);
            $iNum.removeClass('mark-color')
                .eq((indexImg - 1))
                .addClass('mark-color');
        }
        else{
            indexImg = totalImg;
            $iNum.removeClass('mark-color')
                .eq(indexImg - 1)
                .addClass('mark-color');
            $iBox.animate({
                left: -((indexImg - 1)*imgSize) + 'px'
            }, moveTime);
        }
    });
    clc = setInterval(moveImg, setTime);   //自动循环图片切换
});

    示意图: 

    这里对js代码做点说明: 基本参数是可以随意改动的。就在最上面的初始。css代码和js代码都可以很好的兼容。勇气来也很方便。


    五、总结:

        这个例子能做到上面的所有需求,但是有一个问题就是: 当最后一张的时候它会又重新到第一张。如果你不喜欢这样的话,那么没关系。我已经做出来了,一直向前不回到第一张的例子。下面会继续写出来的。(发现用这个写博客真心不好写啊,有些不好说。很简单,但是又很关键的。不过应该思路你是明白了。值了!)

    效果演示: http://www.jiuni.com.cn/myworks/picture-loop/index.html


    (本篇完)




© 著作权归作者所有

共有 人打赏支持
乐派电影

乐派电影

粉丝 135
博文 39
码字总数 18922
作品 1
成都
后端工程师
私信 提问
加载中

评论(5)

我吃烤地瓜
我吃烤地瓜
8183
仪山湖
仪山湖
79
willqiqi
willqiqi
厉害啊!79
猜得哦
猜得哦
0
巧妙运用补间动画,自定义广告轮播CarouselView 2.0

  这是前一篇文章绘制的CarouselView的升级版,有兴趣的同学,可以去关注一下笔者前一篇文章。自定义广告图片轮播View——CarouselView 这次升级版相对于前文而已,有了一个功能上的飞跃主...

饮水思源为名
2018/08/13
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年1991
2017/11/13
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年
2017/11/13
0
0
手把手教你用原生JavaScript造轮子(2)——轮播图

通过上一篇文章的学习,我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图,希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Let's ...

csdoker
2018/08/12
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年
2017/11/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Tomcat的管理功能

Tomcat的管理功能 host-manager(管理虚拟主机) 这个功能是用来管理虚拟主机的,可以通过这个WEB界面,来停止、启动以及增加虚拟主机。首先要配置用户角色: 浏览器输入host-manager地址 # ...

wzb88
45分钟前
0
0
Java引用传递和JVM堆栈的关系说明

通过代码说明 Java 引用传递在堆栈上的关系。 可以从JVM的内存空间存放上说明,值传递 和引用传递。 堆(线程共享):对象、对象的全局变量、数组 栈(线程私有):声明为局部变量的 基本数据...

冷基
49分钟前
2
0
直接插入排序

直接插入排序的基本操作是将一个记录插入到已经排好序的有序表中,从而得到一个新的、记录数增1的有序表。直接插入排序的时间复杂度为O(n^2),但性能比冒泡排序和简单选择排序的性能要好一点...

niithub
49分钟前
2
0
data.world、远观数据

产品思路: 1、共享数据集。 2、数据结构化。 3、数据展示。 https://data.world

colin_86
今天
3
0
Akka实战:HTTP大文件断点上传、下载,秒传

访问:https://github.com/yangbajing/scala-applications/tree/master/file-upload 获取本文所述完整源码,包括Akka HTTP后端和HTML5实现的前端。 在很多应用里面都会有类似大文件上传的需求...

羊八井
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部