本文作者:心月

jQuery实现淘宝客九宫格广告图片轮播特效【原创】

心月IT博客 2019-10-31
jQuery实现淘宝客九宫格广告图片轮播特效【原创】摘要:​前不久无意间看到了一种淘宝客推广广告图片轮播特效,它九宫格类型的,在网上找了一圈也没有找到一样的,用别人的该吧太费事,于是就参照它自己写了一个九宫格图片轮播特效。

        图片轮播轮播是在web开发中经常会用到的js轮播特效,比如:banner、广告、照片墙等。也正因为图片轮播应用广泛,尽管网上有各式各样的图片轮播jQuery特效插件,但也不能囊括所有的特效,因为有些特效可能不太常用,或者暂时还没人用过。

        前不久无意间看到了一种淘宝客推广广告图片轮播特效,它九宫格类型的,在网上找了一圈也没有找到一样的,用别人的该吧太费事,于是就参照它自己用Jquery写了一个九宫格图片轮播特效。感觉这种特效还不错,所以就想分享出来,顺便说这个特效是怎么写的。

先看看最终的成品特效:

九宫格图片轮播特效

写过图片轮播特效的人都知道,其实轮播特效的就是利用定时器来实现图片轮播的。

1、布局

        先找到特效静止不动那一刻的布局,然后按照这个来布局

