我正在设置可以通过屏幕箭头点击的图像。目前我通过循环和数组显示所有图像。我已经能够设置它，以便当您将鼠标悬停在小图像预览上时，主图像将更改为该图像。你可以在Aka上盘旋看看更大的版本。
我的数组在mongo模型中：Listings.currentimages
我目前的代码可用于获取小图像，以便在悬停时捕获特色图像。如何更改我的代码以使用屏幕左/右箭头？
<% var imgsrc = awspath + listings.currentimages[0] %>
<img id='mainPicture' class="image-resposive" src=<%=imgsrc%>>
<div id='allimages'>
<% for(var i = 0; i < listings.currentimages.length; i++ ) { %>
<div class='smallerImages'>
<% var imgsrc = awspath + listings.currentimages[i] %>
<img class="small" src="<%= imgsrc %>">
</div>
<% } %>
</div>
悬停功能：
$('.small').hover(function() {
$('.small').removeClass('selectedImage')
var src = $(this).attr('src');
$(this).addClass('selectedImage')
$('#mainPicture').attr('src', src);
});
答案 0 :(得分：1)
假设您有两个图标（下一个/上一个），您可以定义以下两个事件处理程序，以便向右或向左移动：
package calculatorCW;
import java.awt.Color;
import java.awt.event.*;
import java.text.DecimalFormat;
import java.text.ParseException;
import javax.swing.*;
public class calGui
{
private int i=1;
double tip=0,finalAmount=0,amountTaxed=0;
String num="000.00",output1="000.00",output2="000.00";
JFrame frame = new JFrame();
JPanel myPanel = new JPanel();
JLabel label1, label2, label3, label4;
JTextField myText1, myText2;
JButton buttons,tBtn1,tBtn2, tBtn3,calc,btn0,reset;
DecimalFormat formatter = new DecimalFormat();
public calGui()
{
initializeLabels();
initializeTextFields();
initializeButtons();
setPanels();
setBounds();
guiExtras();
setTipListeners();
setCalcListener();
}
public void initializeLabels()
{
label1 = new JLabel("<html> <p style='font-size: 15px; color: red;'> TIP CALCULATOR </p></html>");
label2 = new JLabel("<html> <p style='color: white;'> Bill Amount:</p></html> ");
label3 = new JLabel("<html> <p style='color: white;'>Tip Percentage: </p></html>");
label4 = new JLabel("<html> <p style='color: white;'>Total Cost: </p></html>");
}
public void initializeTextFields()
{
myText1 = new JTextField(output1);
myText2 = new JTextField(output2);
}
public void initializeButtons()
{
tBtn1 = new JButton("<html> <p style='color: blue;'>15 %</p></html>");
tBtn2 = new JButton("<html> <p style='color: blue;'>18 %</p></html>");
tBtn3 = new JButton("<html> <p style='color: blue;'>20 %</p></html>");
calc = new JButton("<html> <p style='color: black;'>CALC</p></html>");
reset = new JButton("<html> <p style='color: black;'>Reset</p></html>");
btn0 = new JButton("0");
//Buttons Loop
for (int col = 50; col<=190; col=col+70)
{
for(int row =253; row<=393; row=row+70)
{
buttons = new JButton(""+i);
myPanel.add(buttons);
buttons.setBounds(row, col, 60, 50);
buttons.setActionCommand(String.valueOf(i));
setButtonsListeners();
i++;
}
}
}
public void setPanels()
{
myPanel.add(tBtn1);
myPanel.add(tBtn2);
myPanel.add(tBtn3);
myPanel.add(calc);
myPanel.add(reset);
myPanel.add(btn0);
myPanel.add(label1);
myPanel.add(label2);
myPanel.add(label3);
myPanel.add(label4);
myPanel.add(myText1);
myPanel.add(myText2);
}
public void setBounds()
{
tBtn1.setBounds(23, 90, 60, 50);
tBtn2.setBounds(93, 90, 60, 50);
tBtn3.setBounds(163, 90, 60, 50);
calc.setBounds(13, 190, 100, 50);
reset.setBounds(13, 260, 100, 50);
btn0.setBounds(323, 260, 60, 50);
label1.setBounds(155,-5,200, 50);
label2.setBounds(13, 50, 100, 20);
label3.setBounds(13, 70, 200, 20);
label4.setBounds(13, 160, 100, 20);
myText1.setBounds(96, 50, 100, 20);
myText2.setBounds(96, 160, 100, 20);
}
public void guiExtras()
{
myPanel.setLayout(null);
myPanel.setSize(500,400);
frame.add(myPanel);
frame.setBounds(600,50,500,400);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
myText1.setEditable(false);
myText2.setEditable(false);
//myPanel.setOpaque(true);
myPanel.setBackground(Color.black);
}
public void setButtonsListeners()
{
//bill amounts
buttons.addActionListener(new ActionListener()
{@Override public void actionPerformed(ActionEvent e)
{
num=num+(e.getActionCommand());
//buttons.setEnabled(true);
try {
output1=formatter.format(formatter.parse(num));
} catch (ParseException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
myText1.setText(output1);
}});
}
public void setTipListeners()
{
//tips
tBtn1.addActionListener(new ActionListener() {@Override public void actionPerformed(ActionEvent e) {tip=.15;}});
tBtn2.addActionListener(new ActionListener() {@Override public void actionPerformed(ActionEvent e) {tip=.18;}});
tBtn3.addActionListener(new ActionListener() {@Override public void actionPerformed(ActionEvent e) {tip=.20;}});
}
public void setCalcListener()
{
calc.addActionListener(new ActionListener() {@Override public void actionPerformed(ActionEvent e)
{
amountTaxed=(Double.parseDouble(output1)*tip)+Double.parseDouble(output1);
finalAmount=(amountTaxed*8.25)+amountTaxed;
try {
output2=formatter.format(formatter.parse(Double.toString(finalAmount)));
} catch (ParseException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
myText2.setText(output2);
myPanel.setBackground(Color.gray);
label1.setText(("<html> <p style='font-size: 15px; color: white;'> TIP CALCULATOR </p></html>"));
}});
}
public void setResetListerner()
{
reset.addActionListener(new ActionListener() {@Override public void actionPerformed(ActionEvent e)
{
tip=0;
finalAmount=0;
amountTaxed=0;
num="000.00";
output1="000.00";
output2="000.00";
myText2.setText(output2);
myText1.setText(output1);
myPanel.setBackground(Color.BLACK);
//myPanel.repaint();
}});
}
public static void main(String[] args)
{
new calGui();
}
}
答案 1 :(得分：0)
我创建了一些代码来做你想做的事。基本上，您必须保留当前显示图像的索引，然后使用该索引显示正确的图像。
我创建了一个虚构的扩展图像列表。你可以放弃它。
<script>
var currentImage = 0;
var maximages = 4;
$(document).ready(function() {
$('#leftarrow').click(function() {
currentImage = currentImage - 1;
if (currentImage < 0) {
currentImage = 0;
}
updateImage();
});
$('#rightarrow').click(function() {
currentImage = currentImage + 1;
if (currentImage > maximages) {
currentImage = maximages;
}
updateImage();
});
});
function updateImage() {
var kids = $('.smallerImages').children();
var newsrc = kids.eq(currentImage).attr('src');
$('#mainPicture').attr('src', newsrc);
}
</script>
<img id='leftarrow' src="leftarrow.png" style="width:30px;height:200px;" />
<img id="mainPicture" class="image-resposive" src="test1.png" />
<span id="rightarrow">
<img src="leftarrow.png" style="width:30px;height:200px;" />
</span>
<div id="allimages">
<div class="smallerImages">
<img class="small" src="image1.png" />
</div>
<div class="smallerImages">
<img class="small" src="image2.png" />
</div>
<div class="smallerImages">
<img class="small" src="image3.png" />
</div>
<div class="smallerImages">
<img class="small" src="image4.png" />
</div>
<div class="smallerImages">
<img class="small" src="image5.png" />
</div>
</div>