ALGORITMA
JAMBI
Servis elektronik Jambi

Gambar berjalan Horizontal

🔲
Untuk merapatkan gambar tampa spasi, pada gambar ditambahkan pormat style CSS yang digunakan untuk memberi gaya langsung (inline) ke sebuah elemen

style="height:300px; padding: 0px; display:inline-block; margin:0;">

Seperti ini:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLcCuypCjAXT460vxks3noGwUfNU-bZ6h5PekdDH1OzWU0xivLBGqgY6cyYxbiRYQWR9MsGitK3ZEpa3X-cW4jU8Eao610R10YEL7eDlCAOSSnvopFwTnUDW4hlcUCIop_vgDf05Zemq099Xo4oQHFnmRyR2sb9mRh_7-MdyshP_VHgd3aD2jM8yzvvNE/s320/dd9.jpg"
style="height:300px; padding: 0px; display:inline-block; margin:0;">

Berikut penjelasan masing-masing properti:
  • height:300px; → tinggi elemen diatur 300 piksel.
  • padding: 0px; → ruang dalam (jarak isi ke tepi dalam elemen) diatur 0 piksel.
  • display:inline-block; → elemen ditampilkan sebagai inline-block, artinya bisa berdiri sejajar (inline) dengan elemen lain, tapi tetap memiliki properti dimensi (tinggi dan lebar) seperti block.
  • margin:0; → jarak luar dari elemen ke elemen lain diatur 0 piksel.
Nama keseluruhannya adalah:
Inline CSS Style Attribute
 atau bisa juga disebut:
 Inline Styling in HTML

Html gambar bergerak Horizontal
<div style="background: none; height: 300px; overflow: hidden; width: 100%;">
<marquee behavior="scroll" direction="left" scrollamount="30"
onmouseover="this.stop();" onmouseout="this.start();"
ontouchstart="this.stop();" ontouchend="this.start();"
style="white-space: nowrap;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLcCuypCjAXT460vxks3noGwUfNU-bZ6h5PekdDH1OzWU0xivLBGqgY6cyYxbiRYQWR9MsGitK3ZEpa3X-cW4jU8Eao610R10YEL7eDlCAOSSnvopFwTnUDW4hlcUCIop_vgDf05Zemq099Xo4oQHFnmRyR2sb9mRh_7-MdyshP_VHgd3aD2jM8yzvvNE/s320/dd9.jpg" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0RwxkRjE4U_GrnCeK7pfpGZtZP_72IhqOFyWTOcWoB5mR2w8C5yDA6ycNZb02Lc1iyfCxPU6nksy17-316R0Jk_t9I-PXS1Gp8Gq8riUHwQxIZdJKdb5btkWpKn6bbK4drHFRN5BY27px6sO_VyqrKNRXfiURHXzeHmgt8Y4juzEG0h8uK-YoT34WKo/s320/dd8.jpg" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZnUEGal3TYA-GQUVJig5YuO870gfc14uYPJ-3zxg8tASGNnc4jvKt38GcDMC2aBB640deB_nc1pCgHTMleYPv_0dgpsT5smn3-svlx0gcw39yUGgJ6iEnej5oiKP6gZYT70QJdx0_HlVEzpZGOYJOq7KLp1J9qijwBtPFZbJNOiy3A8wTlgKY0OJKGE/s320/dd7" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLcCuypCjAXT460vxks3noGwUfNU-bZ6h5PekdDH1OzWU0xivLBGqgY6cyYxbiRYQWR9MsGitK3ZEpa3X-cW4jU8Eao610R10YEL7eDlCAOSSnvopFwTnUDW4hlcUCIop_vgDf05Zemq099Xo4oQHFnmRyR2sb9mRh_7-MdyshP_VHgd3aD2jM8yzvvNE/s320/dd9.jpg" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0RwxkRjE4U_GrnCeK7pfpGZtZP_72IhqOFyWTOcWoB5mR2w8C5yDA6ycNZb02Lc1iyfCxPU6nksy17-316R0Jk_t9I-PXS1Gp8Gq8riUHwQxIZdJKdb5btkWpKn6bbK4drHFRN5BY27px6sO_VyqrKNRXfiURHXzeHmgt8Y4juzEG0h8uK-YoT34WKo/s320/dd8.jpg" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZnUEGal3TYA-GQUVJig5YuO870gfc14uYPJ-3zxg8tASGNnc4jvKt38GcDMC2aBB640deB_nc1pCgHTMleYPv_0dgpsT5smn3-svlx0gcw39yUGgJ6iEnej5oiKP6gZYT70QJdx0_HlVEzpZGOYJOq7KLp1J9qijwBtPFZbJNOiy3A8wTlgKY0OJKGE/s320/dd7" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiM50XUeZ1KmwFlpo0hgEjjgd2hOWQniVs0dBebEImvThWazt7XL7EP0s519cFNtRwYujDpmTnhIOgzkMzx1e5xxGigoErH0S_Ci30lfcmAIn6jPxBTNNFpdReBeK-8YObSs890dyYxcSf3_ZxiOv9-O-m-uhZbk7Cf5Dl-B66uHVuZag4nmz1HC-REpA/s320/dd5.jpg" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht6zh0M-4bDFNV-Oa8aBRO8zaUMgvGiOBd8dgWpWMCJiRkwmSZprjFXWsUyf5Y1-wSGs7C4x08PEotNReywlOCo-leKeY4y_FQPOTf_70Xld36S4d1ph_NlsBQHT5JMuALo-kqz0TnxRTKstNYB19olM5hhgl2mLiJz3kMGcQxoQkYCaZTMLdueMdwlmg/s320/dd3.jpg" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib8jD4ofXzpf7EaJtiY9ieeXU8_iXgndzvgGst_J2_B8rCfc-C5W_GlUXFnFrzvgOAVLU79yM2V-rEIT9J3i8dCyBMLnKheUjDxMC2M_2IB6RLoPtImXb0D1XwPRyQ4jtatAbmn3JtmI7CqiM2QY8ZXtuQ16X1hME4L9tFtVLbpVTOHQaj7ZgGlJdd_kw/s320/dd2.jpg" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4NqYQd-5ZfidW_quYrMv8cpy-X7kUyd7BSOXkZNdRjVoWD5wMUtLasE_dgIMYyNibTtqgXYtqZ7Biq8cTJnkX0N32O9sIOdxBl8Zyb6GCrYhBcNL1a6z6zrjTGrn6PYhz21ZbT9mb9XPL6BAQsOpoq68QEwUI8QqPxuCo5Rtb8NZPQWefoAAM8xfPllA/s320/dd1.jpg" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkV8J5Qk-e9BSGe-mH4WHA9b5IC_oXQaWSFHeyVLWn37A-NE8Pjzka7psI0XhzNym6kZybixWSL3ahSIkbECGSriNQPC6K_5HmFen0-jcRp-X-q7VABUr9nX3XvrUG3TfzRzQ3eOkZhnEs9DdWnYr0kfwcapBiMa34cPk9QcFC4_VYLGXbc_2erKdDsg/s320/dd8.jpg" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXOWqM85qQdrYrnw8e_CS9u_qsh8Vmlu4_Re-hpmQkzueBldOagAlbugaPWChtd6BlBNkfOmPYsFJezduBANqcTLw0-SV3TrJy1X3VxY1w6P_8kCgdKmBeFBBjKLN-p0Niat1RzEzHoHxx3B0omlLkHo7Q80NQK2JKFIvNaf_AYYALcLtIlGq8xAnOzs/s320/dd9.jpg" style="height:300px; padding: 0px; display:inline-block; margin:0;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFlkiM59I5S43Ey9vAhLCuA5Pl1efApRMCzi7lR8Rsjbdgnk88mIbeJu8YsqvxzVfW9ib9xBfrYeiYfVug_r9-uvwJcKXHzUvPcFX8gfmohLfufZ74q51w9qvu832avQRZKFSlO4VYoW0jgJmZ2JD4RtXi75N8bVnt5Z5gpqW4ahlYVlD_SgNEDUbCr2A/s1280/snapsave-app_525556313841485_hd-ezgif.com-video-to-gif-converter.gif"style="height:300px; padding: 0px; display:inline-block; margin:0;">

