木村  直子

木村 直子

1678557120

如何在 Html、CSS 和 Javascript 中使用自动图像滑块

在本文中,您将学习如何使用 HTML CSS 和 JavaScript 代码创建自动图像滑块。早些时候,我与您分享了更多类型的手动和自动图像滑块。和其他设计一样,我希望你喜欢这个设计。

图像滑块是一种常见的网络元素,目前在许多网站中使用。主要用于网站首页的幻灯片放映。这种类型的自动图像幻灯片还用于组织图库中的许多图像。如果您想了解有关 javascript 的更多信息,请查看我最好的HTML、CSS 和 javascript 项目

有两种类型的图像滑块,一种是自动的,另一种是手动的。在自动图像滑块的情况下,图像将定期自动更改。对于手册,您需要使用“下一个”和“上一个”按钮更改图像。

自动图像滑块

在这种情况下,可以自动和手动更改图像。这意味着它会自动更改图像,您也可以 分别使用 Next 和 Previs 按钮更改图像 。

 该设计只能在 HTML 和 CSS 的帮助下创建,但在这种情况下,我使用了 JavaScript 编程代码。

如果你想知道这些自动图像幻灯片是如何工作的,那么你可以观看下面的现场演示。下面我给出了源代码,所以你可以根据需要复制它们。您还可以使用文章底部的下载按钮下载代码。

正如您在上面的演示中看到的,这是一个非常简单的图像滑块,具有自动和手动图像更改功能。

在本例中,我总共使用了五张图片,但如果你愿意,你可以使用更多图片。图像将每 5 秒自动更改一次。还有两个按钮可以更改图像。

Html、CSS 和 Javascript 中的自动图像滑块

如果您了解基本的 HTML CSS 和 JavaScript,那么您可以轻松理解此设计。要创建这个自动图像滑块,首先,您需要创建一个 HTML 和 CSS 文件。

在本例中,我没有创建单独的 JavaScript 文件,但如果需要,您可以创建一个单独的文件。

第 1 步:创建滑块的基本结构

我在下面使用了一些 HTML 和 CSS 代码来创建这个滑块的背景。在本例中,我使用的滑块高度为 256 像素,宽度为 500 像素。

我没有在背景中使用任何不同的颜色。如果你看过演示,你就会明白这张幻灯片周围使用了阴影,我在这里使用了 box-shadow: 0 0 30px rgba(0, 0, 0, 0.3)。

<div id=”slider”>
</div>
 body {
  margin: 10%;
}
#slider {
  position: relative;
  width: 500px;
  height: 265px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
创建滑块的基本结构

第 2 步:添加所需的图像

我使用下面的代码向这个自动图像滑块添加了图像并设计了这些图像。我一共使用了五张图片,你可以随意增减。

如果你仔细看看下面的 CSS 代码,你就会明白我使用了 Slider Ul Width 10000%。

你可能想知道为什么我在这里使用 10,000%。仔细查看下图,了解此滑块工作的原因和方式。

添加所需的图像

<ul id=”slideWrap”>
      <li><img src=”img1.jpg” alt=””></li>
      <li><img src=”img2.jpg” alt=””></li>
      <li><img src=”img3.jpg” alt=””></li>
      <li><img src=”img4.jpg” alt=””></li>
      <li><img src=”img5.jpg” alt=””></li>
</ul>

 在本例中,图像的高度为 256 像素,宽度为 500 像素。当然,在这种情况下,您将使用相同大小的每个图像。

#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;
  float: left;
}
#slider ul li img{
  width: 500px;
  height: 265px;
}

第三步:添加上一个和下一个按钮

现在我们将 Previs 和 Next 按钮添加到此滑块。下面的 HTML 和 CSS 代码有助于添加和设计这两个按钮。

<a id=”prev” href=”#”>&#8810;</a>
<a id=”next” href=”#”>&#8811;</a>
#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 150ms ease;
}

第四步:确定两个按钮的准确位置

 我在下面使用了一些 CSS 将这两个按钮放在适当的位置。我将 Previs 按钮保持在距左侧 10 像素的位置。

我将下一个按钮保持在距离右侧 10 px 的位置。因此,这两个按钮位于滑块的两侧。

#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}

我使用下面的 CSS 代码在这两个按钮的背景中使用了少量悬停效果。

#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}
添加上一个和下一个按钮

第 5 步:通过添加 JavaScript 代码激活图像滑块

到目前为止我们只是设计了它,现在我们来实现这个滑块的图像变化。

