Tìm hiểu cách tạo thanh trượt / trình chiếu / băng chuyền hình ảnh để hiển thị hình ảnh trên trang web của bạn. Tìm hiểu cách thực hiện chỉ với CSS và trong phần thứ hai, hãy học cách làm điều đó với JS. Xem các ví dụ.

Bạn đang xem : trình chiếu hình ảnh nền html

Image Slider hoặc Image Carousel là một cách để hiển thị nhiều hình ảnh trang web. Hình ảnh lạ mắt có thể thu hút rất nhiều khách truy cập vào trang web.

Thông thường, các thanh trượt hình ảnh được tạo với sự trợ giúp của JavaScript , nhưng với việc phát hành CSS3 , bạn cũng có thể thực hiện điều này bằng cách sử dụng CSS3 thuần túy. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo hiệu ứng trình chiếu với mã tối thiểu là CSS và trong phần thứ hai của bài viết, chúng ta sẽ xem xét các cách tạo thanh trượt hình ảnh bằng JavaScript. Vì vậy, chúng ta hãy đến với cuộc thảo luận của họ bên dưới.

Tạo Thanh trượt Hình ảnh Chỉ Sử dụng CSS3

Có thể, bạn đã thấy các thanh trượt nặng dựa trên JavaScript. Các thanh trượt như vậy làm cho trang web chậm hơn và cũng có thể bị lỗi nếu người dùng đã tắt tính năng giải thích JavaScript trong trình duyệt. Không sử dụng các thanh trượt này là một giải pháp cho vấn đề này, nhưng bạn sẽ triển khai thanh trượt mà không có JavaScript như thế nào? Hãy xem một thanh trượt thích hợp hoạt động mà không cần JavaScript.

Ví dụ về cách tạo trình chiếu bằng CSS thuần túy:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Hình ảnh trình chiếu

& lt; /

title

& gt;

& lt;

style

& gt;

. slider

{

width

:

500px

;

height

:

300px

;

background-color

: màu vàng;

margin-left

: auto;

margin-right

: auto;

margin-top

:

0px

;

text-align

: center;

tràn

: hidden; }

. image-container

{

width

:

1500px

;

background-color

: màu hồng;

height

:

300px

;

clear

: cả hai;

vị trí

: tương đối; -webkit-

chuyển tiếp

: left

2 giây

; -moz-

chuyển tiếp

: left

2 giây

; -o-

chuyển tiếp

: left

2 giây

;

chuyển tiếp

: left

2 giây

; }

. slide

{

float

: left;

margin

:

0px

;

padding

:

0px

;

vị trí

: tương đối; }

# slide-1

: target

~

.image-container

{

left

:

0px

; }

# slide-2

: target

~

.image-container

{

left

: -

500px

; }

# slide-3

: target

~

.image-container

{

left

: -

1000px

; } Các nút

.

{

vị trí

: tương đối;

top

: -

20px

; } Các nút

.

a

{

display

: inline-block;

height

:

15px

;

width

:

15px

;

border-radius

:

50px

;

background-color

: lightgreen; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" slider "

& gt;

& lt;

span

id

=

" slide-1 "

& gt;

& lt; /

span

& gt;

& lt;

span

id

=

" slide-2 "

& gt;

& lt; /

span

& gt;

& lt;

span

id

=

" slide-3 "

& gt;

& lt; /

span

& gt;

& lt;

div

class

=

" image-container "

& gt;

& lt;

img

src

=

" / uploads / media / default / 0001/03 / 66cf5094908491e69d8187bcf934050a4800b37f.jpeg "

class

=

" slide "

width

=

" 500 "

height

=

"300"

/ & gt;

& lt;

img

src

=

" / uploads / media / default / 0001/03 / b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg "

class

=

" slide "

width

=

" 500 "

height

=

"300"

/ & gt;

& lt;

img

src

=

" / uploads / media / default / 0001/03 / 5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg "

class

=

" slide "

width

=

" 500 "

height

=

"300"

/ & gt;

& lt; /

div

& gt;

& lt;

div

class

=

" button "

& gt;

& lt;

a

href

=

" # slide-1 "

& gt;

& lt; /

a

& gt; < / p>

& lt;

a

href

=

" # slide-2 "

& gt;

& lt; /

a

& gt; < / p>

& lt;

a

href

=

" # slide-3 "

& gt;

& lt; /

a

& gt; < / p>

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Ví dụ về cách tạo thanh trượt hình ảnh:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Thanh trượt hình ảnh

& lt; /

title

& gt;

& lt;

style

& gt;

body

{

margin

:

10px

auto;

text-align

: center; }

. content

{

max-width

:

800px

;

text-align

: left;

margin

: auto; }

. simple-ss

{

width

:

800px

;

height

:

250px

;

background-color

:

# eeeeee

;

margin

: auto;

background-image

:

url

(

"/ uploads / media / default / 0001/03 / 5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg "

);

animation-name

: slide;

animation-time

:

10 giây

;

animation-direction

: normal;

animation-timing-function

: easy;

animation-iteration-count

: vô hạn; }

@ keyframes

slide {

0%

{

background-position

:

0

0

; }

16,66%

{

background-position

:

0

0

; }

33,32%

{

background-position

: -

800px

0

; }

49,98%

{

background-position

: -

800px

0

; }

66,64%

{

background-position

: -

1600px

0

; }

83,30%

{

background-position

: -

1600px

0

; }

100%

{

background-position

:

0

0

; } }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" simple-ss "

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" content "

& gt;

& lt;

p

& gt;

Đây là một bằng chứng về khái niệm cho một trình chiếu không sử dụng bất kỳ Javascript nào. Nó không có trang hoặc nút trái / phải, v.v.

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Dưới đây là một ví dụ trong đó hình ảnh nền được đặt để hoạt động giống như thanh trượt.

Ví dụ về cách làm cho hình nền hoạt động giống như thanh trượt:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Thanh trượt hình ảnh

& lt; /

title

& gt;

& lt;

style

& gt;

html

,

body

{

width

:

100%

;

height

:

100%

;

margin

:

0

;

padding

:

0

;

font-family

:

"Helvetica"

, sans-serif; }

img

{

max-width

:

100%

; }

. slider-container

{

height

:

100%

;

width

:

100%

;

vị trí

: tương đối;

tràn

: hidden;

text-align

: center; }

. menu

{

vị trí

: tuyệt đối;

còn lại

:

0

;

z-index

:

900

;

width

:

100%

;

bottom

:

0

; }

. menu

nhãn

{

con trỏ

: con trỏ;

display

: inline-block;

width

:

16px

;

height

:

16px

;

background

:

# fff

;

border-radius

:

50px

;

margin

:

0

0.2em

1em

; }

. menu

nhãn

: di chuột < / p>,

. menu

nhãn

: tiêu điểm < / p> {

background

:

# 1c87c9

; }

. slide

{

width

:

100%

;

height

:

100%

;

vị trí

: tuyệt đối;

top

:

0

;

còn lại

:

100%

;

z-index

:

10

;

padding

:

8em

1em

0

;

background-size

: cover;

background-position

:

50%

50%

;

chuyển tiếp

: left

0s

0,75 giây

; }

[id ^ =

"slide"

]

: đã kiểm tra

+

. slide

{

còn lại

:

0

;

z-index

:

100

;

chuyển tiếp

: left

0,65 giây

dễ dàng; }

. slide-1

{

background-image

:

url

(

"/ uploads / media / default / 0001/03 / 5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg "

); }

. slide-2

{

background-image

:

url

(

"/ uploads / media / default / 0001/03 / 66cf5094908491e69d8187bcf934050a4800b37f.jpeg "

); }

. slide-3

{

background-image

:

url

(

"/ uploads / media / default / 0001/03 / b87b29b6ca67b64b76651037dc16f5a46e73b42a.jpeg "

); }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" slider-container "

& gt;

& lt;

div

class

=

" menu "

& gt;

& lt;

label

cho

=

" slide-dot-1 "

& gt;

& lt; /

label

& gt;

& lt;

label

cho

=

" slide-dot-2 "

& gt;

& lt; /

nhãn

& gt;

& lt;

label

cho

=

" slide-dot-3 "

& gt;

& lt; /

nhãn

& gt;

& lt; /

div

& gt;

& lt;

input

id

=

" slide-dot-1 "

type

=

" radio "

name

=

"slides"

đã chọn

& gt;

& lt;

div

class

=

"slide slide-1"

& gt;

& lt; /

div

& gt;

& lt;

input

id

=

" slide-dot-2 "

type

=

" radio "

tên

=

"trang trình bày"

& gt;

& lt;

div

class

=

" slide slide-2 "

& gt;

& lt; /

div

& gt; < / p>

& lt;

input

id

=

" slide-dot-3 "

type

=

" radio "

tên

=

"trang trình bày"

& gt;

& lt;

div

class

=

" slide slide-3 "

& gt;

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Một thanh trượt thường có một giao diện người dùng nhỏ để chuyển đến một trang trình bày cụ thể, vì vậy, hãy làm điều đó theo ngữ nghĩa, với các liên kết neo chuyển đến trang trình bày chính xác.

Tạo các liên kết nhảy của bạn bằng cách sử dụng thẻ liên kết & lt; a & gt; . Thêm một chút kiểu dáng và cài một số nút.

Để đảm bảo rằng bạn sẽ nhận được hiệu ứng trượt mượt mà trên cả máy tính để bàn và thiết bị di động, hãy thêm thuộc tính scroll-behavior với giá trị “mượt mà” của nó. Sau đó, sử dụng lớp giả : target cho nội dung đặc biệt đối với trang trình bày “đang hoạt động”. Nhấp vào một trong các nút điều hướng trang trình bày sẽ thay đổi URL thành # băm và đó là khi: target có hiệu lực.

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Thanh trượt hình ảnh

& lt; /

title

& gt;

& lt;

style

& gt;

* {

kích thước hộp

: border-box; }

. slider

{

width

:

300px

;

text-align

: center;

tràn

: hidden; }

. slide

{

display

: flex;

tràn-x

: auto; scroll-snap-type: x bắt buộc; hành vi cuộn: mượt mà; -webkit-

tràn

-scrolling: touch; }

. slide

:: - webkit-scrollbar { width:

10px

;

height

:

10px

; }

. slide

:: - webkit-scrollbar-thumb { background:

# 666

;

border-radius

:

10px

; }

. slide

:: - webkit-scrollbar-track { nền: trong suốt; }

. slide

& gt;

div

{ scroll-snap-align: bắt đầu;

flex-co

:

0

;

width

:

300px

;

height

:

300px

;

margin-right

:

50px

;

border-radius

:

10px

;

background

:

# eee

;

biến đổi-origin

: center center;

biến đổi

:

scale

(

1

);

chuyển đổi

: biến đổi

0,5 giây

;

vị trí

: tương đối;

display

: flex;

justify-content

: center;

align-items

: center;

font-size

:

100px

; }

. slider

& gt;

a

{

display

: inline-flex;

width

:

1.5rem

;

height

:

1.5rem

;

background

: trắng;

text-decoration

: không có;

align-items

: center;

justify-content

: center;

border-radius

:

50%

;

margin

:

0

0

0.5rem

0

;

vị trí

: tương đối; }

. slider

& gt;

a

: hoạt động

{

top

:

1px

;

color

:

# 1c87c9

; }

. slider

& gt;

a

: tiêu điểm

{

background

:

# eee

; }

@ supports

(scroll-snap-type) {

. slider

& gt;

a

{

display

: none; } }

html

,

body

{

height

:

100%

;

tràn

: hidden; }

body

{

display

: flex;

align-items

: center;

justify-content

: center;

background

:

linear-gradient

(sang phải,

# 1c87c9 < / p>,

# ffcc00

);

font-family

:

'Ropa Sans'

, sans-serif; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" slider "

& gt;

& lt;

a

href

=

" # slide-1 "

& gt;

1

& lt; /

a

& gt;

& lt;

a

href

=

" # slide-2 "

& gt;

2

& lt; /

a

& gt;

& lt;

a

href

=

" # slide-3 "

& gt;

3

& lt; /

a

& gt;

& lt;

a

href

=

" # slide-4 "

& gt;

4

& lt; /

a

& gt;

& lt;

a

href

=

" # slide-5 "

& gt;

5

& lt; /

a

& gt;

& lt;

div

class

=

" slide "

& gt;

& lt;

div

id

=

" slide-1 "

& gt;

1

& lt; /

div

& gt; < / p>

& lt;

div

id

=

" slide-2 "

& gt;

2

& lt; /

div

& gt; < / p>

& lt;

div

id

=

" slide-3 "

& gt;

3

& lt; /

div

& gt; < / p>

& lt;

div

id

=

" slide-4 "

& gt;

4

& lt; /

div

& gt; < / p>

& lt;

div

id

=

" slide-5 "

& gt;

5

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Điều đầu tiên bạn nên làm là tạo cấu trúc của thanh trượt hình ảnh bằng cách sử dụng HTML và đặt hình ảnh.

Sau khi bạn đã tạo cấu trúc HTML cho thanh trượt hình ảnh của mình, bước tiếp theo là sử dụng các kiểu CSS để có giao diện thanh trượt của bạn. Ngoài ra, hãy thêm kiểu cho hình ảnh, nền, v.v. Bạn cũng cần tạo kiểu cho các dấu chấm và làm cho hình ảnh của bạn trở nên thích ứng và thân thiện với trình duyệt bằng cách sử dụng các thuộc tính CSS.

Bây giờ, đã đến lúc thêm phần JavaScript để cung cấp chức năng làm cho hình ảnh tự động thay đổi sau một khoảng thời gian cụ thể.

Ví dụ về cách tạo trình chiếu bằng CSS và JavaScript:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Hình ảnh trình chiếu

& lt; /

title

& gt;

& lt;

style

& gt;

* {

kích thước hộp

: border-box }

body

{

font-family

: Verdana, sans-serif;

margin

:

0

}

. mySlides

{

hiển thị

: không có }

img

{

vertical-align

: middle; }

. slideshow-container

{

max-width

:

1000px

;

vị trí

: tương đối;

margin

: auto; }

. pres

,

. tiếp theo

{

con trỏ

: con trỏ;

vị trí

: tuyệt đối;

top

:

50%

;

width

: auto;

padding

:

16px

;

margin-top

: -

22px

;

color

: trắng;

font-weight

: bold;

font-size

:

18px

;

chuyển đổi

:

0.6 giây

dễ dàng;

border-radius

:

0

3px

3px

0

; người dùng chọn: không có; }

. tiếp theo

{

right

:

0

;

border-radius

:

3px

0

0

3px

; }

. prev

: hover

,

. tiếp theo

: hover

{

background-color

:

rgba

(

0

,

0

,

0

,

0.8

); }

. text

{

color

:

# ffffff

;

font-size

:

15px

;

padding

:

8px

12px

;

vị trí

: tuyệt đối;

bottom

:

8px

;

width

:

100%

;

text-align

: center; }

. numbertext

{

color

:

# ffffff

;

font-size

:

12px

;

padding

:

8px

12px

;

vị trí

: tuyệt đối;

top

:

0

; }

. dot

{

con trỏ

: con trỏ;

height

:

15px

;

width

:

15px

;

margin

:

0

2px

;

background-color

:

# 999999

;

border-radius

:

50%

;

display

: inline-block;

chuyển đổi

: background-color

0.6 giây

dễ dàng; }

. active

,

. dot

: hover

{

background-color

:

# 111111

; }

. phai

{ -webkit-

animation-name

: fade; -webkit-

hoạt ảnh-thời lượng

:

1,5 giây

;

animation-name

: fade;

animation-time

:

1,5 giây

; }

@ - webkit-keyframes

phai {

từ

{

độ mờ

:.

4

}

tới

{

độ mờ

:

1

} }

@ keyframes

phai {

từ

{

độ mờ

:.

4

}

tới

{

độ mờ

:

1

} }

@ media

chỉ

screen

(

max-width

:

300px

) {

. pres

,

. tiếp theo

,

. text

{

font-size

:

11px

} }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" slideshow-container "

& gt;

& lt;

div

class

=

" mySlides mờ dần "

& gt;

& lt;

div

class

=

" numbertext "

& gt;

1/3

& lt; /

div

& gt; < / p>

& lt;

img

src

=

" / uploads / media / default / 0001/03 / 66cf5094908491e69d8187bcf934050a4800b37f.jpeg "

style

=

" chiều rộng: 100% "

& gt;

& lt;

div

class

=

" text "

& gt;

London, Ebgland

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt;

div

class

=

" mySlides mờ dần "

& gt;

& lt;

div

class

=

" numbertext "

& gt;

2/3

& lt; /

div

& gt; < / p>

& lt;

img

src

=

" / uploads / media / default / 0001/03 / b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg "

style

=

" chiều rộng: 100% "

& gt;

& lt;

div

class

=

" text "

& gt;

Hoàng hôn ở Romania

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt;

div

class

=

" mySlides mờ dần "

& gt;

& lt;

div

class

=

"numbertext"

& gt;

3/3

& lt; /

div

& gt;

& lt;

img

src

=

" / uploads / media / default / 0001/03 / 5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg "

style

=

" chiều rộng: 100% "

& gt;

& lt;

div

class

=

" text "

& gt;

New York, Hoa Kỳ

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

a

class

=

" prev "

onclick

=

" plusSlides (-1) "

& gt; < / p>

& amp; # 10094;

& lt; /

a

& gt;

& lt;

a

class

=

" next "

onclick

=

" plusSlides (1) "

& gt;

& amp; # 10095;

& lt; /

a

& gt ;

& lt; /

div

& gt;

& lt;

br

& gt;

& lt;

div

style

=

" text-align: center "

& gt;

& lt;

span

class

=

" dot "

onclick

=

" currentSlide (1) "

& gt;

& lt; /

span

& gt;

& lt;

span

class

=

" dot "

onclick

=

" currentSlide (2) "

& gt;

& lt; /

span

& gt;

& lt;

span

class

=

" dot "

onclick

=

" currentSlide (3) "

& gt;

& lt; /

span

& gt;

& lt; /

div

& gt;

& lt;

script

& gt;

var

slideIndex =

1

; showSlides (slideIndex);

function

plusSlides

(

n

)

{ showSlides (slideIndex + = n); }

function

currentSlide

(

n

)

{ showSlides (slideIndex = n); }

function

showSlides

(

n

)

{

var

i;

var

slides =

document

.getElementsByClassName (

"mySlides" );

var

dot =

document

.getElementsByClassName (

"dot" );

nếu

(n & gt; slides.length) { slideIndex =

1

}

if

(n & lt;

1

) { slideIndex = slides.length }

cho

(i =

0

; i & lt; slides.length; i ++) { slide [i] .style.display =

"none"

; }

cho

(i =

0

; i & lt; dot.length; i ++) { dot [i] .className = dot [i] .className.replace (

"active"

,

""

); } slide [slideIndex -

1

] .style.display =

"block"

; dấu chấm [slideIndex -

1

] .className + =

"active"

; }

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Để tạo trình chiếu tự động, hãy sử dụng mã bên dưới.

Ví dụ về cách tạo trình chiếu tự động với CSS và JavaScript:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Hình ảnh trình chiếu

& lt; /

title

& gt;

& lt;

style

& gt;

* {

kích thước hộp

: border-box }

body

{

font-family

: Verdana, sans-serif;

margin

:

0

}

. mySlides

{

hiển thị

: không có }

img

{

vertical-align

: middle; }

. slideshow-container

{

max-width

:

1000px

;

vị trí

: tương đối;

margin

: auto; }

. pres

,

. tiếp theo

{

con trỏ

: con trỏ;

vị trí

: tuyệt đối;

top

:

50%

;

width

: auto;

padding

:

16px

;

margin-top

: -

22px

;

color

: trắng;

font-weight

: bold;

font-size

:

18px

;

chuyển đổi

:

0.6 giây

dễ dàng;

border-radius

:

0

3px

3px

0

; người dùng chọn: không có; }

. tiếp theo

{

right

:

0

;

border-radius

:

3px

0

0

3px

; }

. prev

: hover

,

. tiếp theo

: hover

{

background-color

:

rgba

(

0

,

0

,

0

,

0.8

); }

. text

{

color

:

# ffffff

;

font-size

:

15px

;

padding

:

8px

12px

;

vị trí

: tuyệt đối;

bottom

:

8px

;

width

:

100%

;

text-align

: center; }

. numbertext

{

color

:

# ffffff

;

font-size

:

12px

;

padding

:

8px

12px

;

vị trí

: tuyệt đối;

top

:

0

; }

. dot

{

con trỏ

: con trỏ;

height

:

15px

;

width

:

15px

;

margin

:

0

2px

;

background-color

:

# 999999

;

border-radius

:

50%

;

display

: inline-block;

chuyển đổi

: background-color

0.6 giây

dễ dàng; }

. active

,

. dot

: hover

{

background-color

:

# 111111

; }

. phai

{ -webkit-

animation-name

: fade; -webkit-

hoạt ảnh-thời lượng

:

1,5 giây

;

animation-name

: fade;

animation-time

:

1,5 giây

; }

@ - webkit-keyframes

phai {

từ

{

độ mờ

:.

4

}

tới

{

độ mờ

:

1

} }

@ keyframes

phai {

từ

{

độ mờ

:.

4

}

tới

{

độ mờ

:

1

} }

@ media

chỉ

screen

(

max-width

:

300px

) {

. pres

,

. tiếp theo

,

. text

{

font-size

:

11px

} }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" slideshow-container "

& gt;

& lt;

div

class

=

" mySlides mờ dần "

& gt;

& lt;

div

class

=

" numbertext "

& gt;

1/3

& lt; /

div

& gt; < / p>

& lt;

img

src

=

" / uploads / media / default / 0001/03 / 66cf5094908491e69d8187bcf934050a4800b37f.jpeg "

style

=

" chiều rộng: 100% "

& gt;

& lt;

div

class

=

" text "

& gt;

London, Ebgland

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt;

div

class

=

" mySlides mờ dần "

& gt;

& lt;

div

class

=

" numbertext "

& gt;

2/3

& lt; /

div

& gt; < / p>

& lt;

img

src

=

" / uploads / media / default / 0001/03 / b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg "

style

=

" chiều rộng: 100% "

& gt;

& lt;

div

class

=

" text "

& gt;

Hoàng hôn ở Romania

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt;

div

class

=

" mySlides mờ dần "

& gt;

& lt;

div

class

=

" numbertext "

& gt;

3/3

& lt; /

div

& gt; < / p>

& lt;

img

src

=

" / uploads / media / default / 0001/03 / 5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg "

style

=

" chiều rộng: 100% "

& gt;

& lt;

div

class

=

" text "

& gt;

New York, Hoa Kỳ

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

a

class

=

" prev "

onclick

=

" plusSlides (-1) "

& gt; < / p>

& amp; # 10094;

& lt; /

a

& gt;

& lt;

a

class

=

" next "

onclick

=

" plusSlides (1) "

& gt;

& amp; # 10095;

& lt; /

a

& gt ;

& lt; /

div

& gt;

& lt;

br

& gt;

& lt;

div

style

=

" text-align: center "

& gt;

& lt;

span

class

=

" dot "

onclick

=

" currentSlide (1) "

& gt;

& lt; /

span

& gt;

& lt;

span

class

=

" dot "

onclick

=

" currentSlide (2) "

& gt;

& lt; /

span

& gt;

& lt;

span

class

=

" dot "

onclick

=

" currentSlide (3) "

& gt;

& lt; /

span

& gt;

& lt; /

div

& gt;

& lt;

script

& gt;

var

slideIndex =

0

; showSlides ();

function

showSlides

(

)

{

var

i;

var

slides =

document

.getElementsByClassName (

"mySlides" );

cho

(i =

0

; i & lt; slides.length; i ++) { slide [i] .style.display =

"none"

; } slideIndex ++;

if

(slideIndex & gt; slides.length) { slideIndex =

1

} slide [slideIndex -

1

] .style.display =

"block"

;

setTimeout

(showSlides,

2000

); }

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề trình chiếu hình nền html

Full Screen Background Html/Css

  • Tác giả: WClarkson
  • Ngày đăng: 2017-02-23
  • Đánh giá: 4 ⭐ ( 9592 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This tutorial shows step by step how to make a full screen image background in html/css.
    Source can be found herehttps://williamclarkson.net/css-code/full-screen-background-html-css/

Top 50 hình nền Powerpoint đẹp – đem đến 1 buổi thuyết trình hoàn hảo

  • Tác giả: thanhtrungmobile.vn
  • Đánh giá: 4 ⭐ ( 2370 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trang bài viết này sẽ cung cấp cho bạn đọc các khái niệm cơ bản về hình nền Powerpoint đẹp, cũng như là chia sẻ cho mọi người bộ sưu tập hình nền đẹp cho hội thảo, học tập, sinh hoạt và kinh doanh.

Cách tạo Trình chiếu hình nền trong Ubuntu / làm thế nào để

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 5 ⭐ ( 4197 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cũng giống như Windows 7 và OS X, Ubuntu có khả năng tạo hình nền trình chiếu nhờ vào Gnome 2.28. Dưới đây là cách bạn có thể kiểm soát trình chiếu hình nền của mình bằng một công cụ GUI đơn giản để sử dụng hoặc trình chỉnh sửa văn bản bẩn và bẩn.

Tải hình nền Powerpoint đẹp, đơn giản phù hợp với mọi slide

  • Tác giả: nguyenhung.net
  • Đánh giá: 3 ⭐ ( 4227 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tải hình nền Powerpoint đẹp cho slide. Các background powerpoint đẹp nhất bao gồm hình nền powerpoint chủ đề công nghệ, thiên nhiên, trẻ em, học tập,…

Mẫu Powerpoint Hình Nền Trình Chiếu Hoa Theme

  • Tác giả: vn.pikbest.com
  • Đánh giá: 4 ⭐ ( 2738 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đang tìm kiếm mẫu Hình Nền Trình Chiếu Hoa Powerpoint? Pikbest đã tìm thấy 788 mẫu powerpoint tuyệt vời Hình Nền Trình Chiếu Hoa miễn phí. Thêm ppt hoạt hình khoảng Hình Nền Trình Chiếu Hoa Tải xuống miễn phí cho mục đích thương mại,vui lòng truy cập PIKBEST.COM

Thiết lập màu nền (background) trong HTML

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 6729 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Màu nền (background) trong HTML của trang web mặc định là màu trắng. Bạn không thích màu này và muốn thiết lập một màu nền khác cho trang của bạn. HTML cung cấp cho bạn hai cách sau để cài đặt nền cho trang web của bạn

Thiết lập hình nền trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 2612 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập hình nền trong CSS như màu sắc, hình ảnh, cách sử dụng các thuộc tính của hình nền như có lặp không, vị trí ảnh, viết css ngắn cho hình nền …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm cách nào để nối phần tử trong danh sách bằng Python? - thêm vào phần tử trong danh sách python

By ads_php