Question

我正在尝试创建大型图片预览。我已经创建了一个基本的html模板，但是没有想法如何完成这个任务。

这是我想要的东西的链接。 Gallery Artwork Preview

这是我拥有的一切。 P.S我故意将所有内容都放在一个文件中。

<script>
    $(document).ready(function() {
        $('#addtocart').click(function(e) {
            e.preventDefault();

            var page = $("#page").val(),
                action = $("#action").val(),
                name = $("#name").val(),
                id = $("#id").val(),
                color = $("#color").val(),
                size = $("#size").val(),
                cat_id = $("#cat_id").val(),
                s_cat_id = $("#s_cat_id").val(),
                category = $("#category").val();

            var proceed = true;
            if (proceed) {
                post_data = {
                    'Page': page,
                    'Action': action,
                    'Name': name,
                    'Cat_id': cat_id,
                    'S_cat_id': s_cat_id,
                    'Category': category,
                    'Id': id,
                    'Color': color,
                    'Size': size
                };
                $.post('add_cart.php', post_data, function(response) {

                    //load json data from server and output message
                    if (response.type == 'error') {
                        //output=$('.alert-error').html(response.text);
                    } else {
                        output = $("#cartContainer").load();
                    }

                    $(".alert-error").delay(3200).fadeOut(300);
                }, 'json');
            }
        });
    });
</script>

Answer 1

这是解决方案。主要变化是 1.在css部分默认隐藏我的div。 2.从css中删除隐藏的类，然后添加选中。（更易于阅读和理解） 3.最后但并非最不重要的是添加了代码。请记住，滑块不会阻止它循环遍历所有元素。

<?php
$colors =array("red","green","orange","blue","black");
$colorLen = count($colors);
?>

<!DOCTYPE html>
<html>
<head>
  <link href="stylesheets/reset.css" rel="stylesheet" type="text/css" />
  <link href="stylesheets/normalize.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title></title>

<style type="text/css">
    .myDiv{float:left; width:150px; height:150px; margin:10px; display: none;}
  .myDiv img{width:100%; height: 100%;}
  .myDiv p{text-align: center; margin: 0px; padding: 0px;}
  .selected{display: block;}
  .myLink{margin:20px;}
  #prev{float: left;}
  #next{float: right;}
</style>

<script type="text/javascript">

</script>

</head>
<body style="display:inline-block; width:auto;">

<a id="prev" class="myLink" href="#">Prev</a>

<?php
$i =0;
while ($i != $colorLen) {
    echo '<div class="myDiv" style="background-color:'.$colors[$i].';">
        <img src="#" alt="'.$colors[$i].'"/><p>'.ucfirst($colors[$i]).'</p>
         </div>';
    $i++;
}
?>

<a id="next" class="myLink" href="#">Next</a>


<script type="text/javascript">

if(!$('.myDiv').first().hasClass('selected')){ //Set the first div to be visible
  $('.myDiv').first().addClass('selected');
}

var $first = $('.myDiv:first', 'body'),
    $last = $('.myDiv:last', 'body');

$("#next").click(function () {

    var $next,
        $selected = $(".selected");
    // get the selected item
    // If next div is empty , get the first
    $next = $selected.next('div').length ? $selected.next('div') : $first;
    $selected.removeClass("selected").fadeOut('fast');
    $next.addClass('selected').fadeIn('fast');
});

$("#prev").click(function () {
    var $prev,
        $selected = $(".selected");
    // get the selected item
    // If prev div is empty , get the last
    $prev = $selected.prev('div').length ? $selected.prev('div') : $last;
    $selected.removeClass("selected").fadeOut('slow');
    $prev.addClass('selected').fadeIn('slow');
});
</script>

</body>
</html>

大图库预览。带有两个箭头的多个div切换

1 个答案: