Hướng dẫn làm slideshow đơn giản bằng jquery kết hợp html5
Slideshow đơn giản bằng jquery kết hợp html5:
Tạo 1 file index.html chứa code html.
Phần này mình không chèn ảnh mà sử dụng css để tạo màu để tạo sự khác biệt. Nếu làm slideshow thì chèn ảnh vào thẻ img ở dưới. Chú ý cần có các thẻ link để nhúng css, js từ thư mục js và jquery. Nếu không sử dụng mạng internet thì down jquery theo link http://code.jquery.com/jquery-1.11.0.min.js
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>HoangThongit.com – Chuyên trang chia sẻ kiến thức CNTT</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script type=”text/javascript” src=”js/slideshow.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
</head>
<html>
<head>
<meta charset=”utf-8″>
<title>HoangThongit.com – Chuyên trang chia sẻ kiến thức CNTT</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script type=”text/javascript” src=”js/slideshow.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
</head>
<body>
<nav id=”slider”>
<ul style=”width:600px”>
<li>
<figure>
<figcaption>SLIDE 1</figcaption>
<img src=”” >
</figure>
</li>
<li>
<figure>
<figcaption>SLIDE 2</figcaption>
<img src=”” >
</figure>
</li>
<li>
<figure>
<figcaption>SLIDE 3</figcaption>
<img src=”” >
</figure>
</li>
</ul>
</nav>
</body>
</html>
Tạo file Css có nội dung như sau:
@charset “utf-8″;
/* CSS Document */
/* CSS Document */
*{margin:0;padding:0}
#slider{
width:300px;
height:150px;
position:relative;
margin:auto;
padding:0;
overflow:hidden;
#slider{
width:300px;
height:150px;
position:relative;
margin:auto;
padding:0;
overflow:hidden;
}
#slider ul{
list-style:none;
position:relative;
overflow:hidden;
width:100%;
}
#slider ul li{
float:left;
display:block;
overflow:hidden;
width:300px;
height:150px;
text-align:center
}
/* cai nay k can*/
li:nth-child(1){
background:#f00;
}
li:nth-child(2){
background:#0f0;
}
li:nth-child(3){
background:#00f;
}
#slider ul{
list-style:none;
position:relative;
overflow:hidden;
width:100%;
}
#slider ul li{
float:left;
display:block;
overflow:hidden;
width:300px;
height:150px;
text-align:center
}
/* cai nay k can*/
li:nth-child(1){
background:#f00;
}
li:nth-child(2){
background:#0f0;
}
li:nth-child(3){
background:#00f;
}
File css này đặt tên là style nằm trong thư mục css.
Tạo 1 file javascript và viết code như dưới:
$(document).ready(function(e) {
setInterval(function(){
$(“#slider ul”).animate({
left:-300
},300,function(){
$(“#slider ul li:first-child”).appendTo(“#slider ul”);
$(“#slider ul”).css(‘left’,”);
});
},3000);
});
setInterval(function(){
$(“#slider ul”).animate({
left:-300
},300,function(){
$(“#slider ul li:first-child”).appendTo(“#slider ul”);
$(“#slider ul”).css(‘left’,”);
});
},3000);
});
File js này đặt tên là js và đặt trong thư mục js.
Chuyên trang chia sẻ kiến thức CNTT. Quản trị mạng – Thiết kế web
Chuyên trang chia sẻ kiến thức Công Nghệ Thông tin. Quản trị mạng – Thiết kế Website
EmoticonEmoticon