轮播div

最新推荐文章于 2023-06-20 12:14:42 发布

dream2moon

最新推荐文章于 2023-06-20 12:14:42 发布

阅读量647

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_47959958/article/details/124805329

版权

本文介绍了一种使用CSS实现的轮播图，避免了使用透明度导致的复制和滚动问题。通过修改div的显示状态而非透明度，实现了轮播效果，并修复了原有代码中两次点击后图片消失的bug。同时，添加了鼠标悬停暂停轮播、点击小圆点切换图片的功能。

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

轮播div

效果图如下：
在这里插入图片描述
有三个div
可以做到

自动切换
点击切换
鼠标在某个div上停止切换

主要参考的是这个链接
https://blog.csdn.net/a1424715994/article/details/103700983

做了一下改动，因为这个大佬做的是轮播图，主要逻辑是修改img的透明度（opacity）来实现轮播的效果，这个会造成的结果就是无法复制，以及无法滚动鼠标查看下面的隐藏部分。
另外，大佬还有一个问题就是，当两次点击小圆点按钮后，该图片便会消失，此版本也进行了一些修改

下面放代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这里是title</title>
<style>
#max{
    width: 900px;
    height: 500px;
    align-items: center;
    margin: 5% auto;
    margin-top: 0%;
  }
  .re{
    position: relative;
    height: 400px;
  }
  .re ul{
    list-style-type:none ;
  }
  .re ul>li{
    width: 600px;
    height: 300px;
    position: absolute;
    transition: 1s;
    display: none;
  }
  .re ul>li img{
    width: 900px;
    height: 500px;
    border-radius: 10%;
    border: 15px solid #fffbd6;
  }
  #max ol {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5,75px);
    grid-template-rows: auto;
    grid-gap: 1em;gap: 1em;
    float: right;
    margin-top: 450px;
    list-style: none;
    top:0;left:0;
  }
  #max ol li {
    width: 25px;
    height: 10px;
    font-size: 15px;
    line-height: 20px;
    float: left;
    text-align: center;
    border-radius: 2em;
    border: 5px solid #999999;
  }
  
</style> 
</head>
<body>
	<div id="max">
        <div class="re">
            <ul>
                <li><img src="./1.jpg" alt=""></li>
                <li><img src="./2.jpg" alt=""></li>
                <li><img src="./3.jpg" alt=""></li>
                <li><img src="./4.jpg" alt=""></li>
                <li><img src="./5.jpg" alt=""></li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

</body>
<script>
    window.onload = function(){
  var box=this.document.getElementsByClassName("re")[0];
  var lik=box.getElementsByTagName("li");
  
  function fun(i,j){//转换图片函数，就是把透明度改了一下
    lik[j].style.display="none";
    lik[i].style.display="block";
    
    // lik[i].style.opacity=1;
    // lik[j].style.opacity=0;
    lik[j+5].style.backgroundColor="#00000000";
    lik[i+5].style.backgroundColor="#ffffff";//改一下小图标
    

  }
  fun(0,1);//初始化下
  var i =0;
  function auto(){//轮播循环函数
    if(++i>=5){
      i=0;
      fun(0,4);
    }
    else fun(i,i-1);
  }
  timer=this.setInterval(auto,2000);
  box.onmouseover = function () { //鼠标划上去，停止轮播
    console.log('good');
    clearInterval(timer);
  }
  box.onmouseout = function () { //鼠标划出，继续轮播
    timer = setInterval(auto, 2000); //调用定时器
  }
  var j =0;
  for(;j<5;j++){//点击小图标也可以转换图片
    lik[j+5].ind=j;
    lik[j+5].onclick=function(){
      fun(this.ind,i)
      i=this.ind;
    }
  }

}

</script>
</html>