图片左右旋转及左右切换

pc电商图片旋转及切换

                        <div class="media-group" node-type="media_group_prev_2025718">
                            <ul class="clearfix">
                                <li class="bigVideo on" data-url="http://.iqiyi.com.cn/player250527_1.html?v=2020#nohits&h=500"><img src="https://img.300hu.com/4c1f7a6atransbjngwcloud1oss/0295bcdd301496928930635777/imageSampleSnapshot/1586618488_851263773.100_1076.jpg" alt=""><span class="video-icon"></span></li>
                                <li class="bigcursor" action-target="media_slide_box_2025718" idx="0"><img node-type="small" data-middleurl="//pro-fd.-img.com.cn/t_s660x660/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg" data-bigurl="//pro-fd.-img.com.cn/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg"
                                        width="120" height="90" src="//pro-fd.-img.com.cn/t_s120x90c5/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg"><span class="loading hide"></span></li>
                                <li class="bigcursor" action-target="media_slide_box_2025718" idx="1"><img node-type="small" data-middleurl="//pro-fd.-img.com.cn/t_s660x660/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg" data-bigurl="//pro-fd.-img.com.cn/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg"
                                        width="120" height="90" src="//pro-fd.-img.com.cn/t_s120x90c5/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg"><span class="loading hide"></span></li>
                            </ul>
                        </div>
<div class="media-expand clearfix" node-type="media_slide_box_2025718">
                            <div class="media-expand-pic" data-rotation="0"></div>
                            <div class="media-expand-video"></div>
</div>                            

 .media-group li {
    position: relative;
    float: left;
    width: 48px;
    height: 48px;
    margin: 0 10px 0 0;
    overflow: hidden;
    outline: 1px solid #eeeeee;
}
 .media-group li.on {
    outline: 2px solid #438eee;
}
 .media-group li img {
    width: 48px;
    height: 48px;
    display: block;
}
 .media-group img {
    vertical-align: top;
}
.media-expand {
    position: relative;
    margin: 13px 0 10px;
}
.media-expand .media-expand-pic {
    float: left;
    position: relative;
}
.media-expand {
    position: relative;
    margin: 13px 0 10px;
}

.media-expand .media-expand-pic {
    float: left;
    position: relative;
}

.media-expand .pic-op {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 6;
}

.media-expand .pic-op a {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .5);
    margin-right: 6px;
    color: #fff;
}

.media-expand .pic-op i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    background: url(../img/pic-roate-icon.png) no-repeat;
    vertical-align: middle;
}

.media-expand .pic-op .sprite-turn-left {
    background-position: 0 0;
}

.media-expand .pic-op .sprite-turn-right {
    background-position: -10px 0;
}

.media-expand .pic-op .show-pic {
    background-position: 0 -10px;
}

.media-expand .cursor-prev,
.media-expand .cursor-small,
.media-expand .cursor-next {
    width: 100px;
    position: absolute;
    height: 100%;
    top: 0;
    background: url(about:blank) fixed;
    z-index: 3;
}

