I have a slide show that currently has text for "Next" and Previous" buttons. Can someone tell me what I need to do to swap out the "text" I am using for buttons for "Next" and "Previous" jpeg images I have created?
我有一个幻灯片,目前有“下一页”和“上一页”按钮的文字。有人可以告诉我我需要做什么来换掉我用于“下一页”和“上一页”jpeg图像按钮的“文本”已经创造出来了?
Here is the html I am currently using:
这是我目前使用的html:
<body style="font-family: Arial, Sans-serif, sans;">
<h2>Top 10 Vechicles Among US-Hispanics</h2><br />
<div id="slideshow">
<div class="sp">
<img src="img/banner01.jpg" alt="Toyota Corolla" /></a>
<br><strong>1. Toyota Corolla</strong><br>
The 2013 Toyota Corolla is a study in practicality and stylish engineering. The Corolla starts at $16,800 for the basic L model and comes with eight airbags, power windows and door locks, LED headlamps and running lights, Bluetooth connectivity, and a USB port. The comparatively deluxe S model ($19,000) comes with integrated spoiler and fog lamps, a leather-wrapped steering wheel, chrome-tipped exhaust and a 3.5-inch multi-information display. The Corolla offers an estimated 28/37 mpg.
</div>
<div>
<img src="img/banner02.jpg" alt="Honda Civic" /></a>
<br><strong>2. Honda Civic</strong><br>
The Honda Civic, a longtime favorite sedan among fuel-conscious drivers, comes in six models, including hybrid and natural gas versions. The 4-door access and roomy interior give the Civic the feel of a much larger sedan, but the 1.8-liter engine offers exceptional fuel economy, rated at 28 city/39 for the LX sedan and 44/44 for the hybrid. The Civic comes with standard front and side airbags, 4-wheel anti-lock disc brakes, a rear-view camera and Bluetooth connectivity. Pricing starts at $18,165 for the LX and ranges up to $24,360 for the hybrid. The basic coupe starts at $17,965.
</div>
<div>
<img src="img/banner03.jpg" alt="Honda Accord" /></a>
<br /><strong>3. Honda Accord</strong><br>
The 2013 Honda Accord proved to be popular with drivers and professional reviewers alike. The new direct-injection 4-cylinder engine with continuously variable automatic transmission delivers smooth acceleration and nice mileage numbers, beginning at an affordable MSRP of $21,680 for the basic model, on up to $33,430 with the bells and whistles. A V6, 6-speed manual and 6-speed automatic are also available. Mileage ranges from 21/32 for the EX-L V6 Automatic Coupe with Navigation to 27/36 for the 4-cylinder CVT.
</div>
<div>
<img src="img/banner04.jpg" alt="Toyota Camry" /></a>
<br /><strong>4. Toyota Camry</strong><br>
The Toyota Camry is one of the best-selling vehicles of all time, with its affordable sticker price, easy mileage and notable dependability. MSRP ranges from $22,235 for the L on up to $30,465 for the XLE V6. Mileage ranges from 21/35-31/35, depending on the model. Available engines include 173-hp and 178-hp 4-cylinders and a nicely packed, 268-hp, 3.5-liter V6, all running on regular gas and all shifted by a 6-speed automatic tranny. An MP3 decoder is standard on all models.
</div>
<div>
<img src="img/banner05.jpg" alt="Ford F-Series" /></a>
<br /><strong>5. Ford F-Series</strong><br>
The Ford F-Series of pickups has put a huge fleet of tough trucks in the hands of enthusiastic consumers over the years. The 2013 F-150 alone comes in 10 models, ranging in price from $24,070 for the XL to $53,300 for the Limited Edition. Mileage varies along the way, with the XL offering 17/23 with a 3.7-liter V6, on through 11/16 for the SVT Raptor with its mighty 6.2-liter V8. When you venture into Super Duty territory, you'll reach the top with the F-450 Platinum, starting at $67,330. That baby comes with a 6.7-liter Power Stroke V8 turbo diesel engine that delivers 400 hp and 800 foot-pounds of torque.
</div>
<div>
<img src="img/banner06.jpg" alt="Nissan Sentra" /></a>
<br /><strong>6. Nissan Sentra</strong><br>
The 2013 Nissan Sentra drives up in six models, from the basic S for $15,990 on up to the SL starting at $19,590. The L's 1.8-liter, 4-cylinder engine with 6-speed manual transmission is rated at 27/36, while the rest of the fleet can be expected to deliver around 30/39. The automatic transmission's Eco and Sport settings offer maximum mileage on the one hand and maximum performance on the other, with a Normal setting for a combination of the two.
</div>
<div>
<img src="img/banner07.jpg" alt="Nissan Altima" /></a>
<br /><strong>7. Nissan Altima</strong><br>
The midsize Nissan Altima was completely made over for the 2013 model year, with seven trims available with 4- and 6-cylinder engines. The sporty yet practical sedan with the 2.5-liter I4 engine carries an MSRP of $21,760 and is rated 27/38 for mileage. Equipped with a 3.5-liter V6, the SL delivers 22/31. The comfortable, roomy cabin makes for a pleasant ride -- but the continuously variable transmission makes for smooth drive.
</div>
<div>
<img src="img/banner08.jpg" alt="Chevrolet Silverado" /></a>
<br /><strong>8. Chevrolet Silverado</strong><br>
The 2013 Chevy Silverado, with a starting price of $23,590 for the two-wheel-drive 1500 model, delivers ruggedness, strength and style. But let's talk top of the line, shall we? The LTZ crew cab short box, with available Vortec 6.2-liter V8, delivers a payload of 1,937 pounds despite being hefted up with goodies like heated outside mirrors, automatic dual-zone climate control and heated leather-appointed bucket seats. For really getting the job done, you may like the 3500HD, which can haul up to 23,100 pounds.
</div>
<div>
<img src="img/banner09.jpg" alt="Honda CR-V" /></a>
<br /><strong>9. Honda CR-V</strong><br>
With its tight turning radius, carlike handling and roomy interior, the 2013 Honda CR-V proves itself a top contender in the competitive small-SUV class. The 4-cylinder, 5-speed automatic transmission gets it an EPA estimate of 23/31, making it a cost-friendly commuter car as well. Standard features include a USB port, Bluetooth connectivity and a backup camera. The CR-V comes in three trims, with MSRP ranging from $22,795 for the LX 2-wheel drive to $30,295 for the EX-L all-wheel drive with optional navigation system.
</div>
<div>
<img src="img/banner10.jpg" alt="Nissan Versa" /></a>
<br /><strong>10. Nissan Versa</strong><br>
The 2013 Nissan Versa scores big points for its affordability, with a starting price of $11,990, and an EPA estimate of 31/40 when equipped with the optional continuously variable transmission. The top model carries an MSRP of $16,890, with the CVT and a 1.6-liter gasoline engine. The Versa comes with few standard goodies, but options include push-button start, backup camera, Bluetooth technology, satellite radio and a USB port.
</div>
</div>
<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>
Here is the css code:
这是css代码:
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position:relative;
height:560px;
width:620px;
}
#slideshow DIV {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
height: 560px;
width:620px;
background-color: #FFF;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 350px;
display: block;
border: 0;
margin-bottom: 10px;
}
#nav {margin-top:10px; width:100%;}
#button-previous {
float:left;margin-left:200px;
cursor:pointer;
}
#button-next {
float:right;margin-right:200px;
cursor:pointer;
}
Here is the jquery code:
这是jquery代码:
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
}
else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
}
else{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
</style>
Thanks, Ron
1 个解决方案
#1
0
try this in your CSS:
在你的CSS中尝试这个:
#button-previous{color:transparent; background:transparent url(your_next_image.png) no-repeat 50%}
#button-next{color:transparent; background:transparent url(your_previous_image.png) no-repeat 50%}
and that's it
就是这样
#1
0
try this in your CSS:
在你的CSS中尝试这个:
#button-previous{color:transparent; background:transparent url(your_next_image.png) no-repeat 50%}
#button-next{color:transparent; background:transparent url(your_previous_image.png) no-repeat 50%}
and that's it
就是这样