zoukankan      html  css  js  c++  java
  • 图片轮播的实现

    以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下。

      首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果。利用jquery的淡入淡出函数(fadeIn和fadeOut)。废话也不多说,边上代码边讲解。最后附上demo效果地址。

    先HTML布局:

    复制代码
      <!--整体容器-->
        <div class="imgbox">
            <!--图片列表,除第一张显示外,其余隐藏-->
            <ul>
                <li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#">
                    <img src="http://p.dddddd.net/uploads/allimg/110927/11-11092G32227.jpg" /></a></li>
                <li title="美女海边性感透视装诱惑"><a href="#">
                    <img src="http://tu.dushiys.com/uploads/allimg/130621/1-130621145931-50.jpg" /></a></li>
                <li title="夏小薇:百变小魔女变身性感数码宝贝"><a href="#">
                    <img src="http://p.dddddd.net/uploads/allimg/130620/19-130620115013.jpg" /></a></li>
                <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
                    <img src="http://imgtu.5239.com/uploads/allimg/130315/5-130315135240.jpg" /></a></li>
            </ul>
            <div class="title_bg common"><!--图片标题背景-->
            </div>
            <!--图片显示标题-->
            <div class="title common"></div>
            <!--图片序号-->
            <div class="pager common">
                <ul>
                    <li>4</li>
                    <li>3</li>
                    <li>2</li>
                    <li style="background: #FF70Ad;">1</li>
                </ul>
            </div>
        </div>
    复制代码

    CSS部分:

    复制代码
    img{border-style:none;}
    .imgbox{width:530px;margin:100px;height:350px;}
    .imgbox img{width:530px;height:350px;}
    .imgbox ul{list-style-type:none;margin:0px;padding:0px;}
    .imgbox ul li{display:none;}
    .title_bg{z-index:1;background-color:#000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;}
    .title{z-index:2;color:#FFF;text-indent:10px;font-size:14px;line-height:40px;}
    .pager{z-index:3;}
    .common{position:relative;height:40px;margin-top:-43px;}
    .pager ul{margin-top:5px;} .pager ul li{float:right;color:#FFF;font-size:15px;display:block;border:2px solid #e5eaff;width:25px;height:25px;margin-right:4px;margin-top:5px;text-align:center;line-height:25px;background-color:#6f4f67;cursor:pointer;}
    复制代码

    脚本:

    复制代码
     $(document).ready(function () {
                (new CenterImgPlay()).Start();
            });
            function CenterImgPlay() {
                this.list = $(".imgbox").children(":first").children();
                this.indexs = [];
                this.length = this.list.length;
                //图片显示时间
                this.timer = 3000;
                this.showTitle = $(".title");
    
                var index = 0, self = this, pre = 0, handid, isPlay = false, isPagerClick = false;
    
                this.Start = function () {
                    this.Init();
                    //计时器,用于定时轮播图片
                    handid = setInterval(self.Play, this.timer);
                };
                //初始化
                this.Init = function () {
                    var o = $(".pager ul li"), _i;
    
                    for (var i = o.length - 1, n = 0; i >= 0; i--, n++) {
                        this.indexs[n] = o.eq(i).click(self.PagerClick);
                    }
                };
                this.Play = function () {
                    isPlay = true;
                    index++;
                    if (index == self.length) {
                        index = 0;
                    }
                    //先淡出,在回调函数中执行下一张淡入
                    self.list.eq(pre).fadeOut(300, "linear", function () {
                        var info = self.list.eq(index).fadeIn(500, "linear", function () {
                            isPlay = false;
                            if (isPagerClick) { handid = setInterval(self.Play, self.timer); isPagerClick = false; }
                        }).attr("title");
                        //显示标题
                        self.showTitle.text(info);
                        //图片序号背景更换
                        self.indexs[index].css("background-color", "#FF70Ad");
                        self.indexs[pre].css("background-color", "#6f4f67");
    
                        pre = index;
                    });
                };
                //图片序号点击
                this.PagerClick = function () {
                    if (isPlay) { return; }
                    isPagerClick = true;
    
                    clearInterval(handid);
    
                    var oPager = $(this), i = parseInt(oPager.text()) - 1;
    
                    if (i != pre) {
                        index = i - 1;
                        self.Play();
                    }
                };
            };
    复制代码

    轮播的脚本是个人的一点小习惯,一般不轻易向jquery中写入扩展函数.诸位莫要在意。

    通过以上的代码,实现轮播的核心主要是对jquery的fadeIn和fadeOut函数的调用,另外考察的就是CSS布局的功力了。

    在上面显示图片标题的地方不能用绝对定位,于是用的relative定位,这个地方是布局的核心部分,否则无法将标题和图片序号放在图片之上。

    title_bg 这个类及对应的div主要是为了实现标题的背景色透明,因为直接在标题上设置背景色透明,会造成文字也是有透明度的。

    附上demo地址:轮播演示原理demo

  • 相关阅读:
    ajax专题
    luogu P1346 电车 最短路
    luogu P1462 通往奥格瑞玛的道路 最短路
    luogu P1328 生活大爆炸版石头剪刀布
    luogu P1315 联合权值 枚举
    luogu P1156 垃圾陷阱 背包问题
    luogu P1217 回文质数 枚举
    luogu P3650 滑雪课程设计 枚举
    luogu1209 修理牛棚 贪心
    luogu P1223 排队接水 贪心
  • 原文地址:https://www.cnblogs.com/subtract/p/3624885.html
Copyright © 2011-2022 走看看