BIGtheme.net http://bigtheme.net/ecommerce/opencart OpenCart Templates

Slideshow đơn giản bằng jquery kết hợp html5

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>

<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 */

*{margin:0;padding:0}
#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;
}

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);
});

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 

One comment

  1. Nay đang tìm slideshow thì thấy bài này của anh ^^

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>