几种不同想法的手写轮播图

发布时间:2019-04-10 14:00:11发布者:Mr.Zhang阅读(57)

几种都是比较简单的写法,主要是为了给自己留个记录,怕以后忘记。。。。

第一种:想法是把想要显示的文字和图片分别放入数组,然后根据num的大小让数组array(num)的第num个显示在div中。

第二种:通过将一排图片依次放入div中,然后只显示一张图片的div的大小,其余全部隐藏,通过左右偏移量div.style.left来进行图片的左右移动,本来想另外在写的,但是发现实在是太像了,所以只简略描述

第三种:没自己写过,和第一种类似,把所有图片叠加放在div里,通过num控制图片的显示隐藏,第一种是num是什么,图片就是第num张,没有全部放出去,这种就是全部都放上来,但是用户只能看到的是显示的那张图片,或者是透明度为1的那张

随便摆的样式 意思意思就好

<style type="text/css">
.imgContent img{
width: 400px;
height: 320px;
}
.imgContent{
width: 400px;
height: 400px;
border: 1px solid rgb(187, 73, 73);
margin: 100px auto;position: relative;
text-align: center;
}
.imgContent a{
display: block;
position: absolute;
bottom: 0;
left: 0px;width: 100%;
height: 30px;
text-align: center;font-size: 18px;line-height: 30px;
}
.imgContent strong{
position: absolute;
top: 50%;
font-size: 30px;
cursor: pointer;
background-color: gray;
}
.prev{
left: 10px;
}
.next{
right: 10px;
}
.buttons{
display:flex;
flex-direction: row;
justify-content: center;
cursor: pointer;
height: 20px;
margin-bottom: 30px;
}
.buttons .on{
background-color: #8e8e8e;
color: #000000;
}
.buttons span{
position: relative;
font-size: 16px;
line-height: 20px;
width: 20px;
height: 20px;
border-radius: 20px;
color: #ffffff;
background-color: #fc7a01;
}
</style>

依次下来是一个大框,数字,左右按钮,图片,4个小按钮,其实这个按钮数量也是可以js根据图片数量生成的,我没写。。

  <div class="imgContent" id='imgContent'>
    <a id="numx"></a>
    <strong id="prev" class="prev"><</strong>
    <strong id="next" class="next">></strong>
    <img src="" id="imgChange"/>
        <div class="buttons">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
  </div>
<script type="text/javascript">
    //定义了几个控件的id和变量
    var numx = document.getElementById('numx');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var imgContent=document.getElementById('imgContent');
    var dos = document.getElementsByTagName("span");
    var imgChange = document.getElementById('imgChange');
    //图片的数组
    var imgArr = ['img/1.jpg','img/b10.png','img/b9.png','img/b2.png'];
    var num = 0;
    var timeL;
    //图片轮播时左右按钮是隐藏的
    prev.style.display='none';
    next.style.display='none';
    //实现动起来
    animate(num);
    //实现自动跳
    play();
    //整个轮播图鼠标覆盖上去就暂时停止,移开又继续自动跳
    imgContent.onmouseover=stop;
    imgContent.onmouseout=play;
    //初始化第一个按钮亮起来的,且第一张图片显示出来
    dos[0].className = "on";
    //给每一个按钮添加点击事件
    for (var i = 0; i < dos.length; i++) {
      clickdos(i);
    }
    //根据点击的按钮的选择按钮的覆盖效果方法
    //先循环把所有的按钮都变暗,再给点击的那个按钮覆盖效果
    function changebutton(i){
      for (var n = 0; n < dos.length; n++)
      {
        dos[n].className = "";
      }
      dos[i].className = "on";
    }
    //按钮的点击事件,点到哪个按钮就让该按钮有覆盖效果并且图片和文字也变化
    //本来覆盖效果的那个方法可以直接放在这里头,但是因为有后续图片的变换按钮也会跟着有覆盖效果
    //所以还是得分开放
    function clickdos(i) {
      dos[i].onclick = function () {
      changebutton(i);
      animate(i);
      }
    }
    //动起来 根据num的数字判断图片和文字数组的第num个放出来
    function animate(num){
      numx.innerHTML = num+1 + '/' + imgArr.length; //数字变化
      imgChange.src = imgArr[num]; //图片变化
    }
    //右边按钮的点击事件,num不断增加,当到了最后一个就从第一个重新开始
    //并且根据num进行图片文字和按钮的变动,另一个按钮同理
    next.onclick = function(){
      num++;
      if(num == imgArr.length){
        num = 0;
       }
      animate(num);
      changebutton(num);
    }
    prev.onclick = function(){
      num--;
      if(num == -1){
       num = imgArr.length-1;
      }
      animate(num);
      changebutton(num);
    }
    //定时器2s依次变动,同时左右按钮隐藏
    function play(){
      timeL=setInterval(function(){next.onclick();},2000)
      prev.style.display='none';
      next.style.display='none';
    }
    //暂停变动,清除定时器,同时左右按钮显示
      function stop(){
        clearInterval(timeL);
        prev.style.display='block';
        next.style.display='block';
      }
</script>




本文转自博客园,原文地址:https://www.cnblogs.com/wsmpy3/p/10676793.html