使用HTML+css实现京东图片自动轮播效果(自己写的)

最新推荐文章于 2025-06-17 17:40:43 发布

原创

最新推荐文章于 2025-06-17 17:40:43 发布 · 3.2w 阅读

69 ·

CC 4.0 BY-SA版权

本文展示了如何使用HTML和CSS实现一个京东风格的图片自动轮播效果，结合jQuery实现鼠标悬停停止轮播，鼠标离开后继续轮播，以及手动切换图片的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>jQuery图片轮换效果</title>
  <style type="text/css">
  *{
	margin:0px;
	padding:0px;
	text-align:center;
  }

  #banner{
	width:730px;
	height:454px;
	margin:50px auto;
	position:relative;/*相对定位,相对于.btn按钮*/
	text-align:left;
  }
  .pic image {
	display:block;/*默认有图片不显示*/
	position:absolute;/*绝对定位.对应的是.pic这个div*/
	top:0px;
	left:0px;
  }
  .pic a{
	display:none;
  }
  .pic{        /*专门显现图片区*/
	position:relative;/*相对定位.对应.pic img*/
	border:1px solid red;
  }
  .btn{
	width:150px;
	height:18px;
	position:absolute;/*绝对定位相对于banner div*/
	bottom:5px;
	right:290px;
  }
  .btn ul li{
	background-color:#000000;/*黑色*/
	color:#ffffff;
	list-style-type:none;
	width:18px;
	height:18px;
	float:left;
	bord