html主页轮播图代码

是网页的基本架构，其中包括了许多标签和元素。其中，主页轮播图是一种常见的网页设计方式，功能是将多张图片自动切换展示，让用户在短时间内可以看到更多的内容和信息。

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>轮播图例子</title>
<style>
.slider{
  position: relative;
  width: 800px;
  height: 300px;
  overflow: hidden;
}
.slider ul{
  position: absolute;
  list-style:none;
  margin: 0;
  padding: 0;
  width: 3200px;
  height: 300px;
}
.slider li{
  float: left;
  position: relative;
  display: block;
  width: 800px;
  height: 300px;
  margin: 0;
  padding: 0;
  background-color: #ccc;
}
.slider li img{
  width: 100%;
  height: 100%;
}
.slider .btn{
  position: absolute;
  display: none;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0,0.5);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.slider:hover .btn{
  display: block;
}
.slider .prev{
  left: 20px;
}
.slider .next{
  right: 20px;
}
</style>
</head>
<body>
<div class="slider">
  <ul>
    <li><img src="http://placehold.it/800x300"></li>
    <li><img src="http://placehold.it/800x300"></li>
    <li><img src="http://placehold.it/800x300"></li>
    <li><img src="http://placehold.it/800x300"></li>
  </ul>
  <div class="btn prev">上一张</div>
  <div class="btn next">下一张</div>
</div>

<script>
var index = 1;
var timer;
var len = $(".slider ul li").length;

$(function(){
  $(".slider").hover(function(){
    clearInterval(timer);
  },function(){
    showImg(index);
    timer = setInterval(function(){
      index++;
      if(index == len+1){
        index = 1;
      }
      showImg(index);
    },3000);
  }).trigger("mouseleave");
  
  $(".slider .btn").click(function(){
    if($(this).hasClass("prev")){
      index--;
      if(index == 0){
        index = len;
      }
      showImg(index);
    }else{
      index++;
      if(index == len+1){
        index = 1;
      }
      showImg(index);
    }
  });
});

function showImg(index){
  $(".slider ul li").eq(index-1).fadeIn(600).siblings().fadeOut(600);
}
</script>
</body>
</html>

这段代码使用了CSS和JavaScript实现了一个简单的轮播图。其中，CSS部分定义了轮播图的样式和布局，而JavaScript部分则控制了图片的自动切换和手动切换功能。代码使用了jQuery框架，方便了开发者的操作和管理。

html主页轮播图代码

相关推荐