带缩略图的淘宝风轮播图

Bertha 。 2022-06-08 00:06 156阅读 0赞

由于项目需要一个类似与淘宝那种的多级联动轮播图。![Center][]

在网上也找到很多类似但都不是设计师所需要的，只能中间写一个。

因为是多级联动，逻辑这一块带来了不少麻烦，下面直接贴代码：

\--------------------------------html--------------------------------------------

<div class="content-details inlneBlock">
        <div class="fa-img">
            <div class="big-img w51">
                <ul id="details-bigImg">
                    <li style="display: block"><img src="images/pro/8201.jpg" alt="" width="100%"></li>
                    <li style="display: none"><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt="" width="100%"></li>
                    <li style="display: none"><img src="images/pro/T83001.jpg" alt="" width="100%"></li>
                    <li style="display: none"><img src="images/pro/8201.jpg" alt="" width="100%"></li>
                    <li style="display: none"><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt="" width="100%"></li>
                    <li style="display: none"><img src="images/pro/8201.jpg" alt="" width="100%"></li>
                    <li style="display: block"><img src="images/pro/8201.jpg" alt="" width="100%"></li>
                    <li style="display: none"><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt="" width="100%"></li>
                    <li style="display: none"><img src="images/pro/T83001.jpg" alt="" width="100%"></li>
    
                </ul>
    
            </div>
            <div class="fa-btn btn-prev"></div>
            <div class="fa-btn btn-next"></div>
        </div>
        <div class="img-items">
            <div class=" inlneBlock li-btn li-btn-prev"></div>
            <div class="li-img inlneBlock">
                <ul id="details-minImg">
                    <li class="active"><img src="images/pro/8201.jpg" alt=""></li>
                    <li><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt=""></li>
                    <li><img src="images/pro/T83001.jpg" alt=""></li>
                    <li><img src="images/pro/8201.jpg" alt=""></li>
                    <li><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt=""></li>
                    <li><img src="images/pro/8201.jpg" alt=""></li>
                    <li><img src="images/pro/8201.jpg" alt=""></li>
                    <li><img src="images/pro/310494BA89344D4CA779F383E107CD78.jpg" alt=""></li>
                    <li><img src="images/pro/T83001.jpg" alt=""></li>
                </ul>
            </div>
            <div class="li-btn li-btn-next inlneBlock"></div>
        </div>
    </div>

/*------------------------------css---------------------*/

.content-details .big-img {
        position: relative;
        width: 710px;
        height: 530px;
        overflow: hidden;
        border: solid 10px #ffffff;
    }
    .fa-img {
        position: relative;
        display: inline-block;
        width: 730px;
        overflow: hidden;
    }
    .fa-btn {
        position: absolute;
        width: 40px;
        height: 80px;
        cursor: pointer;
        top: 50%;
        margin-top: -40px;
    }
    .fa-img .btn-prev {
        left: 10px;
        background: url("../images/icon/gallery_arrow_1.png") no-repeat;
        background-position: 0;
    }
    .fa-img .btn-next {
        right: 10px;
        background: url("../images/icon/gallery_arrow_1.png") no-repeat;
        background-position: -40px 0;
    }
    .content-details .img-items {
        width: 730px;
        height: 97px;
        overflow: hidden;
        position: relative;
    }
    .li-btn {
        position: absolute;
        width: 41px;
        height: 97px;
        top: 0;
        cursor: pointer;
    }
    .li-btn-prev {
        left: 0px;
        background: url("../images/icon/gallery_arrow_2.png") no-repeat;
        background-position: 0;
    }
    .li-btn-next {
        right: 0px;
        background: url("../images/icon/gallery_arrow_2.png") no-repeat;
        background-position: -41px;
    }
    .li-img{
        position: relative;
        width: 648px;
        height: 97px;
        overflow: hidden;
        margin: 0 0 0 41px;
    }
    .li-img ul li {
        float: left;
        margin-left: 20px;
        cursor: pointer;
        height: 97px;
        position: relative;
    }
    #details-minImg {
        position: relative;
        height: 97px;
    }
    .li-img ul li:nth-of-type(1) {
        margin-left: 0px;
    }
    .li-img ul li img {
        max-width: 147px;
        width: 100%;
    }
    .li-img ul .active::after {
        content: " ";
        position: absolute;
        display: block;
        width: 145px;
        height: 95px;
        border: 1px solid red;
        top: 0;
    }/*补充说明，.w51表示width:51，可能样式没有贴全，各位可改一改，总体问题不大

/*------------------------js------------------*/

