时间戳

首页 > 解决方案 > 如何将放大和缩小按钮连接到轮播

javascript - 如何将放大和缩小按钮连接到轮播

问题描述

我正在尝试将我的按钮连接到轮播。缩放计数器正在工作，但图像不缩放。如何正确连接？可能应该是在从 json 文件中解析图像之后？

css

.brazzers-daddy:after {content: ""; display: table; clear: both;}
.brazzers-daddy {position: relative;}
.brazzers-daddy img {width: 100%; position: relative; display: none; top: 0; left: 0; margin- 
 bottom: 10px;}
.brazzers-daddy img:first-child {display: inline-block;}
.tmb-wrap {position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; width: 100%; 
 height: 100%;}
.tmb-wrap .tmb-wrap-table {display: table; height: 100%; width: 100%;}
.tmb-wrap-table div {display: table-cell;transition: all .3s ease; border-bottom: 5px solid 
 transparent; padding-top: 10px; -webkit-transition: all .25s ease; -o-transition: all .25s 
 ease; transition: all .25s ease;}
.thumb-item{margin: 0px auto; max-height: 100%; max-width: 60%; display: inline-block;}

.btn {width: 30px;height: 30px;background: #FFF;border: 1px solid #005bac; -webkit-border- 
 radius: 50%;-moz-border-radius: 50%; border-radius: 50%; color: #005bac; padding: 15px 10px 
 5px; position: fixed; text-align: center; -webkit-user-select: none; -ms-user-select: none;  
 -moz-user-select: -moz-none; user-select: none; -khtml-user-select: none; transition: all 
 0.3s ease;}
.btn:hover {background: #eef;}
.zoom {bottom: 190px;}
.zoom-out {bottom: 120px;}
.zoom-init {bottom: 50px;}

html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
</head>
<body>
<div class="thumb-item"></div>
<a class="btn zoom"><i class="fas fa-search-plus"></i></a>
<a class="btn zoom-out"><i class="fas fa-search-minus"></i></a>
<a class="btn zoom-init"><i class="fas fa-recycle"></i></a>

js

!function(a){
a.fn.brazzersCarousel=function(){
    return this.addClass("brazzers-daddy").append("<div class='tmb-wrap'><div class='tmb-wrap-table'>").append("<div class='image-wrap'>").each(function(){var e=a(this);e.find("img").appendTo(e.find(".image-wrap")).each(function(){e.find(".tmb-wrap-table").append("<div>")})}).find(".tmb-wrap-table").bind("touchmove",function(e){
        e.preventDefault();var i=e.originalEvent.changedTouches[0],t=document.elementFromPoint(i.clientX,i.clientY),d=a(t).parent(".tmb-wrap-table").closest(".brazzers-daddy").find("img"),n=a(t).parent(".tmb-wrap-table").find("div");d.hide().eq(a(t).index()).css("display","block"),n.removeClass("active"),a(t).addClass("active")}).find("div").hover(function(){var e=a(this).parent(".tmb-wrap-table").closest(".brazzers-daddy").find("img"),i=a(this).parent(".tmb-wrap-table").find("div");e.hide().eq(a(this).index()).css("display","block"),i.removeClass("active"),a(this).addClass("active")}).parent().find(":first").addClass("active")}}(jQuery);
    $(document).ready(function () {$.getJSON("photo.json", function (data) {var urldata = [];
    $.each(data, function (index, value) {urldata.push(value);var zoom = 1;
        $('.zoom').on('click', function(){zoom += 0.1; $('.thumb-item').css('zoom', zoom);});
        $('.zoom-init').on('click', function(){zoom = 1; $('.thumb-item').css('zoom', zoom);});
        $('.zoom-out').on('click', function(){zoom -= 0.1; $('.thumb-item').css('zoom', zoom);});
        for (var i=0; i < urldata.length; i++){$(".thumb-item").append("<img src='"+urldata[i].photo+"'/ >")}});$(".thumb-item").brazzersCarousel();});});

标签： javascripthtmlcssimagecarousel

解决方案

推荐阅读