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

付费服务

要实现的功能大致为:

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

具体操作如下:

一、布局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>
 

本文链接:使用原生js实现点击切换图片(轮播图)效果

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:葱子博客,谢谢!^^


如果文章对您有帮助,欢迎微信扫一扫赞赏葱子! 点击链接加入群【个人站长创业互助群】
点赞 联系我
 
QQ在线咨询
售前咨询热线
售后咨询热线