<div class="ad-container">
        <div class="ad-logo"><img src="https://img.alicdn.com/tps/i1/T1eSpcFAhfXXcq1Onf-42-90.gif"></div>
        <div class="ad-container-left">
            <div class="ad-container-left-list">
                <div class="ad-container-left-list-ul ad-ul-left">
                    <ul>
                        <li class="ad-active"><img src="images/a1.jpg" data-url="http://url1" alt="chanp 1" data-old="50.00" data-new="20.00"></li>
                        <li><img src="images/a2.jpg" data-url="http://ur2" alt="chanp 2" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a3.jpg" data-url="http://ur3" alt="chanp 3" data-old="60.00" data-new="30.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a4.jpg" data-url="http://ur4" alt="chanp 4" data-old="70.00" data-new="40.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a5.jpg" data-url="http://ur5" alt="chanp 5" data-old="80.00" data-new="50.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a6.jpg" data-url="http://ur6" alt="chanp 6" data-old="90.00" data-new="60.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a7.jpg" data-url="http://ur7" alt="chanp 7" data-old="10.00" data-new="5.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a8.jpg" data-url="http://ur8" alt="chanp 8" data-old="20.00" data-new="10.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a9.jpg" data-url="http://ur9" alt="chanp 9" data-old="30.00" data-new="20.00"><div class="ad-mask"></div></li>
                    </ul>
                </div>
                <div class="ad-container-left-list-img ad-img-left">
                    <a href="http://url1" target="_blank" rel="nofollow"><img src="images/a1.jpg" alt="chanp 1"></a>
                </div>
            </div>

            <div class="ad-container-left-pro ad-pro-left">
                <div>
                    <span class="ad-title"><a href="" target="_blank" rel="nofollow">chanp 1</a></span><br>
                    <span class="ad-pro-new"><i>¥</i><em>20.00</em></span>
                    <span class="ad-pro-old"><i>¥</i><em>50.00</em></span><br>
                    <span><img data-src="images/1.png" src="images/1.png"></span>
                </div>
                
            </div>
        </div>
        <div class="ad-container-right">
            <div class="ad-container-left-list">
                <div class="ad-container-left-list-ul ad-ul-right">
                    <ul>
                        <li class="ad-active"><img src="images/a1.jpg" data-url="http://url1" alt="chanp 1" data-old="50.00" data-new="20.00"></li>
                        <li><img src="images/a2.jpg" data-url="http://ur2" alt="chanp 2" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a3.jpg" data-url="http://ur3" alt="chanp 3" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a4.jpg" data-url="http://ur4" alt="chanp 4" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a5.jpg" data-url="http://ur5" alt="chanp 5" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a6.jpg" data-url="http://ur6" alt="chanp 6" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a7.jpg" data-url="http://ur7" alt="chanp 7" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a8.jpg" data-url="http://ur8" alt="chanp 8" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
                        <li><img src="images/a9.jpg" data-url="http://ur9" alt="chanp 9" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
                    </ul>
                </div>
                <div class="ad-container-left-list-img ad-img-right">
                    <a href="http://url1" target="_blank" rel="nofollow"><img src="images/a1.jpg" alt="chanp 1"></a>
                </div>
            </div>

            <div class="ad-container-left-pro ad-pro-right">
                <div>
                    <span class="ad-title"><a href="" target="_blank" rel="nofollow"> chanp 1 </a></span><br>
                    <span class="ad-pro-new"><i>¥</i><em>20.00</em></span>
                    <span class="ad-pro-old"><i>¥</i><em>50.00</em></span><br>
                    <span><img data-src="images/1.png" src="images/1.png"></span>
                </div>
                
            </div>
        </div>
    </div>
    <style type="text/css">
        body,div,ul,li,p,span,i,em,img{padding: 0;margin: 0;}
        li{list-style: none;;}

        .ad-container{margin:200px auto;width: 790px;height: auto;border:  1px solid #ddd;overflow: hidden;}
        .ad-container .ad-logo{float: left;}
        .ad-container-left,.ad-container-right{width: 45%;float: left;height: 100%;height: 100%;}
        .ad-container-left-list, .ad-container-left-pro{width: 50%;float: left;}
        .ad-container-left-pro{display: table;height: 88px;}
        .ad-container-left-pro div{display: table-cell;vertical-align: middle;line-height: 21px;}
        .ad-container-left-list-ul,.ad-container-left-list-img{width: 50%;float: left;height: 100%;}
        .ad-container-left-list-img img{display: block; width: 100%;}
        .ad-container-left-list-ul ul{width: 100%;height: 100%;overflow: hidden;}
        .ad-container-left-list-ul ul li{position: relative; border: none;padding: 0;margin: 0; width: 33%;float: left;background-color: rgba(255,255,255,0.5);margin: 0.15%;height: 33%;}
        .ad-container-left-list-ul ul li img{display:block;width: 100%;}
        .ad-container-left-list-ul .ad-mask{width: 100%;height: 100%; position: absolute;top: 0;left: 0;background-color: rgba(255,255,255,0.5);}
        .ad-container-left-list-img{width: 50%;float: left;}
    </style>

九宫格图片轮播静态效果

        html静态布局会html+css人应该都没问题,不过这里用了遮罩层,当前不显示的其余8张图都加上遮罩,当前显示的则不加遮罩,轮播的时候可以看成是去遮罩,显示谁谁的遮罩就去掉,其他8张则加上遮罩,然后在右边显示当前显示图片的大图。

        此外,这里还用了html5的自定义属性,因为要在右边显示当前广告图片对应的标题和价格,如果放在span标签或者其他标签后面处理起来会比较麻烦,但是html5可以给标签添加自定义属性,何不利用一下。轮播的时候只需通过jQuery读取img里的自定义属性的值写到右边。

下面用jQuery来实现图片轮播:

$(function(){
            $('.ad-mask').css('height',$('.ad-mask').width()+'px');
            $('.ad-ul-left ul li').mouseover(function(){
                if (leftTimer) {
                    clearInterval(leftTimer)
                }
                var nowObj = $(this);
                var dire = 'left';
                objSwitch(nowObj,dire);
            })
            $('.ad-ul-right ul li').mouseover(function(){
                if (rightTimer) {
                    clearInterval(rightTimer)
                }
                var nowObj = $(this);
                var dire = 'right';
                objSwitch(nowObj,dire);
            })
            $('.ad-ul-left ul li').mouseout(function(){
                leftTimer = setInterval(leftMove,1500);
            })
            $('.ad-ul-right ul li').mouseout(function(){
                rightTimer = setInterval(rightMove,1500);
            })

            //为了避免左右两边图片轮播的冲突,这里分别给左右两边加定时器
            var leftTimer = setInterval(leftMove,1500);
            var rightTimer = setInterval(rightMove,1500);
            
            function leftMove(){
                flgLeft = $('.ad-ul-left .ad-active').index();
                if (flgLeft > ($('.ad-ul-left ul li').length - 1)) {
                    flgLeft = 0;
                }else{
                    flgLeft = flgLeft + 1;
                }
                objLeft = $('.ad-ul-left ul li').eq(flgLeft);

                objSwitch(objLeft,'left');
            }

            function rightMove(){

                flgRight = $('.ad-ul-right .ad-active').index();
                if (flgRight > ($('.ad-ul-right ul li').length - 1)) {
                    flgRight = 0;
                }else{
                    flgRight = flgRight + 1;
                }
                objRight = $('.ad-ul-right ul li').eq(flgRight);

                objSwitch(objRight,'right');
            }

            
            function objSwitch(obj,dire){
                $('.ad-ul-' + dire + ' ul li').removeClass();
                $('.ad-ul-' + dire + ' ul li div').remove();
                $('.ad-ul-' + dire + ' ul li').append('<div class="ad-mask"></div>')
                obj.addClass('ad-active');
                obj.find('div').remove();
                $('.ad-img-' + dire + ' img').attr('src',obj.find('img').attr('src'))
                $('.ad-img-' + dire + ' img').attr('alt',obj.find('img').attr('alt'))
                $('.ad-img-' + dire + ' a').attr('href',obj.find('img').attr('data-url'))
                $('.ad-pro-' + dire + ' .ad-title a').attr('href',obj.find('img').attr('data-url'));
                $('.ad-pro-' + dire + ' .ad-title a').text(obj.find('img').attr('alt'));
                $('.ad-pro-' + dire + ' .ad-pro-new em').text(obj.find('img').attr('data-new'));
                $('.ad-pro-' + dire + ' .ad-pro-old em').text(obj.find('img').attr('data-old'));
            }
        })

到此,九宫格图片轮播特效就完成了。

其实只要掌握了图片轮播的原理,不管在怎么复杂的轮播特效都没问题。(前提是能把静态布局写出来)

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-10-31
若转载请注明原文及出处:https://www.xinyueseo.com/webfe/453.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论