 | Bài viết này sẽ cung mất một mã nguồn về JQuery Siddle đơn giản, dễ áp dụng, dễ tích hợp, và với thiết kế cơ bản của nó, bạn hoàn toàn có thể dễ dàng thiết lại lại mẫu(template) này cho phù hợp với bố cục trên website của bạn. |
Live Demo:
Image Screenshot:
Source Code - Mã nguồn:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>VNLIVES.NET | Source Code Simple JQuery Siddle Basic Template.</title>
<style>
#gallery{
position:relative;
margin: 0 auto;
overflow:hidden;
width:500px;
height:278px;
}
#slider{
position:absolute;
left:0;
height:278px;
}
#slider > div {
position:relative;
float:left;
width:500px;
height:278px;
}
#slider > div img{
width:100%;
}
/* buttons */
#gallery > span{
cursor:pointer;
position:absolute;
width:50px;
height:100%;
background:rgba(255,255,255,0.5);
opacity:0.5;
}
#next{
right:0px;
}
#gallery > span:hover{
opacity:1;
}
</style>
</head>
<body>
<div id="gallery">
<div id="slider">
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWXUsdPLI-52dc3d2u5cg4QZPV2cC3teinKLOshbZR2aEbkhqRwPwLnG-HxP2QMCOA497pZV49wO025Pjy0-cKPIvBEp_RH-cIO2H7tQQZSwFdnCg9rpq6zmufh6mNzp30bjUhl5fdAo/s1600/JQuery-slider-with-controls-and-automatic-001.jpg" alt=""></div>
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1DB4_nbTSMFSkf6vCPXOVXMUcGmrRA3oRrYwQZRnILpfawhweVoWnYwA4CH5071BQHuk_1W_8s5kWJiuQKNrLHA7WfX8JniW0LMmgA5SKhYrZ2mNKJEiv609yAfkuwfZafAeerYV_xD0/s1600/JQuery-slider-with-controls-and-automatic-002.jpg" alt=""></div>
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHliUAxfwE2xhxmRq44vX-LmP8DfjmAh7J8m_rETqEyK_NE4QpMVTnTVu1wkwe09EXpo5rKvip7Nc2lmNX6gYXGAZPgfwmFQUhtOeS405MxSV8HhwJaV2MJITFI1C1XdnlDu5QMaORp1Q/s1600/JQuery-slider-with-controls-and-automatic-003.jpg" alt=""></div>
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg04dZRTyXPCrZZ40XhMIZQ328y54HwlHvA3LiayJDI50pmuTqWXdj68s27lacH4VClu0_n0HNOcrRiuM3ohURaiofNn7pEtVF3Q7HbEmSsmdG6mGA3xIN3IF2DhyfsehB5yEWaHpUFwOk/s1600/JQuery-slider-with-controls-and-automatic-004.jpg" alt=""></div>
</div>
<span id="prev"></span>
<span id="next"></span>
</div>
<script>
try {var $gal = $('#gallery'),
$sli = $('#slider'),
$box = $('div',$sli),
W = $gal.width(), // 500
N = $box.length, // 3
C = 0, // a counter
intv;
$sli.width(W*N);
$('#prev, #next').click(function(){
C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
$sli.stop().animate({left: -C*W },800);
});
function auto(){
intv = setInterval(function(){
$('#next').click();
}, 3000);
}
auto(); // start
$('#gallery').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
} catch (error) { throw error; }
</script>
</body>
</html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>VNLIVES.NET | Source Code Simple JQuery Siddle Basic Template.</title>
<style>
#gallery{
position:relative;
margin: 0 auto;
overflow:hidden;
width:500px;
height:278px;
}
#slider{
position:absolute;
left:0;
height:278px;
}
#slider > div {
position:relative;
float:left;
width:500px;
height:278px;
}
#slider > div img{
width:100%;
}
/* buttons */
#gallery > span{
cursor:pointer;
position:absolute;
width:50px;
height:100%;
background:rgba(255,255,255,0.5);
opacity:0.5;
}
#next{
right:0px;
}
#gallery > span:hover{
opacity:1;
}
</style>
</head>
<body>
<div id="gallery">
<div id="slider">
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWXUsdPLI-52dc3d2u5cg4QZPV2cC3teinKLOshbZR2aEbkhqRwPwLnG-HxP2QMCOA497pZV49wO025Pjy0-cKPIvBEp_RH-cIO2H7tQQZSwFdnCg9rpq6zmufh6mNzp30bjUhl5fdAo/s1600/JQuery-slider-with-controls-and-automatic-001.jpg" alt=""></div>
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1DB4_nbTSMFSkf6vCPXOVXMUcGmrRA3oRrYwQZRnILpfawhweVoWnYwA4CH5071BQHuk_1W_8s5kWJiuQKNrLHA7WfX8JniW0LMmgA5SKhYrZ2mNKJEiv609yAfkuwfZafAeerYV_xD0/s1600/JQuery-slider-with-controls-and-automatic-002.jpg" alt=""></div>
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHliUAxfwE2xhxmRq44vX-LmP8DfjmAh7J8m_rETqEyK_NE4QpMVTnTVu1wkwe09EXpo5rKvip7Nc2lmNX6gYXGAZPgfwmFQUhtOeS405MxSV8HhwJaV2MJITFI1C1XdnlDu5QMaORp1Q/s1600/JQuery-slider-with-controls-and-automatic-003.jpg" alt=""></div>
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg04dZRTyXPCrZZ40XhMIZQ328y54HwlHvA3LiayJDI50pmuTqWXdj68s27lacH4VClu0_n0HNOcrRiuM3ohURaiofNn7pEtVF3Q7HbEmSsmdG6mGA3xIN3IF2DhyfsehB5yEWaHpUFwOk/s1600/JQuery-slider-with-controls-and-automatic-004.jpg" alt=""></div>
</div>
<span id="prev"></span>
<span id="next"></span>
</div>
<script>
try {var $gal = $('#gallery'),
$sli = $('#slider'),
$box = $('div',$sli),
W = $gal.width(), // 500
N = $box.length, // 3
C = 0, // a counter
intv;
$sli.width(W*N);
$('#prev, #next').click(function(){
C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
$sli.stop().animate({left: -C*W },800);
});
function auto(){
intv = setInterval(function(){
$('#next').click();
}, 3000);
}
auto(); // start
$('#gallery').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
} catch (error) { throw error; }
</script>
</body>
</html>
Source: stackoverflow
No comments:
Post a Comment