展示一个图片切换（一号店）

作者: 郝特么冷 | 来源:发表于2017-09-27 15:39 被阅读16次

展示一个图片切换（一号店）
展示图片的切换
图片的点击导航切换展示
获取图片原始大小
简单的图片库浏览实现方式以及NoedValue属性简单理解【Do
纯css实现轮播图
javaScript进阶面向对象ES6-2020-01-06
点击两次实现不同点击效果的实现方式
六、Flutter自定义Tabbar
图片切换

今天发现一号店有一个非常漂亮的展示块，所有就顺便扒拉了一下他们的代码，实现了这个效果。那我先把效果图给下吧。

效果图.png

打开“一号店”你就会找到这个切换效果，还可以，下面就展示下这块的代码实现：
CSS：


.left_con {
    position: relative;
    float: left;
    width: 236px;
    height: 410px;
    padding-top: 20px;
    text-align: center;
    background: #f9ab57;
}

.left_con h4 {
    font-weight: normal
}

.left_con h4 a {
    display: inline-block;
    padding: 0 10px 10px 15px;
    font-size: 20px;
    color: #fff;
    line-height: 20px
}

.left_con h4 a i {
    font-style: normal;
    font-family: \5b8b\4f53;
    font-weight: bold
}

.left_con .en_tit {
    font-family: "Century Gothic";
    color: #fff;
    font-size: 14px;
    line-height: 24px
}

.left_con .comment {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 26px;
    overflow: hidden;
    padding: 8px 0;
    background-color: rgba(255, 255, 255, 0.2);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#33FFFFFF', endColorstr='#33FFFFFF');
    line-height: 26px
}

.left_con .comment .comment_left {
    width: 42px;
    height: 26px;
    float: left;
    color: #fff
}

.left_con .comment .comment_list {
    width: 173px;
    height: 26px;
    overflow: hidden;
    float: right;
    padding: 0 10px;
    text-align: left
}

.left_con .comment .comment_list li {
    color: #fff
}

.left_con .comment .comment_list a {
    color: #fff
}

.left_con .comment .comment_list a:hover {
    text-decoration: underline
}

.left_con .floor_silder {
    position: relative;
    margin-top: 35px
}

.left_con .floor_silder ul {
    width: 195px;
    height: 225px;
    margin: 0 auto;
    position: relative
}

.left_con .floor_silder li {
    position: absolute;
    width: 195px;
    height: 225px;
    margin: 0 auto;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff
}

.left_con .floor_silder li a {
    display: block;
    height: 205px;
    padding-top: 20px
}

.left_con .floor_silder li img {
    width: 130px;
    height: 130px;
    margin-top: 5px
}

.left_con .floor_silder .color_mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 225px;
    -moz-border-radius: 4px;
    border-radius: 4px
}

.left_con .floor_silder .caption {
    height: 20px;
    overflow: hidden;
    font-size: 16px;
    line-height: 20px
}

.left_con .floor_silder .sub_tit {
    height: 30px;
    overflow: hidden;
    font-size: 14px;
    color: #666;
    line-height: 30px
}

.left_con .floor_silder .img_first {
    top: 0;
    left: 0;
    z-index: 100
}

.left_con .floor_silder .img_second {
    top: -10px;
    left: 10px;
    width: 175px;
    z-index: 90
}

.left_con .floor_silder .img_third {
    top: -18px;
    left: 20px;
    width: 155px;
    z-index: 80
}

.left_con .floor_silder .turn_show {
    position: absolute;
    top: 234px;
    left: 67px;
    height: 30px;
    line-height: 30px;
    color: #f8f6f7
}

.left_con .floor_silder .prev_btn,
.left_con .floor_silder .next_btn {
    float: left;
    widows: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer
}

.left_con .floor_silder .show_num {
    float: left;
    padding: 0 20px;
    font-family: "Tahoma";
    font-size: 14px
}


.left_con .floor_silder .img_second .color_mask {
    background-color: #f89d5d;
    filter: alpha(opacity=40);
    opacity: .4;
}
.left_con .floor_silder .img_first .color_mask {
    background-color: #f89d5d;
    filter: alpha(opacity=0);
    opacity: 0;
}
.left_con .floor_silder .img_third .color_mask {
    background-color: #f89d5d;
    filter: alpha(opacity=0.7);
    opacity: 0.7;
}

HTML：

