js 基础篇(点击事件轮播图的实现)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 基础篇(点击事件轮播图的实现)相关的知识,希望对你有一定的参考价值。

轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现。但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法:

1、利用位移的方法来实现

  首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说。将图片放入到div 中。

  其次,样式部分将img标签全部设置成absolute;以方便定位

  最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图片和等待进入的图片,第二个数组保存其余的n张图片,假设这两个数组分别设置为:waitToShow=[]; 和 goOut=[];   waitToShow.shift();弹出第一张图片假如命名为showFirst,并为showFirst图片设置位移和移动时间,执行完成之后showFirst放入goOut尾部:goOut.push(showFirst);  这时waitToShow数组的第0个元素就变成原来的第二张要显示的图片,给这个图片waitToShow[0]设置位移和移动时间,并且将goOut数组的首元素图片弹出来,在放进waitToShow数组的尾部,保证waitToShow数组永远是一张显示的图片和待显示的图片,这样就通过两个数组形成了一个循环来完成轮播图的实现。反向的逻辑是一样的(由于逻辑过于复杂这里不推荐)

2、利用层级的高低来使最顶部图片变化的做法(这个做法没有位移的动作,但是逻辑却非常简便,很实用)

直接来代码更直观点:基本每行都有注释---实例一

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图 (闪现 自适应)</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 60%;
background: red;
margin: auto;
position: relative;
}
.wrap img {
width: 100%;
position: absolute;
/*z-index: 10;*/
}
input {
border: 1px solid lightgray;
width: 50px;
height: 30px;
background: red;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
</div>
<input type="button" id="butLeft" name="name" value="??">
<input type="button" id="butRight" name="name" value="??">
</body>
<script type="text/javascript">
// 获取images元素生成字符串数组,字符串数组不能进行push pop splice 等操作
// 所以要将它的值重新存放进一个数组中,后面有定义
var images = document.getElementsByTagName(img);
var butLeft = document.getElementById(butLeft);
var butRight = document.getElementById(butRight);
//获取变量index 用来为后面设置层级用
var index = 1000;
// 获取一个空的数组,用来存放images里面的字符串元素
var imagess = [];

// for循环用来给imagess数组赋值,并且改变数组中的元素的层级
for (var i = 0; i < images.length; i++) {
imagess[i] = images[i];
var currentImage = imagess[i];
// 当前图片的层级的设置,一轮for循环都为他们设置了初始的zIndex,图片越靠前,层级设置
// 要求越高,所以用的是-i,这样图片会按顺序从第一张,第二张.....依次向下
currentImage.style.zIndex = -i;
}

// 设置计数器count,执行一次点击事件(向左或者向右)count加1
var count = 0;
// 向左的点击事件
butLeft.onclick = function() {
// 从数组头部弹出一个图片元素
var showFirst = imagess.shift();
// 给弹出的这个图片元素设置层级,即 -1000+count,
// 让层级相较其他元素是最小的,数组头部弹出的图片会显示在最底层
showFirst.style.zIndex = - index + count;
// 层级改变完成后再将他push进数组的尾部
imagess.push(showFirst);
// 点击一次加1,不用考虑具体的值,只需要有点击事件加 1
count++;
}
// 向右点击事件
butRight.onclick = function() {
// 从imagess的尾部弹出一个元素,并赋值给showFirst
var showFirst = imagess.pop();
// 设置showFirst的层级为最大,1000+count ,这样他会显示在第一层
showFirst.style.zIndex = index + count;
// 层级改变之后将他在插入数组imagess的头部
imagess.unshift(showFirst);
// 点击一次加1
count++;
}
</script>
</html>

这是我做的另一个实例:实例2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin: 0px;
    }
    @font-face {
       font-family: myfont;
        src:url(font/iconfont.woff);
    }
    .tb{
        font-family:myfont;
        font-size: 60px;
        margin-top: 120px;
    }
    #banner{
        border: 1px solid red;
        width: 1200px;
        height: 600px;
        margin: 0 auto;
        background-image: url("background.jpg");

    }
    #container{
        /*border: 1px solid blue;*/
        width: 980px;
        /*height: 100%;*/
        overflow: hidden;
        margin: 0 auto;
        /*margin-top: 50px;*/
        position: relative;
    }
    #top{
        height: 70px;
        width: 980px;
        background-image: url("topbg.png");
        margin: 0 auto;
        /*margin-top:20px;*/
    }
    #bottom{
        height: 70px;
        width: 980px;
        background-image: url("topbg.png");
        margin: 0 auto;
        margin-top: -30px;
    }
    ul{
        width: 6860px;
        height: 100%;
        position: relative;
    }
    ul li{
        list-style-type: none;
        float:left;
    }
    #prev{
        position: absolute;
        left: 470px;
        top: 80px;
        color:white;
        /*border: 1px solid red;*/
        border-radius: 100px 100px 100px 100px;
        background-color: rgba(0,0,0,0.5);
        height: 100px;
        line-height: 100px;
        width: 100px;
        text-align: center;
    }
    #next{
        position: absolute;
        top: 80px;
        right: 470px;
        color: white;
        /*border: 1px solid red;*/
        border-radius: 100px 100px 100px 100px;
        background-color: rgba(0,0,0,0.5);
        height: 100px;
        line-height: 100px;
        width: 100px;
        text-align: center;
    }
</style>
<body>
   <div id="banner">
      <div id="top"></div>
      <div id="container">
          <ul id="show">
              <li><img src="1.jpg"/></li>
              <li><img src="2.jpg"/></li>
              <li><img src="4.jpg"/></li>
              <li><img src="5.jpg"/></li>
              <li><img src="6.jpg"/></li>
              <li><img src="7.jpg"/></li>
              <li><img src="8.jpg"/></li>
          </ul>
      </div>
      <div id="bottom"></div>
   </div>
   <a class="tb" id="prev">&#xe623;</a>
   <a class="tb" id="next">&#xe690;</a>
<script type="text/javascript">
//    var page = 1, i = 1;
    var nextBtn = document.getElementById("next");
    var prevBtn = document.getElementById("prev");
    var showPart = document.getElementById("show");//获得显示区域
    var tu = showPart.getElementsByTagName("li");//获得图片列表

         tu[0].parentNode.style.left=0+"px";

    nextBtn.onclick = function(){
        var zhiz=parseFloat(tu[0].parentNode.style.left);
        if(zhiz>-5880){
            tu[0].parentNode.style.left=-980+zhiz+"px";
        tu[0].parentNode.style.transition="all 1s linear"

        }else{
            tu[0].parentNode.style.transition=""
            tu[0].parentNode.style.left=0+"px";

        }
    }
    prevBtn.onclick = function(){
        var zhiy=parseFloat(tu[0].parentNode.style.left);
        console.log(zhiy)
        if(zhiy<0){
            tu[0].parentNode.style.left=980+zhiy+"px";
            console.log(zhiy)
            tu[0].parentNode.style.transition="all 1s linear"

        }else{
            tu[0].parentNode.style.transition=""
            tu[0].parentNode.style.left=-5880+"px";
        }
    }


</script>
</body>
</html>

只需将图片的路径改变就OK了

以上是关于js 基础篇(点击事件轮播图的实现)的主要内容,如果未能解决你的问题,请参考以下文章

Android使用ViewPager实现轮播图(自动和手动)

Bootstrap轮播图的切换按钮如何制作?

简单轮播图的实现及原理讲解(js)

js实现效果:循环轮播图

js如何制作图片轮播

js原生 JavaScript轮播图渐变淡入淡出效果实现(附代码)