「網戸+自作+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; }