 | Bài viết này sẽ cung cấp một mã nguồn đơn giản dùng để tao một thanh trượt trình bày hình ảnh, với hai công cụ Next và Previous, ngoài ra nó còn có chế độ trượt tự động trong vòng 5 giây. |
Demo:
Image:
Source Code - Mã Nguồn:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> VNLIVES.NET - Source code JQuery slider with controls and automatic scrolling demo.</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
<style type='text/css'>
#wrapper, body {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100%;
overflow: hidden;
background: #0548FF;
}
header {
margin: 0 auto;
width: 650px;
}
h1 {
text-align: center;
color: #CDC51D;
font-size: 3vw;
}
#slider_container {
width: 400px;
overflow: hidden;
margin: 50px auto;
}
#slider {
width: 1700px;
height: 200px;
}
.slides {
height: 100%;
position: relative;
float: left;
}
.slides img {
height: 200px;
width: 400px;
}
.controls {
position: absolute;
top: 90px;
}
.controls a {
position: absolute;
display: block;
width: 18px;
height: 20px;
}
a.control_left {
background: url('http://s2.postimg.org/gqp4dd7ed/arrow_left.png');
left: 10px;
}
a.control_right {
background: url('http://s2.postimg.org/4q3ocmzzp/arrow_right.png');
left: 370px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function ($) {
// start slider function
startSlider();
// set width and step variables and add active class to first slider
var slideWidth = $('.slides').width();
$('#slide1').addClass('slides active');
function resetInterval(){
window.clearInterval(looper);
looper = setInterval(autoSlide, 5000);
}
function autoSlide(){
// remove and add class active
$('.active').removeClass('active').next().addClass('active');
// animation expression
$('.active').animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
$('.active').siblings().animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
// return to first slide after the last one
if ($('.active').length === 0) {
$('#slide1').addClass('active');
$('.slides').animate({
'left': 0
}, 500);
}
}
// actual function
function startSlider() {
looper = setInterval(autoSlide, 5000); // interval
// adding controls
$('.slides').append("<div class='controls'><a class='control_left' href='#'></a><a class='control_right' href='#'></a></div>");
// remove unnecessary controlls on first and last slides
$('.slides:nth-child(1) a.control_left').remove();
$(".slides:nth-child(" + $('.slides').length + ") a.control_right").remove();
// add functionality to controls
$('.control_left').on('click', function () {
resetInterval();
$('.active').removeClass('active').prev().addClass('active');
$('.active').animate({
'left': '+=' + (slideWidth) + 'px'
}, 500);
$('.active').siblings().animate({
'left': '+=' + (slideWidth) + 'px'
}, 500);
});
$('.control_right').on('click', function () {
resetInterval();
$('.active').removeClass('active').next().addClass('active');
$('.active').animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
$('.active').siblings().animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
});
}
});
});//]]>
</script>
</head>
<body>
<div id="wrapper">
<header>
<h1>VNLIVES.NET - Simplest sliding image slider & Automatic slider.</h1>
</header>
<div id="content">
<div id="slider_container">
<div id="slider">
<div class="slides" id="slide1">
<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 class="slides" id="slide2">
<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 class="slides" id="slide3">
<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 class="slides" id="slide4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg04dZRTyXPCrZZ40XhMIZQ328y54HwlHvA3LiayJDI50pmuTqWXdj68s27lacH4VClu0_n0HNOcrRiuM3ohURaiofNn7pEtVF3Q7HbEmSsmdG6mGA3xIN3IF2DhyfsehB5yEWaHpUFwOk/s1600/JQuery-slider-with-controls-and-automatic-004.jpg" alt="">
</div>
</div>
</div>
</div>
<footer></footer>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> VNLIVES.NET - Source code JQuery slider with controls and automatic scrolling demo.</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
<style type='text/css'>
#wrapper, body {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100%;
overflow: hidden;
background: #0548FF;
}
header {
margin: 0 auto;
width: 650px;
}
h1 {
text-align: center;
color: #CDC51D;
font-size: 3vw;
}
#slider_container {
width: 400px;
overflow: hidden;
margin: 50px auto;
}
#slider {
width: 1700px;
height: 200px;
}
.slides {
height: 100%;
position: relative;
float: left;
}
.slides img {
height: 200px;
width: 400px;
}
.controls {
position: absolute;
top: 90px;
}
.controls a {
position: absolute;
display: block;
width: 18px;
height: 20px;
}
a.control_left {
background: url('http://s2.postimg.org/gqp4dd7ed/arrow_left.png');
left: 10px;
}
a.control_right {
background: url('http://s2.postimg.org/4q3ocmzzp/arrow_right.png');
left: 370px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function ($) {
// start slider function
startSlider();
// set width and step variables and add active class to first slider
var slideWidth = $('.slides').width();
$('#slide1').addClass('slides active');
function resetInterval(){
window.clearInterval(looper);
looper = setInterval(autoSlide, 5000);
}
function autoSlide(){
// remove and add class active
$('.active').removeClass('active').next().addClass('active');
// animation expression
$('.active').animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
$('.active').siblings().animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
// return to first slide after the last one
if ($('.active').length === 0) {
$('#slide1').addClass('active');
$('.slides').animate({
'left': 0
}, 500);
}
}
// actual function
function startSlider() {
looper = setInterval(autoSlide, 5000); // interval
// adding controls
$('.slides').append("<div class='controls'><a class='control_left' href='#'></a><a class='control_right' href='#'></a></div>");
// remove unnecessary controlls on first and last slides
$('.slides:nth-child(1) a.control_left').remove();
$(".slides:nth-child(" + $('.slides').length + ") a.control_right").remove();
// add functionality to controls
$('.control_left').on('click', function () {
resetInterval();
$('.active').removeClass('active').prev().addClass('active');
$('.active').animate({
'left': '+=' + (slideWidth) + 'px'
}, 500);
$('.active').siblings().animate({
'left': '+=' + (slideWidth) + 'px'
}, 500);
});
$('.control_right').on('click', function () {
resetInterval();
$('.active').removeClass('active').next().addClass('active');
$('.active').animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
$('.active').siblings().animate({
'left': '-=' + (slideWidth) + 'px'
}, 500);
});
}
});
});//]]>
</script>
</head>
<body>
<div id="wrapper">
<header>
<h1>VNLIVES.NET - Simplest sliding image slider & Automatic slider.</h1>
</header>
<div id="content">
<div id="slider_container">
<div id="slider">
<div class="slides" id="slide1">
<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 class="slides" id="slide2">
<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 class="slides" id="slide3">
<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 class="slides" id="slide4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg04dZRTyXPCrZZ40XhMIZQ328y54HwlHvA3LiayJDI50pmuTqWXdj68s27lacH4VClu0_n0HNOcrRiuM3ohURaiofNn7pEtVF3Q7HbEmSsmdG6mGA3xIN3IF2DhyfsehB5yEWaHpUFwOk/s1600/JQuery-slider-with-controls-and-automatic-004.jpg" alt="">
</div>
</div>
</div>
</div>
<footer></footer>
</div>
</body>
</html>
Source: stackoverflow
No comments:
Post a Comment