</marquee>
</div>💋

Gambar berjalan horizontalal dan berhenti sejenak
<style>
.marquee-window {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
background: #fff;
border: 2px solid gray;
line-height: 0;
margin: 20px 0;
}

.marquee-track {
display: flex;
width: max-content;
animation: berjalan 15.1s ease-in-out infinite;
}

.marquee-track img {
width: 300px;
height: 300px;
border-radius: 0;
padding: 0;
}

/* Keyframes waktu berhenti + waktu geser */
@keyframes berjalan {
0% { transform: translateX(300px); } /* Awal sebelum muncul */
5% { transform: translateX(0px); } /* Gambar 1 tengah */
20%{ transform: translateX(0px); }
25% { transform: translateX(-300px); } /* Gambar 2 tengah */
40% { transform: translateX(-300px); }
455% { transform: translateX(-600px); } /* Gambar 3 tengah */
50% { transform: translateX(-600px); }
60%{ transform: translateX(-900px); } /* Gambar 4 tengah */
100% { transform: translateX(-900px); }
}

</style>
<div style="text-align: right;">
<div class="marquee-window">
<div class="marquee-track">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIpvmFmE6N3JchxUqJ5ikynfPBmkCc-gcPvpZhJWZMSDQv3nntKLkByVRfsmsnjvRSsZYaa7Nelc8Z3IBFz2D7jQMtwxzhus4D5kpWW8f43NKnnVIZk_KJMZQMHRA5Zy6xg4UMDEKtDCUQUyURd1btfut6Hjzc4t6v7WxJqMSD0s4sgA4NFz_DtHUTQU/s320/471164228_9099734966739131_3635511768219439449_n.jpg" alt="Gambar 1">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_fh50vVjjPxoaZ4j9X0F3YnvfxZOND-NYwX1iMM_wgUM_j7uFQqIAs7t07dUgKEIVGSOD2B51DOcxAlMh5jrTdXsMgPP4fWbMyncivmxDQSNNEcuJQJR4Rmrt8RgGBLOE-wzcJKPkMJCk97L8uIGiJaArBQpo4D0bbv5Kq7QzIY68KwxEr0HjZ8YtmzM/s320/478433733_1688180995100829_324474760380473577_n.jpg" alt="Gambar 2">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12-xbebeyH2PHsuQeLUtzlou-kVL1cz4lpSxbJkkUsZhQP3ODokC7EL4yTlVVq_hvLVnMInokeMsmcM-M25cJFtjBZ8Araw2h1NAmmTeml31LuE274sesGxGWSNIIpMITTkYB69tcJrAuhnEVQ6gaBOBQqUw3S92fpwTLSY6bRj67Sj5hX_JepFiQ0so/s320/69906193_2535417089837651_3423967938623832064_n.jpg" alt="Gambar 3">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1gQo6EK2UCdBr8ILbqVWa6jjUlCO6beaioZCI8hJwXP-UH48nNQUPDyhhh0gZQRtb3HsZptZeNRtqOHjT3S6C9wYGA5AFtT5TzlMgXIYnFnIESrtGAcNkBFVAba0O_RJzej0M339fnEurvujgXgSfL9t6XMMj27RcGnvzruBAO34ZWcpmnPusq7LZQvk/s320/467
313036_8911022712277025_2550790819896980794_n.jpg" alt="Gambar 4">
</div>
</div>
</div>
-