var responsiveSlider = function() {
var slider = document.getElementById(“slider”);
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById(“slideWrap”);
var count = 1;
var items = slideList.querySelectorAll(“li”).length;
var prev = document.getElementById(“prev”);
var next = document.getElementById(“next”);
window.addEventListener(‘resize’, function() {
  sliderWidth = slider.offsetWidth;
});

首先,我们将通过单击“下一步”按钮来提前决定要完成什么样的工作。如果您是初学者,那么首先请看下面的代码结构。然后按照下面的说明进行操作,这将帮助您更好地理解。

var nextSlide = function() {
  if(count < items) {
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = items) {
    slideList.style.left = “0px”;
    count = 1;
  }
};
如果您单击上一个按钮,确定会产生什么样的效果。

正如我们所见,在 nextSlide 变量中,我们存储了 Next 按钮的工作方式。
首先,我们添加了 value if (count <items) 此代码将在图像数量超过 count 时起作用。

使用 else if (count = items) 我们已经确定了如果前面的函数不起作用会发生什么。如果图像和计数都相等,则滑块不会发生变化。

 'count' 是您点击按钮的次数。如果您单击该按钮一次,则计数值为一。如果一次单击三次,则该帐户的值为 3。

我们已经决定了如果我们点击 Next 按钮将会发生什么样的变化。现在我们将实现上一个按钮。

类似地,我们已经确定了如果您单击上一个按钮会产生什么样的效果。

var prevSlide = function() {
  if(count > 1) {
    count = count – 2;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = 1) {
    count = items – 1;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
};
如果您单击上一个按钮,确定会产生什么样的效果。

确定单击此自动图像滑块中的上一个和下一个按钮时将产生何种效果。现在我们将这些效果与两个按钮相关联。

正如我之前所说,我们已经将 Next 按钮的工作方式存储在名为“next Slider”的常量中。下面我们已经指示如果您单击“下一步”按钮,该常量将起作用。

next.addEventListener(“click”, function() {
  nextSlide();
});

我们已经在“prevSlide”中保存了对上一个按钮起作用的内容。下面我们已经说明,如果您单击上一个按钮,该常量将起作用。

prev.addEventListener(“click”, function() {
  prevSlide();
});

由于这是一个自动图像滑块,在这种情况下,我已安排图像自动更改。这里我使用了 5000 即 5 秒。这意味着图像将每 5 秒更改一次。如果您希望图像每 2 秒更改一次,请在此处使用 2000 而不是 5000。

setInterval(function() {
  nextSlide()
}, 8000);
};
window.onload = function() {
responsiveSlider();
}
通过添加 JavaScript 代码激活图像滑块

希望您从本教程中了解到我是如何使用 HTML CSS 和 JavaScript 代码创建这个漂亮的自动图像滑块的。如果您想下载所需的源代码,可以使用下面的下载按钮。

如果您对如何制作此自动图像滑块有任何疑问,那么您绝对可以通过评论让我知道。

文章原文出处:https: //foolishdeveloper.com/

#javascript #image #slider #html #css 

What is GEEK

Buddha Community

如何在 Html、CSS 和 Javascript 中使用自动图像滑块
Web Monster

Web Monster

1677108125

Creating a Responsive Blog with HTML, CSS, and JavaScript

Are you looking to build a professional-looking blog with HTML, CSS, and JavaScript? In this video 

tutorial, we'll walk you through the process of designing and developing a blog from scratch, step-by-step. 

 

From creating the layout of your blog with HTML and CSS to adding interactivity and functionality with JavaScript, 

we'll cover everything you need to know to create a fully functional blog. Whether you're a blogger, 

web developer, or simply looking to learn new skills, this tutorial is for you! 

We'll also provide some tips and tricks along the way to help you optimize your blog for search engines, improve your website's accessibility, and enhance the user experience. 

🔔 Subscribe for more! 

https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

🔗 Source code 

https://upfiles.com/KO0VqqK

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

☝ Start developing the project (base files + images) 

- Click on the UpFiles link 

- Click the green button (code) 

- Click Download ZIP 

- Extract the project to the desired location 

📂Assets 

Icons: https://boxicon.com/

 Fonts: https://fonts.google.com/

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

 🔥 Follow me! 

Facebook 

https://bit.ly/3IMfk04

 Instagram 

https://bit.ly/3GHoQyT

 Twitter 

https://bit.ly/3IOBEqc

 Linkedin 

https://bit.ly/3INnwNY

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Tags: 

#responsiveportfolio #portfoliohtmlcssjs #webmonster #html #css #javascript #webdesign #website #react #blog, #HTML #CSS #JavaScript #web_development #responsive_design #accessibility #user_experience #tutorial. 

 

So, if you're ready to start building your own blog, this video is the perfect place to start. Be sure to like this video and subscribe to our channel for more web development tutorials and tips!

 

Link of The Video :

https://youtu.be/BqgWIel4uuU

Lyda  White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

Saurabh Kumar

Saurabh Kumar

1671267560

Personal Portfolio Website Using Html Css and Javascript

#HTML #CSS #JavaScript 

In this tutorial we are going to make a personal Portfolio in this website there are six section Home, About, Services,Portfolio , Skills, and Contact the main features of this is dark/light mode function

 ∎ Download Source codes - https://www.thesimplifieddev.com/make-a-personal-portfolio-website

Features : -

  • Fully Responsive 
  • Dark mode/light mode
  • Browser compatibility
  • Social Media Icon
  • and many more

#css  #html  #javascript 

 

 

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

code savvy

code savvy

1629473371

Web Design Speed Code | HTML, CSS, JavaScript (GSAP) | Portfolio Design

Portfolio Website Design with HTML, CSS & Javascript

 

Hello Everyone, In this video we'll create a Portfolio Page design using HTML, CSS & JavaScript (GSAP) 📁

🧠 Knowledge : 

Html, CSS (Flexbox), JavaScript DOM, Javascript Animations.

Anyway, you can learn everything mentioned. Follow the tutorial.

⏱ Outline

 

#css #javascript  #JavaScript  #HTML #html 

Click to Watch Full Tutorial