原生js(JavaScript)实现手动切换图片效果-蒲公英云

原生js(JavaScript)实现手动切换图片效果

手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>手动切换图片</title>
<style type="text/css">
    .imageStyle{width: 400px;height: 300px;background-repeat: no-repeat;list-style-type: none;}
    .switchStyle{float: left;height: 300px;line-height: 300px;background-color: gray;color: white;cursor: pointer;}
</style>
<script type="text/javascript">
    var showNo = 0;    //当前显示图片在数组中下标
    function showByIndex(dir){
        var imageShow = document.getElementById("imageShow");
        var images = imageShow.getElementsByTagName("div");
        if(dir==0){    //dir为0，显示当前图片前面的图片，否则显示当前图片后面的图片
            showNo=showNo+images.length-1;    //因为负数取余的逻辑是绝对值取余之后再取相反数。比如5%3=2；-5%3=-2，而实际上应该为1
        }else{
            showNo=showNo+1;
        }
        showNo=showNo%(images.length);
        for(var i=0;i<images.length;i++){
            if(showNo==i){
                images[i].style.display='block';
            }else{
                images[i].style.display='none';
            }
        }
    }
</script>
</head>
<body>
    <div style="left: 100px;top: 50px;position: absolute;">
        <div id="leftDiv" class="switchStyle" onclick="showByIndex(0)">《</div>
        <div id="showDiv" style="float: left;">
            <div id="imageShow">
                <div class="imageStyle" style="background-image: url('images/psbCAMVXF5F.jpg');display: block;"></div>
                <div class="imageStyle" style="background-image: url('images/psbCAQUOM5Z.jpg');display: none;"></div>
                <div class="imageStyle" style="background-image: url('images/psbCAT61K9Y.jpg');display: none;"></div>
            </div>
        </div>
        <div id="rightDiv" class="switchStyle" onclick="showByIndex(1)">》</div>
    </div>
</body>
</html>

样式图：

具体讲解部分：

这个功能的实现逻辑也很简单，下面分三步进行讲解。

1、首先是获取id为imageShow下面的所有div（每个div都是一张图片），注意这里使用div的原因是div简单，而且好布局，实际应用中什么可以显示图片的元素都可以。只要把imageShow.getElementsByTagName(“div”)里面的参数变成对应的元素就好了。这样取到了所有需要展示的图片并放到了images这个数组中。

2、然后我们定义了一个变量showNo用来控制数组中对应下标的图片进行展示。图片区域左右两边的div都调用了同一个方法showByIndex。它们的区别就是参数不同，左边的div点击1次让showNo减1，右边的div点击1次让showNo加1。

3、最后循环遍历images数组，如果下标等于showNo就显示，否则就隐藏。这样功能就算实现了。

不过在应用中发现了一个问题。js的取余方法%正数取余是正确的，负数的取余会是一个负数。如果取一个数组的负数下标是很危险的，所以为了保证showNo的取余没问题，我们加了一个images的长度再取余，防止showNo为0时减1导致去取下标为负数的bug。然后图片随便找几个把背景换了就可以了，为了不错乱，三张图片高度要一致，如果高度不是300px，记得将样式中的高度调成和图片的高度一致。然后就可以运行了，期待效果吧！