当前位置:首页 > 心得体会 > 正文内容

使用原生js实现点击切换图片(轮播图)效果

葱子8年前 (2017-05-04)心得体会5618

要实现的功能大致为:

点击两边的切换按钮,可以按顺序切换不同的图片

具体操作如下:

一、布局html

1、添加一个div容器

2、添加一个轮播图img标签

3.添加两个按钮img标签

二、css样式设置

1、设置div容器的宽高分别为400px /200px,居中显示;

2、设置轮播图img标签的宽高分别为400px /200px;

3、将按钮img标签分别设置到左右两侧,需要用到float属性和position属性。position属性这里设置为relative。再使用right/left、bottom属性来调整按钮位置;

三、js切换效果

1、构造一个数组imgarr来存储需要切换的图片地址src信息;

2、构造nextimg函数来实现切换next图片(向后切换)

这里注意,需要定义一个全局值i=0;

向后切换的效果分析:点击后图片地址会变化,且是前一个地址+1的形式。同时需要判断是否是最后一张图片。

所以:    function nextimg(){
                
                i++;
                if(i>=4){i=0;}
                img.src=imgsrc[i];    
            }

3、构造previmg函数来实现切换prev图片(向前切换)

向前切换的效果分析:点击后图片地址会变化,且是前一个地址-1的形式。同时需要判断是否是第一张图片。

所以:

function previmg(){
                i--;
                if(i<=0){i=3;}
                img.src=imgsrc[i];
                
            }

到此为止,效果就实现了。

 

全部代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .main{
                width: 400px;
                height: 200px;
                margin: 30px auto;
                overflow: hidden;
                
            }
            
            
#prev{
    position: relative;
    float: left;
    left: 10px;
    bottom:120px;
}
            
    #next{
    position: relative;
    float: right;
    right: 10px;
    bottom:120px;
}

            
            
            
        </style>
        
        
        
    </head>
    <body>
        <div class="main">
            
            <img src="img/01.png" alt="" imgid="0" id="imgon"/>
            <img src="img/u1.png" alt="" id="prev" onclick="previmg()"/>
            <img src="img/u0.png" alt="" id="next" onclick="nextimg()"/>
            
            
            
        </div>
        
        
        
        <script type="text/javascript">
            
            imgsrc=new Array();
            imgsrc[0]="img/01.png";
            imgsrc[1]="img/02.png";
            imgsrc[2]="img/03.png";
            imgsrc[3]="img/04.png";
            
            var i=0;
            var img=document.getElementById("imgon");
            function nextimg(){
                
                i++;
                if(i>=4){i=0;}
                img.src=imgsrc[i];    
            }
            
            
            function previmg(){
                i--;
                if(i<=0){i=3;}
                img.src=imgsrc[i];
                
            }
            
            
        </script>
        
    </body>
</html>
 

扫描二维码推送至手机访问。

版权声明:本文由葱子博客发布,如需转载请注明出处。

本文链接:https://www.aitiancheng.com/article-528.html

相关文章

记2017年第一次找工作面试

记2017年第一次找工作面试

16年的时候,现在的公司已经基本废了,但是由于担心买房子公积金、个税这些受到影响,所以一直没有认认真真的去找工作。 一直就拖到了现在。 17年开始后,我们在2月底将购房的事情定了下来,...

从获取信任到放权,谈谈”资本的原始积累”

从获取信任到放权,谈谈”资本的原始积累”

一、初到公司,见识到内部派系斗争 14年4月份回到成都,当月便入职在成都软件园C区的一家公司。进公司后,是跟着当时的主管一起做事,首先做的当然是接管整个社区的运营。 在接下来的工作过程中,我和主...

我的2016年总结之工作篇

我的2016年总结之工作篇

2016年开始工作后,项目组基本上解散。公司要求员工将劳动合同转移到其关联公司下面,部分员工在这个原因的促使下离职。剩下不多的员工仍在公司待着。 4月份左右公司从天府软件园E5搬到了府河音乐花园办公。...

关于996

近期很多关于996的讨论,连马老师都牵涉进来了。 996的工作制度很多是在互联网公司,很不幸,我工作这几年,确实还没有经历过996。  对于我来讲,我希望在我的工作中能够获得持久的技能和经验的增长,如果996的...

我的2016年总结之学习篇

我的2016年总结之学习篇

在2016年初的时候写了篇博文大致罗列了一下2016年自己想看的几本书。链接:我的2016书单 里面罗列的书籍有: 心理学-行为学:《怪诞行为学》——没有看 互联...

新时代下站长的流量变现路径分析:转战自媒体

新时代下站长的流量变现路径分析:转战自媒体

在我接触到的大部分站长中,能够有较大盈利的是少数。 这些站长,他们的发展路径基本都是:通过SEO的手段包括原创/伪原创、采集文章,然后从百度等搜索引擎获取流量,再接着通过广告联盟的广告来赚钱广告费。 但...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。