JavaScript实现京东首页轮播图

最新推荐文章于 2023-03-21 13:55:15 发布

liitle--star

最新推荐文章于 2023-03-21 13:55:15 发布

阅读量1.3k

点赞数 3

文章标签： css js

本文链接：https://blog.csdn.net/weixin_49357570/article/details/109307668

版权

该博客介绍了如何使用JavaScript来实现类似京东首页的轮播图效果，包括自动切换、鼠标悬停暂停、手动切换及指示点功能。通过示例代码展示了具体的实现细节。

摘要由CSDN通过智能技术生成

轮播图效果

每隔 3 秒图片会自动切换一张，以此类推安照给定图片数量轮番切换播放。
当鼠标移入时会自动暂停播放，鼠标移出则会继续。
如下图两边有两个左右方向的按钮，点击则会实现手动切换商品图片。
右下角会按照图片数量显示对应的灰色圆点，点击会显示对应的图片，并
圆点加亮显示。
具体效果参考网址：京东轮播图

代码实现

<!DOCTYPE html>
<html>
<head>
	<title>轮播图</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	//CSS样式
	<style type="text/css">
		div,img,h2{
   margin:0px;padding:0px}
		#images{
   width: 900px;height: 340px;}
		#images img{
   display: none}
		#images img:first-child{
   display: block;}
		#button1{
   width: 30px;height: 40px;position: absolute;left: 14px;top:155px;background-color: rgba(79,105,140,0.2)}
		#button2{
   width: 30px;height: 40px;position: absolute;left: 874px;top:155px;background-color: rgba(79,105,140,0.2)}
		#button1:hover{
   background-color: rgba(0,0,0,0.9);}
		#button2:hover{
   background-color: rgba(0,0,0,0.9)