|
「網戸+自作+DIY などで検索してる方へ」 |
「押入れ改造の記録」 |
「踏み台を諦めてベビーゲート作りに着手」 |
KRLGHDN: かてごり: DIY |
<div id="PhoteSlideDemo1"> <ul style="width: 1500px;"> <li style="float: left;"><img src="http://bit.ly/xO0JiZ"></li> <li style="float: left;"><img src="http://bit.ly/Ud2YwD"></li> <li style="float: left;"><img src="http://bit.ly/TpYNMI"></li> <li style="float: left;"><img src="http://bit.ly/V2kAfk"></li> <li style="float: left;"><img src="http://bit.ly/TmGgB0"></li> </ul> </div> <div> <a href="javascript:void(0);" id="slide01Prev"><< prev</a>
<a href="javascript:void(0);" id="slide01Next">next >></a> </div>
$(function(){
$('#PhoteSlideDemo1').slider({
'duration' : 4000
,'speed' : 'slow'
,'auto' : false
,'data' : [
'<img src="http://bit.ly/Vfbqjr">'
,'<img src="http://bit.ly/Ud2YwD">'
,'<img src="http://bit.ly/TpYNMI">'
,'<img src="http://bit.ly/V2kAfk">'
,'<img src="http://bit.ly/TmGgB0">'
]
,'action': {
'prev' : '#PhoteSlideDemo1Prev',
'next' : '#PhoteSlideDemo1Next'
}
});
});
<div id="PhoteSlideDemo2"></div> <div><a href="javascript:void(0);" id="PhoteSlideDemo2Prev">▲prev</a>
<a href="javascript:void(0);" id="PhoteSlideDemo2Next">▼next</a></div>
$(function(){
$('#PhoteSlideDemo2').slider({
'duration' : 4000
,'speed' : 700
,'vector' : 'top'
,'auto' : true
,'data' : [
'<img src="http://bit.ly/Vfbqjr">'
,'<img src="http://bit.ly/Ud2YwD">'
,'<img src="http://bit.ly/TpYNMI">'
,'<img src="http://bit.ly/V2kAfk">'
,'<img src="http://bit.ly/TmGgB0">'
]
,'action': {
'prev' : '#PhoteSlideDemo2Prev',
'next' : '#PhoteSlideDemo2Next'
}
});
});
ul, li { margin: 0px; padding: 0px;}
#PhoteSlideDemo1, #PhoteSlideDemo2 {
width: 240px;
height: 320px;
border: 1px solid #ccc;
overflow: hidden;
}
#PhoteSlideDemo1 li img, #PhoteSlideDemo2 li img {
display: block;
max-width: 240px;
max-height: 320px;
}