.media-expand .cursor-prev {
    left: 0;
    cursor: url(http://icon.-img.com.cn/products/v3/pic_prev.cur), auto !important;
}

.media-expand .cursor-next {
    right: 0;
    cursor: url(http://icon.-img.com.cn/products/v3/pic_next.cur), auto !important;
}

.media-expand .cursor-small {
    width: 100%;
    left: 0;
    cursor: url(http://icon.-img.com.cn/products/v3/small.cur), auto !important;
    z-index: 2;
}

$(function() {
    if ($('#_j_comment_list').length <= 0) return;
    var index = 0;
    var current = 0; //图片旋转
    var picLength;
    $('#_j_comment_list').delegate('.media-group .bigcursor', 'click', function() {

        var picsSrc = $(this).find('img').attr('data-middleurl');
        var prev = '<div class="cursor-prev J-sprite-prev" style="display: block;"></div>';
        var middle = '<div class="cursor-small J-hide-big-show"></div>';
        var next = '<div class="cursor-next J-sprite-next"></div>';
        index = $(this).attr('idx');
        picLength = $(this).parent().find('.bigcursor').length;
        if (index == 0) {
            prev = '';
        }
        if (index == picLength - 1) {
            next = '';
        }

        var bigImgUrl = $(this).find('[node-type=small]').attr('data-bigurl');
        if ($(this).parents('.media-group ').find('li').is('.bigVideo')) {
            var len = $(this).parents('.media-group ').find('.bigVideo').length;
            index = $(this).index() - len;
        } else {
            index = $(this).index();
        }

        $(this).parents('.media-group').siblings('.media-expand').removeClass('hide').find('.media-expand-pic').css('display', 'block').html('<div class="pic-op"> <a class="turn-left J-turn-left" href="javascript:;" target="_self"><i class="sprite-turn-left"></i>左转</a> <a class="turn-left J-turn-right" href="javascript:;" target="_self"><i class="sprite-turn-right"></i>右转</a> <a href="' + bigImgUrl + '"><i class="show-pic"></i>查看原图</a> </div><img src="' + picsSrc + '">' + prev + middle + next);
        $(this).parents('.media-group').siblings('.media-expand').find('.media-expand-video').css('display', 'none');
        var expandBox = $(this).parents('.media-group').siblings('.media-expand').find('.media-expand-pic');
        current = 0; //重置旋转
        //重置样式添加项
        expandBox.width('auto');
        expandBox.height('auto');
        expandBox.attr('data-rotation', 0);
        $(this).addClass('on').siblings('li').removeClass('on');


    })

    function getCursorSite(imgElement) {
        var picArr = [];
        var expandBox = imgElement.parents('.media-expand');
        var bigcursorBoxs = expandBox.siblings('.media-group').find('.bigcursor');
        var prev = '<div class="cursor-prev J-sprite-prev" style="display: block;"></div>';
        var middle = '<div class="cursor-small J-hide-big-show"></div>';
        var next = '<div class="cursor-next J-sprite-next"></div>';
        picLength = bigcursorBoxs.length;
        imgElement.parents('.media-expand').siblings('.media-group').find('.bigcursor').each(function(i, e) {
            picArr.push($(e).find('img').attr('data-middleurl'));
        })
        if (index == 0) {
            prev = '';
        }
        if (index == picLength - 1) {
            next = ''
        }
        bigImgUrl = $(bigcursorBoxs[index]).find('[node-type=small]').attr('data-bigurl');
        imgElement.parent('.media-expand-pic').html('<div class="pic-op"> <a class="turn-left J-turn-left" href="javascript:;" target="_self"><i class="sprite-turn-left"></i>左转</a> <a class="turn-left J-turn-right" href="javascript:;" target="_self"><i class="sprite-turn-right"></i>右转</a> <a href="' + bigImgUrl + '" ><i class="show-pic"></i>查看原图</a> </div><img src="' + picArr[index] + '">' + prev + middle + next);
        expandBox.siblings('.media-group').find('.bigcursor').eq(index).addClass('on').siblings('li').removeClass('on')
        expandBox.find('.media-expand-pic').width('auto');
        expandBox.find('.media-expand-pic').height('auto');
    };

    //  上一张
    $(document).delegate('.J-sprite-prev', 'click', function(e) {
            index = $(this).parents('.media-expand').siblings('.media-group').find('.bigcursor.on').attr('idx');
            console.log(index, 'index');

            index--;
            console.log(index, 'index');

            getCursorSite($(this));

        })
        // 中间隐藏
    $(document).delegate('.J-hide-big-show', 'click', function(e) {
            var expandBox = $(this).parents('.media-expand');
            $(this).parents('.media-expand-pic').hide();
            expandBox.siblings('.media-group').find('li').removeClass('on');
        })
        // 下一张
    $(document).delegate('.J-sprite-next', 'click', function(e) {
        index = $(this).parents('.media-expand').siblings('.media-group').find('.bigcursor.on').attr('idx');
        console.log(index, 'index');
        index++;
        getCursorSite($(this));

    })

    // 图片左旋转
    $(document).delegate('.J-turn-left', 'click', function(e) {
            e.stopPropagation();
            var expandBox = $(this).parent().parent();
            var rotation = parseInt(expandBox.attr('data-rotation'));
            rotation = rotation - 1 < 0 ? 3 : rotation - 1;
            expandBox.attr('data-rotation', rotation);
            current = (current - 90) % 360;
            var imgElement = $(this).parent().siblings('img');
            imgElement.css('transform', 'rotate(' + current + 'deg)');
            getPicSeat(imgElement);
        })
        // 图片右旋转
    $(document).delegate('.J-turn-right', 'click', function(e) {
            e.stopPropagation();
            var expandBox = $(this).parent().parent();
            var rotation = parseInt(expandBox.attr('data-rotation'));
            rotation = rotation + 1 > 3 ? 0 : rotation + 1;
            expandBox.attr('data-rotation', rotation);
            current = (current + 90) % 360;
            var imgElement = $(this).parent().siblings('img');
            imgElement.css('transform', 'rotate(' + current + 'deg)');
            getPicSeat(imgElement);
        })
        // 包裹图片盒子及图片样式添加
    function getPicSeat(imgElement) {
        var expandBox = imgElement.parent();
        var newimgElement = expandBox.find('img');
        var rotation = parseInt(expandBox.attr('data-rotation'));
        var w = newimgElement.width();
        var h = newimgElement.height();
        var expandBoxWidth,
            expandBoxHeight;
        var mTop, mLeft;
        if (rotation == 1 || rotation == 3) {
            if (w > h) {
                mTop = (h - w) / 2 < 0 ? -((h - w) / 2) : (h - w) / 2;
                mLeft = (h - w) / 2 > 0 ? -((h - w) / 2) : (h - w) / 2;
            } else {
                mTop = (h - w) / 2 < 0 ? ((h - w) / 2) : -(h - w) / 2;
                mLeft = (h - w) / 2 > 0 ? ((h - w) / 2) : -(h - w) / 2;
            }
            expandBoxWidth = h;
            expandBoxHeight = w;
        } else {
            mTop = 0;
            mLeft = 0;
            expandBoxWidth = w;
            expandBoxHeight = h;
        }
        expandBox.width(expandBoxWidth);
        expandBox.height(expandBoxHeight);
        imgElement.css('margin-top', mTop);
        imgElement.css('margin-left', mLeft);
    }
})





// 视频
$('#_j_comment_list').delegate('.media-group .bigVideo', 'click', function() {
    var videoSrc = $(this).attr('data-url')
    var $video = $('<iframe width="100%" height="500" src="' + videoSrc + '" frameborder="0" allowfullscreen="true" scrolling="no"></iframe>')
    $(this).parents('.media-group').siblings('.media-expand').removeClass('hide').find('.media-expand-video').css('display', 'block').html($video);
    $(this).parents('.media-group').siblings('.media-expand').find('.media-expand-pic').css('display', 'none');
    $(this).addClass('on').siblings().removeClass('on')
})