<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <link rel="stylesheet" type="text/css" href="/css/normalize.css"> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <style type="text/css"> body { background-color:#fff; position:relative; font-size:14px; font-family:arial;} .mask { float:left; margin:40px; width:810px; height:310px; overflow:hidden; } ul.images { position:relative; top:0px;left:0px; } ul.images li { position:absolute; top:0px;left:0px; } ul.triggers { position:absolute; top:291px; left:614px; } ul.triggers li { float:left; margin:0 5px; font: bold 16px arial; cursor:pointer; background-color:#ccc; color:#000; padding:10px; }ul.triggers li.selected {background-color:red; color:#000;} .control {position:absolute; top: 380px; color:#fff; cursor:pointer;} .prev { left:120px; } .next { left:180px; } </style> <script type="text/javascript">//<![CDATA[ $(window).load(function(){ var triggers = $('ul.triggers li'); var images = $('ul.images li'); var lastElem = triggers.length-1; var target; triggers.first().addClass('selected'); images.hide().first().show(); function sliderResponse(target) { images.fadeOut(3000).eq(target).fadeIn(3000); triggers.removeClass('selected').eq(target).addClass('selected'); } triggers.click(function() { if ( !$(this).hasClass('selected') ) { target = $(this).index(); sliderResponse(target); resetTiming(); } }); $('.next').click(function() { target = $('ul.triggers li.selected').index(); target === lastElem ? target = 0 : target = target+1; sliderResponse(target); resetTiming(); }); $('.prev').click(function() { target = $('ul.triggers li.selected').index(); lastElem = triggers.length-1; target === 0 ? target = lastElem : target = target-1; sliderResponse(target); resetTiming(); }); function sliderTiming() { target = $('ul.triggers li.selected').index(); target === lastElem ? target = 0 : target = target+1; sliderResponse(target); } var timingRun = setInterval(function() { sliderTiming(); },7000); function resetTiming() { clearInterval(timingRun); timingRun = setInterval(function() { sliderTiming(); },7000); } });//]]> </script> </head> <body> <div class="mask"> <ul class="images"> <a href="#"> <li> <img src="img path 1"> </li> </a> <a href="#"> <li> <img src="img path 2"> </li> </a> <a href="#"> <li> <img src="img path 3"> </li> </a> <a href="#"> <li> <img src="img path 4"> </li> </a> <a href="#"> <li> <img src="img path 5"> </li> </a> </ul> </div> <ul class="triggers"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <span class="control prev">Prev</span> <span class="control next">Next</span> </body> </html>
<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <link rel="stylesheet" type="text/css" href="/css/normalize.css"> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <style type="text/css"> body { background-color:#fff; position:relative; font-size:14px; font-family:arial;} .mask { float:left; margin:40px; width:810px; height:310px; overflow:hidden; } ul.images { position:relative; top:0px;left:0px; } ul.images li { position:absolute; top:0px;left:0px; } ul.triggers { position:absolute; top:291px; left:614px; } ul.triggers li { float:left; margin:0 5px; font: bold 16px arial; cursor:pointer; background-color:#ccc; color:#000; padding:10px; }ul.triggers li.selected {background-color:red; color:#000;} .control {position:absolute; top: 380px; color:#fff; cursor:pointer;} .prev { left:120px; } .next { left:180px; } </style> <script type="text/javascript">//<![CDATA[ $(window).load(function(){ var triggers = $('ul.triggers li'); var images = $('ul.images li'); var lastElem = triggers.length-1; var target; triggers.first().addClass('selected'); images.hide().first().show(); function sliderResponse(target) { images.fadeOut(3000).eq(target).fadeIn(3000); triggers.removeClass('selected').eq(target).addClass('selected'); } triggers.click(function() { if ( !$(this).hasClass('selected') ) { target = $(this).index(); sliderResponse(target); resetTiming(); } }); $('.next').click(function() { target = $('ul.triggers li.selected').index(); target === lastElem ? target = 0 : target = target+1; sliderResponse(target); resetTiming(); }); $('.prev').click(function() { target = $('ul.triggers li.selected').index(); lastElem = triggers.length-1; target === 0 ? target = lastElem : target = target-1; sliderResponse(target); resetTiming(); }); function sliderTiming() { target = $('ul.triggers li.selected').index(); target === lastElem ? target = 0 : target = target+1; sliderResponse(target); } var timingRun = setInterval(function() { sliderTiming(); },7000); function resetTiming() { clearInterval(timingRun); timingRun = setInterval(function() { sliderTiming(); },7000); } });//]]> </script> </head> <body> <div class="mask"> <ul class="images"> <a href="#"> <li> <img src="http://image.ohozaa.com/i/8ab/cTg6WZ.png"> </li> </a> <a href="#"> <li> <img src="http://image.ohozaa.com/i/aa2/OUICdi.png"> </li> </a> <a href="#"> <li> <img src="http://image.ohozaa.com/i/a4e/pyZIS3.png"> </li> </a> <a href="#"> <li> <img src="http://image.ohozaa.com/i/653/HuUrwT.png"> </li> </a> <a href="#"> <li> <img src="http://image.ohozaa.com/i/93c/fm3chW.png"> </li> </a> </ul> </div> <ul class="triggers"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <span class="control prev">Prev</span> <span class="control next">Next</span> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
