我正在尝试创建大图像预览。我已经创建了一个基本的 html 模板，但不知道如何完成这项任务。
这是我想要的东西的链接。 Gallery Artwork Preview
这就是我所拥有的一切。 P.S 我特意将所有内容放在一个文件中。
<?php
$colors =array("red","green","orange","blue");
$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;}
.myDiv img{width:100%; height: 100%;}
.myDiv p{text-align: center; margin: 0px; padding: 0px;}
.hidden{display: none;}
.myLink{margin:20px;}
#prev{float: left;}
#next{float: right;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#0").removeClass("hidden"); //set the first div to be visible
});
</script>
</head>
<body style="display:inline-block; width:auto;">
<a id="prev" class="myLink" href="#">Prev</a>
<?php //Cycle through the colors and create a div with image and title tag
$i =0;
while ($i != $colorLen) {
echo '<div id="'.$i.'" class="myDiv hidden" 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">
var numItems =$('.myDiv').length; //Get the number of elements on the page
</script>
</body>
</html>
最佳答案
这就是解决方案。主要变化是 1.在css部分将我的div初始化为默认隐藏。 2.从css中删除隐藏类并添加selected。 (更容易阅读和理解) 3. 最后但并非最不重要的一点是添加代码。请记住， slider 不会阻止它循环遍历所有元素。
<?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>
关于javascript - 大图片库预览。使用两个箭头切换多个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34232643/