web前端学习之轮播图实现（原生js）

  很久前接触过html css js 但自己在工作中用的少，简单的需求直接vue 走起，没有静下心好好写点js css 什么的，现在想要好好学习下 大前端的知识了，第一个小练习，做了个轮播图

 网上有很多轮播图的实现过程,每个人都有自己不一样的思路，自己只要实现了就行。当然有些思路确实比我的要好，后续借鉴学习。

逻辑：将要展示的图片全部放在盒子里，超出部分隐藏，然后设置定时器，没两秒循环一次 img 标签，如果display 为block 就将 display 设置为none  那么后面的图片就到当前的div 区域内了，大体思路是这样 ，当然后面加入了js 时间 支持前后翻页，和提示功能

上代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
 
<head>
    <title>caroucel</title>
</head>
 
<style>
    *{
        margin:0;
        padding:0
    }
    .box {
        width: 300px;
        height: 250px;
        border: 1px solid red;
        position: relative
    }
 
    img {
        width: 300px;
        height: 250px;
    }
 
    #prev {
        position: absolute;
        top: 50%;
        margin-top: -12px;
        height: 35px;
        width: 15px;
        background-color: rgba(255, 0, 0, .6);
        vertical-align: center;
        line-height: 35px;
        cursor:pointer;
 
    }
 
    #next {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -12px;
        height: 35px;
        width: 15px;
        background-color: rgba(255, 0, 0, .6);
        vertical-align: center;
        line-height: 35px;
        cursor:pointer;
 
 
    }
</style>
 
<body>
    <div class='box' style='overflow: hidden'>
        <img src="./1" alt="">
        <img src="./2" alt="">
        <img src="./3" alt="">
        <img src="./4" alt="">
        <img src="./5" alt="">
        <span id='prev'>
        < </span> <span id='next'> >
        </span>
         
    </div><div id='dd'></div>
 
    <script>
        // 修改样式为块
        function inintBlock() {
            const imgObjs = document.getElementsByTagName("img")
            for (let i = 0; i < imgObjs.length; i++) {
                imgObjs[i].style.display = 'block'
            }
        }
        inintBlock()
        function operate() {
            const imgObjs = document.getElementsByTagName("img")
            for (let i = 0; i < imgObjs.length; i++) {
                if (imgObjs[i].style.display === 'block') {
                    imgObjs[i].style.display = 'none'
                    break;
                }
            }
            const state = Array.prototype.slice.call(imgObjs).map(function (item) { return item.style.display })
            const res = state.filter(function (i) { return i === 'none' })
            if (res.length === 5) {
                inintBlock()
            }
 
        }
 
        let interval = window.setInterval(
            function () {
                operate()
            }, 2000
        )
 
        const el = document.getElementsByClassName('box')[0]
 
        el.addEventListener('mouseenter', function (event) {
            window.clearInterval(interval)
        })
 
        el.addEventListener('mouseleave', function (event) {
            interval = window.setInterval(function () { operate() }, 2000)
        })
 
        document.getElementById('prev').addEventListener('click',
            //获取当前images 的属性进行遍历，找block属性，修改前一个节点样式
            function () {
                const imgObjs = document.getElementsByTagName("img")
                for (let i = 0; i <imgObjs.length;i++){
                    if(imgObjs[i].style.display === 'block'){
                        if(i-1<0){
                            document.getElementsByClassName('box')[0].nextSibling.innerText = '已经是首页了'
                            break;
                        }
                        imgObjs[i-1].style.display = 'block'
                        break;
                    }
                }
            })
 
        document.getElementById('next').addEventListener('click',function(){
            const imgObjs = document.getElementsByTagName("img")
                for (let i = 0; i <imgObjs.length;i++){
                    if(imgObjs[i].style.display === 'block'){
                        if(i+1>4){
                            document.getElementsByClassName('box')[0].nextSibling.innerText = '已经是最后一页了'
                            break;
                        }
                        imgObjs[i].style.display = 'none'
                        break;
                    }
                }
             
        })
 
    </script>
 
 
</body>
 
</html>

　　代码也是很简单的，主要联系下，js 遍历 dom 的操作，孰能生巧，多多练习

 

 

做的过程中有发现个方法，通过定位把几张图片从左往右一次拼接起来，点击的时候向左或者向右触发事件，事件内容是修改各个图片的定位 left right 值 从而产生左右翻滚的效果。（z-index 也是个实现的方法）

刚开始感觉下手很难，但做着做着方法也就越来越多，根据需求选择最合适的最适合自己的就好。

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

下面是一个轮播图左右滑动的实现

html部分：

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Carousel Figure</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<!--从左向右滑动-->
  <nav>
    <ul id="index">
      <li class="on"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul id="img">
      <li><img src="../images/img1.jpg" alt="img1"></li>
      <li><img src="../images/img2.jpg" alt="img2"></li>
      <li><img src="../images/img3.jpg" alt="img3"></li>
      <li><img src="../images/img4.jpg" alt="img4"></li>
      <li><img src="../images/img5.jpg" alt="img5"></li>
    </ul>
  </nav>
<script src="script.js"></script>
</body>
</html>
 
css 部分：
*{
  margin:0;
  padding:0;
}
nav{
  width: 720px;
  height: 405px;
  margin:20px auto;
  overflow: hidden;
  position: relative;
}
#index{
  position: absolute;
  left:320px;
  bottom: 20px;
 
}
#index li{
  width:8px;
  height: 8px;
  border: solid 1px gray;
  border-radius: 100%;
  background-color: #eee;
  display: inline-block;
}
#img{
  width: 3600px;/*不给宽高无法移动*/
  height: 405px;
  position: absolute;/*不定义absolute，js无法设置left和top*/
  z-index: -1;
}
#img li{
  width: 720px;
  height: 405px;
  float: left;
}
#index .on{
  background-color: black;
}
 
 
js 部分：
 

function moveElement(ele,x_final,y_final,interval){//ele为元素对象
  var x_pos=ele.offsetLeft;
  var y_pos=ele.offsetTop;
  var dist=0;
  if(ele.movement){//防止悬停
    clearTimeout(ele.movement);
  }
  if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
    return;
  }
  dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
  x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
   
  dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
  y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
   
  ele.style.left=x_pos+'px';
  ele.style.top=y_pos+'px';
   
  ele.movement=setTimeout(function(){//分10次移动，自调用10次
    moveElement(ele,x_final,y_final,interval);
  },interval)
}

 

 

图片自动轮播：

var img=document.getElementById('img');

var list=document.getElementById('index').getElementsByTagName('li');
var index=0;//这里定义index是变量，不是属性
 
var nextMove=function(){//一直向右移动，最后一个之后返回
  index+=1;
  if(index>=list.length){
    index=0;
  }
  moveIndex(list,index);
  moveElement(img,-720*index,0,20);
};
var play=function(){
  timer=setInterval(function(){
    nextMove();
  },2500);
};
 
鼠标覆盖小圆点，实现切换效果：
for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
  list[i].index=i;//这里是设置index属性，和index变量没有任何联系
  list[i].onmouseover= function () {
    var clickIndex=parseInt(this.index);
    moveElement(img,-720*clickIndex,0,20);
    index=clickIndex;
    moveIndex(list,index);
    clearInterval(timer);
  };
  list[i].onmouseout= function () {//移开后继续轮播
    play();
  };
}

 

posted @   风中的沙~~  阅读(3935)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示