<body>
        <div class="left_con">
            <h4><a title="NATIONAL FOOD" href="//list.yhd.com/c5135-0" target="_blank" data-tpc="GCSP_LCMC">国产食品 <i>></i></a></h4>
            <p class="en_tit">NATIONAL FOOD</p>
            <div class="floor_silder" data-tpc="GCSP_LMLB">
                <ul>
                    <li class="img_first" data-advid="22033" style="z-index: 90; width: 175px; height: 225px; left: 10px; top: -10px;">
                        <a title="精选粮油 1元起" target="_blank" href="//cms.yhd.com/sale/ujjXBllObQC" data-tc="ad.0.0.22033-46587079.1" data-ref="22033_46587079_1">
                            <p class="caption">1号粮仓 民生惠聚</p>
                            <p class="sub_tit">精选粮油 1元起</p>
                            ![1号粮仓 民生惠聚](//d6.yihaodianimg.com/N09/M07/69/96/ChEi11l-5S-AX6qwAABUsIIO7pI81800.webp)
                        </a>
                        <div class="color_mask" style="opacity: 0.5;"></div>
                    </li>
                    <li class="img_second" data-advid="22034" style="z-index: 80; width: 155px; height: 225px; left: 20px; top: -18px;">
                        <a title="低至3.9元" target="_blank" href="//cms.yhd.com/sale/jjuyriycIcj" data-tc="ad.0.0.22034-47198033.1" data-advid="22034" data-advcode="PCSY_GCSP_LMLB_LB2" data-ajax="1" data-fee="" data-done="" data-nsf="" data-ref="22034_47198033_1">
                            <p class="caption">美味厨房</p>
                            <p class="sub_tit">低至3.9元</p>
                            ![美味厨房](//d8.yihaodianimg.com/N08/M03/92/AB/ChEi1FmlB-aAUS7lAABagnMENFE06900.webp)
                        </a>
                        <div class="color_mask" style="opacity: 0.8;"></div>
                    </li>
                    <li class="img_third" data-advid="22035" style="z-index: 100; width: 195px; height: 225px; left: 0px; top: 0px;">
                        <a title="商城国食月饼冲锋-有礼月更圆" target="_blank" href="//cms.yhd.com/sale/mFaDOODdbeJ" data-tc="ad.0.0.22035-47415337.1" data-ref="22035_47415337_1">
                            <p class="caption">好礼相随 情满中秋</p>
                            <p class="sub_tit">月饼礼盒3免1</p>
                            ![好礼相随 情满中秋](//d7.yihaodianimg.com/N08/M06/9C/F9/ChEi1lm_K3SAX-KVAAB3ha7BP2o22200.webp)
                        </a>
                        <div class="color_mask" style="opacity: 0;"></div>
                    </li>
                </ul>
                <div class="turn_show clearfix">
                    <div class="prev_btn index_iconfont"></div>
                    <div class="show_num"><span>3</span> / <em>3</em></div>
                    <div class="next_btn index_iconfont"></div>
                </div>
            </div>
            
        </div>
    </body>

JS：

YHD = window.YHD || (window.YHD = {});
    YHD.HomePage = YHD.HomePage || {};
    
    YHD.HomePage.floorSwitcHover = function(c) {
        function d(a) {
            //如果元素个数是0或者没有
            if(!a || a.size() == 0) {
                return
            }
            //如果元素存在那么每一个元素执行函数
            a.each(function() {
                var n = $(this).find("ul li");
                var q = $(this).find("ul li").length;
                var r = 0;
                var w = 0;
                var u = 3000;

                function o() {
                    n.removeClass("cur").fadeOut(500).eq(r).addClass("cur").fadeIn(500)
                }

                function t() {
                    w = setInterval(function() {
                        r++;
                        if(r > $(this).find("ul li").length - 1) {
                            r = 0
                        }
                        o()
                    }, 3000)
                }
                t();
                $(this).on({
                    mouseover: function() {
                        clearInterval(w)
                    },
                    mouseout: function() {
                        t()
                    }
                })
            })
        }
        d(c)
    };
    YHD.HomePage.floorStackSlide = function(f) {
        console.log("start");
        var e = f.find("div.floor_silder");//获取元素
        var d = function(w) {
            //如果元素的长度是0或者不存在
            if(!w || w.size() == 0) {
                return
            }
        
            var c = w;//获取父级
            var s = c.find("ul"); //获取父级里边的ul
            var t = c.find("ul li"); //获取li
            var a = c.find(".prev_btn");//获取前一张按钮
            var x = c.find(".next_btn");//获取后一张按钮
            //如果图片张数是0或者不存在
            if(!t || t.length == 0) {
                c.find("div.turn_show").hide();
                return
            }
            
            var u = t.length;//获取图片的张数
            c.find(".show_num").find("em").html(u);//下边展示一共多少张
            //如果只有一张就不执行否则
            if(u == 1) {
                return
            }
            
            var b = 0;//计数器
            var z = 0;
            var y = 3000;
            //点击下一张
            x.click(function() {
                b++;
                if(b > u - 1) {
                    b = 0
                }
                v();
                A(b);
                return false
            });
            //点击上一张
            a.click(function() {
                b--;
                if(b < 0) {
                    b = u - 1
                }
                v();
                A(b);
                return false
            });
            //当前显示的那张
            function A(g) {
                switch(g) {
                    case 2://这里指的是最后一张图片，如果是最后一张就执行下面代码
                        t.eq(g).css("z-index", 100).stop().animate({
                            width: 195,
                            height: 225,
                            left: 0,
                            top: 0
                        });
                        t.eq(g - 1).css("z-index", 80).stop().animate({
                            width: 155,
                            height: 225,
                            left: 20,
                            top: -18
                        });
                        t.eq(g - 2).css("z-index", 90).stop().animate({
                            width: 175,
                            height: 225,
                            left: 10,
                            top: -10
                        });
                        t.eq(g).find(".color_mask").stop().animate({
                            opacity: 0
                        });
                        t.eq(g - 1).find(".color_mask").stop().animate({
                            opacity: 0.8
                        });
                        t.eq(g - 2).find(".color_mask").stop().animate({
                            opacity: 0.5
                        });
                        break;
                    default:
                        t.eq(g).css("z-index", 100).stop().animate({
                            width: 195,
                            height: 225,
                            left: 0,
                            top: 0
                        });
                        t.eq(g - 1).css("z-index", 80).stop().animate({
                            width: 155,
                            height: 225,
                            left: 20,
                            top: -18
                        });
                        t.eq(g + 1).css("z-index", 90).stop().animate({
                            width: 175,
                            height: 225,
                            left: 10,
                            top: -10
                        });
                        t.eq(g).find(".color_mask").stop().animate({
                            opacity: 0
                        });
                        t.eq(g - 1).find(".color_mask").stop().animate({
                            opacity: 0.8
                        });
                        t.eq(g + 1).find(".color_mask").stop().animate({
                            opacity: 0.5
                        })
                }
            }
            //下方的计数器显示
            function v() {
                c.find(".show_num").find("span").html(b + 1)
            }
            //每隔3秒点击一次下一张
            function r() {
                z = setInterval(function() {
                    x.click()
                }, y)
            }
            //自动轮播
            r();
            //鼠标移入轮播停，鼠标移出继续轮播
            w.bind({
                mouseover: function() {
                    clearInterval(z)
                },
                mouseout: function() {
                    r()
                }
            })
        };
        d(e)
    };
    
    
    YHD.HomePage.floorStackSlide($(".left_con"));
    var d = $('.left_con').find("div.left_slider");
    YHD.HomePage.floorSwitcHover(d);

喜欢这个效果的朋友们可以直接copy了

展示一个图片切换（一号店）
今天发现一号店有一个非常漂亮的展示块，所有就顺便扒拉了一下他们的代码，实现了这个效果。那我先把效果图给下吧。打开...
展示图片的切换
图片的点击导航切换展示
今天我写的是图片的点击切换，一般网站首页都会有一些图片的展示，经过点击后切换到另外一张图片，下面我们经过模拟...
获取图片原始大小
工作中遇到要获取图片的原始大小做展示切换总结方法，以便后续查看
简单的图片库浏览实现方式以及NoedValue属性简单理解【Do
实现要求：点击图片链接，将展示图片切换成相对应的图片，改变相对应的图片描述内容。以下代码中重点记录：nodeVa...
纯css实现轮播图
主体思想准备相同大小的多个图片将要展示图片横排放在一个图片容器里面在图片容器外再加一个展示容器，展示容器大小...
javaScript进阶面向对象ES6-2020-01-06
tag栏切换-P10 curd图片.png图片.png图片.png图片.png切换功能:图片.png 启动: 图片...
点击两次实现不同点击效果的实现方式
需要实现的效果：一张图片第一次点击切换成另一张图片，再次点击图片消失不展示这边其实就是在进行点击事件处理的时候，...
六、Flutter自定义Tabbar
目录一、效果展示二、底部Tabbar三、顶部Tabbar 一、效果展示底部Tabbar切换和顶部Tabbar切换...
图片切换