|
 |
| |
จะแก้ให้เป็นแบบคลิกที่รูปเองและเอาตั้งเวลาเปลี่ยนรูปเองออก แก้ไขยังไงคับ |
| |
 |
|
|
 |
 |
|
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple jQuery Hover Image Gallery Version 2.0 by PlaKriM</title>
<style type="text/css">
#SimpleGallery{
padding:5px;
margin:0px;
}
#SimpleGallery div{
float:left;
font:bold 12px Tahoma;
text-align:center;
width:320px;
padding:0px;
margin:0px;
}
#SimpleGallery ol{
float:left;
width:110px;
padding:0px;
margin:0px;
}
#SimpleGallery li{
width:50px;
height:50px;
padding:1px;
margin:0px;
float:left;
list-style:none;
}
#SimpleGallery li img{
border:0px;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.simple.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#SimpleGallery').SimpleGallery({activeItem:0});
});
</script>
</head>
<body>
<div id="SimpleGallery">
<div><img /><span></span></div>
<ol>
<li><a href="images/large/1.jpg" title="Description of image 1"><img src="images/thumb/1.jpg" /></a></li>
<li><a href="images/large/2.jpg" title="Description of image 2"><img src="images/thumb/2.jpg" /></a></li>
<li><a href="images/large/3.jpg" title="Description of image 3"><img src="images/thumb/3.jpg" /></a></li>
<li><a href="images/large/4.jpg" title="Description of image 4"><img src="images/thumb/4.jpg" /></a></li>
<li><a href="images/large/5.jpg" title="Description of image 5"><img src="images/thumb/5.jpg" /></a></li>
<li><a href="images/large/6.jpg" title="Description of image 6"><img src="images/thumb/6.jpg" /></a></li>
<li><a href="images/large/7.jpg" title="Description of image 7"><img src="images/thumb/7.jpg" /></a></li>
<li><a href="images/large/8.jpg" title="Description of image 8"><img src="images/thumb/8.jpg" /></a></li>
<li><a href="images/large/9.jpg" title="Description of image 9"><img src="images/thumb/9.jpg" /></a></li>
<li><a href="images/large/10.jpg" title="Description of image 10"><img src="images/thumb/10.jpg" /></a></li>
</ol>
</div>
</body>
</html>
Code (Java)
(function($){
$.fn.SimpleGallery = function(_config){
var _config = $.extend({
swapDuration: 3500,
fadeOutDuration: 200,
fadeInDuration: 500,
activeItem : 0
}, _config);
function _view($item){
var $SG = $('#SimpleGallery');
var itemCount = $SG.find('li').length;
var itemIndex = ($item.index() + 1);
if((itemIndex+1) != _config.activeItem && !(_config.activeItem == 0 && itemIndex == itemCount)){
_config.activeItem = itemIndex;
if(_config.activeItem == itemCount){
_config.activeItem = 0;
}
$SG.find('div')
.stop() // Stop current effect
.fadeTo(0, 1) // Reset image's opacity
.fadeOut(_config.fadeOutDuration, function(){ // Start image's fade in for hide old image item
$(this).find('img').attr('src',$item.find('a').attr('href')); // Set current image
$(this).find('span').text($item.find('a').attr('title')); // Set current description
$(this).fadeIn(_config.fadeInDuration); // Start image's fade out for show current image item
});
}
}
function _play(){
_view($('#SimpleGallery').find('li').eq(_config.activeItem));
}
return this.each(function (){
_play();
var _interval = setInterval(_play, _config.swapDuration);
$(this).find('li').hover(function(){
if(_interval){
clearInterval(_interval);
}
_interval = setInterval(_play, _config.swapDuration);
$('#SimpleGallery').find('div').show();
_view($(this));
}).find('a').click(function(){return false;});
});
}
})(jQuery);
จะแก้ให้เป็นแบบคลิกที่รูปเองและเอาตั้งเวลาเปลี่ยนรูปเองออก แก้ไขยังไงคับ
Tag : PHP, HTML/CSS, JavaScript
|
|
|
 |
 |
 |
 |
| Date :
2014-11-02 23:29:05 |
By :
nung2553 |
View :
887 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
Code (JavaScript)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script language="javascript">
function img_loop(){
document.getElementById('myimg').src='newimg.png';
doc_start();
}
function doc_start(){
setTimeout( 'img_loop', 15000 );
}
</script>
<body onLoad="doc_start()">
<img id=myimg src="test.png" />
</body>
</html>
ลองศึกษาดูครับ
|
| |
|
|
| |
| Date :
2014-11-03 08:57:33 |
By :
Chaidhanan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
มีตัวอื่นแนะนำไหมคับ
|
| |
|
|
| |
| Date :
2014-11-03 16:49:43 |
By :
nung2553 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