<script>
        var maxI, sliderLi, index, sliderminImg,liindex,liLenght,minI,minslider;
        liindex =0;
        liLenght= 0;
        $(function () {
            //产品详情页轮播图 sliderLi = $('#details-bigImg').find('li');
    // console.log(sliderLi); len = sliderLi.length - 1;
            index = 0;
            minI = parseInt(len/4);
            maxI =minI;
            minslider =0;
            $('.btn-prev').on('click', function () {
                console.log(index);
                if (index == 0){
                    _addBorder(0);
                }
                _prev();
            });
            $('.btn-next').on('click', function () {
                console.log(index);
                _next();
            });
    // console.log(index); //绑定小图列表 sliderminImg = $('#details-minImg').find('li');
            //设置ul的width $('#details-minImg').width(len*167);
            $(sliderminImg).each(function (i,even) {
                $(this).on('click',function () {
                   console.log(i);
    
                    index = i;
                    console.log(index);
                    _setBig(i);
                    _addBorder(i);
                })
            });
            $('.li-btn-next').on('click', function () {
    // console.log(minI); if(minI >= 1){
                    minslider += (-167*3);
                    $('#details-minImg').animate({
        'left':minslider+'px'}, 500);
                    minI--;
                }
    
            });
            $('.li-btn-prev').on('click', function () {
    // console.log(minI); if(minI < maxI){
                    minslider += (167*3);
                    $('#details-minImg').animate({
        'left':minslider+'px'}, 500);
                    minI++;
                }
    
            })
        });
    
        function _prev() {
            if (index == 0) {
                return false;
            }
            _fadeOut(index);
            this.index--;
            _fadeIn(index);
            _liprev(index);
            _addBorder(index);
        }
    
        function _next() {
            if (index == len) {
                console.log(index);
                return false;
            }
            console.log(len);
            _fadeOut(index);
            index++;
            _fadeIn(index);
            _liNext(index);
            _addBorder(index);
        }
    
        function _fadeOut(index) {
    // console.log(index); var tempImg = $(sliderLi[index]);
            $(tempImg).delay(0).fadeOut(500);
        }
    
        function _fadeIn(index) {
    // console.log(index); var tempImg = $(sliderLi[index]);
            $(tempImg).delay(500).fadeIn(600);
        }
    
        //轮播图小图列表 function _liNext(index) {
           if((index-1)%2 == 0 && index !=1) {
    // console.log('right'); liindex += 2;
               console.log(liindex);
               liLenght=-167*liindex;
               console.log(liindex);
               $('#details-minImg').animate({
        'left':liLenght+'px'}, 500);
    
           }
        }
        function _liprev(index) {
            if((index-1)%2 == 0 && liLenght <=-167) {
    // console.log('left'); liindex -= 2;
                console.log(liindex);
                liLenght=-167*liindex;
                console.log(liindex);
                $('#details-minImg').animate({
        'left':liLenght+'px'}, 500);
            }
        }
        //给小图添加红色框 function _addBorder(i) {
            if(i >= len){
                return false;
            }
            if(i < 0){
                return false;
            }
            $(sliderminImg).each(function () {
                $(this).removeClass('active');
            });
            $(sliderminImg[i]).addClass('active');
        }
        //点击小图立马切换到大图 function _setBig(i) {
            $(sliderLi).each(function (i1,e1) {
                _fadeOut(i1);
                $(this).stop();
            });
            _fadeIn(i);
        }
    </script>

[Center]: /images/20220608/74d731bc6dbb4fdb9a3fd7bc6887c5a0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关淘宝轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我就是我/ 2023年07月03日 08:29/ 0 赞/ 7 阅读

相关基于Swiper 2.7.6实现的带缩略图功能的轮播图

非原创，只能适合PC端，如果是移动端，只需要修改界面的大小即可。界面如下： ![417876-20170101234748507-354585973.png][] 链接：[

落日映苍穹つ/ 2023年06月01日 12:46/ 0 赞/ 7 阅读

相关 ios 扑克牌效果轮播_缩放效果的轮播图 iOS

![Image 1][] 111.gif 做个一个缩放的轮播图，基本实现功能。简单的记录下思路: 因为屏幕展示有三张图，所以传入的图片要先添加4张，左边两张(倒数第二

电玩女神/ 2023年01月09日 12:43/ 0 赞/ 233 阅读

相关运用css+html制作简单的淘宝轮播案例图

要让最后显示结果如下方图片： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

曾经终败给现在/ 2022年10月24日 15:22/ 0 赞/ 183 阅读

相关 jQuery实现淘宝轮播图

我爱撸码，撸码使我感到快乐大家好，我是Counter 今天给大家分享的是利用jQuery来实现淘宝轮播图，揭开这层神秘的面纱，CSS样式就不做过多的赘述了，主要就是实

ゞ浴缸里的玫瑰/ 2022年10月02日 14:50/ 0 赞/ 199 阅读

相关带缩略图的js轮播图js特效插件

[下载地址][Link 1]简单的js轮播图特效插件，带缩略图和文字描述效果，点击对应的小图切换到大图。 ![1632380723.png][] dd: [Link 1

喜欢ヅ旅行/ 2022年09月12日 12:46/ 0 赞/ 142 阅读

相关带缩略图的淘宝风轮播图

由于项目需要一个类似与淘宝那种的多级联动轮播图。![Center][] 在网上也找到很多类似但都不是设计师所需要的，只能中间写一个。因为是多级联动，逻辑这一块带

Bertha 。/ 2022年06月08日 00:06/ 0 赞/ 157 阅读

相关纯js实现淘宝商城轮播图

需求：　　循环无缝自动轮播3张图片，点击左右箭头可以手动切换图片，鼠标点击轮播图下面的小圆点会跳转到对应的第几张图片。鼠标放到轮播图的图片上时不再自动轮播，鼠标移开之后又

你的名字/ 2021年12月24日 17:02/ 0 赞/ 301 阅读

相关 vue仿京东放大镜加商品缩略图轮播组件

> 以下是最终的vue版本,光滑流畅,99%还原京东放大镜甚至更好,不会出现多次操作会变卡的问题 1.vue版本 6/23日更新，处理图片尺寸过小无法通过拖动实现放大移

淡淡的烟草味﹌/ 2021年09月24日 11:10/ 0 赞/ 539 阅读

相关 jquery和carousel.min.js实现缩略图轮播

@{ Layout = null; } <!DOCTYPE html> <html> <head>

喜欢ヅ旅行/ 2021年06月26日 16:06/ 1 赞/ 696 阅读