2016 - 2024

感恩一路有你

手动图片切换

浏览量:4162 时间:2024-02-06 10:20:39 作者:采采

现在总觉得自己停滞不前,要找找原因啦!!学习是一条漫长的路,在这条路上只有不断的努力才能得到更多的知识,大家一起加油吧,每天进步一点点哦!

简单的HTML

下面是一个简单的HTML代码示例:

上面的代码展示了一个图片切换效果,通过点击数字可以切换显示不同的图片。

CSS样式

下面是相关的CSS样式:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container {
  margin: 0 auto;
  width: 720px;
}
.container .container_img {
  width: 720px;
  height: 450px;
  overflow: hidden;
}
.container .container_img ul {
  width: 2920px;
  height: 450px;
}
.container .container_img ul li {
  position: relative;
  float: left;
}
.container _num {
  position: relative;
  top: -80px;
  width: 720px;
  height: 80px;
  background: rgba(0,0,0,0.5);
}
.container _num li {
  float: left;
  margin: 30px 0 0 20px;
  padding: 0 5px;
  width: 10px;
  height: 20px;
  border: 1px solid #bbb;
  background: gray;
}
.container _num  {
  margin-top: 25px;
  border: 1px solid #fff;
}
.container _num  a {
  color: #fff;
}
.container _num li a {
  text-decoration: none;
  color: #bbb;
}

以上是CSS样式文件中定义的样式,通过这些样式可以实现图片切换效果的显示。

JavaScript代码

下面是实现图片切换效果的一小段JavaScript代码:


通过上述JavaScript代码,当鼠标放在小数字上时,会有一个小效果,并切换显示对应的图片。

以上是关于手动图片切换的相关内容,希望对大家有所帮助。

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。