用原生实现轮播图效果

最新推荐文章于 2024-06-17 15:29:34 发布

weixin_45561178

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量128

点赞数

分类专栏：实践#+ 原生代码实现的插件文章标签： html 前端原生轮播图

本文链接：https://blog.csdn.net/weixin_45561178/article/details/100190949

版权

实践#+ 原生代码实现的插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

轮播图有很多插件，自己试着用原生写了一个，用来加深对原生的印象。有点小瑕疵，但插入图片可以实现
1.首先先分析轮播图有什么效果：点击左右按钮能转换图片
2.那么为什么能实现切换效果呢：点击按钮之后，有个唯一的值让其识别——索引，
点击右箭头，图片索引++，点击左箭头，图片索–
3.但是如果点右箭头时，图片就是最后一张，那怎么办呢？可以强行将图片索引变为0
好了，那就来实现轮播图的效果吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
        .cont{width:1130px;height:300px;border: solid 1px black;margin: 20px auto;position: relative;overflow: hidden}
        .imgbox{}
        .imgbox a{width:1130px;height:300px;display: block;position: absolute;left:0;top:0;overflow: hidden}
        .imgbox img{width:1130px;height:300px;}
        .imgbox a:nth-child(1){z-index:1}
        .btns{}
        .btns input{position: absolute;width:40px;height:40px;border-radius:50%;border: none;background: rgba(200,200,200,0.8);top:130px;z-index: 99999999;}
        #left{left:0}
        #right{right:0;}
    </style>
	</head>
	<body>
		<div class="cont">
	        <div class="imgbox">
	            <a href=""><img src="../img/1.jpg" alt=""></a>
	            <a href=""><img src="../img/2.jpg" alt=""></a>
	            <a href=""><img src="../img/3.jpg" alt=""></a>
	            <a href=""><img src="../img/4.jpg" alt=""></a>
	            <a href=""><img src="../img/5.jpg" alt=""></a>
	        </div>
	        <div class="btns">
	            <input type="button" value="<" id="left">
	            <input type="button" value=">" id="right">
	        </div>
    	</div>
	</body>
	<script src="move.js"></script>
	<script type="text/javascript">		
		function Banner(){
		//获取元素
			this.left=document.getElementById("left");
			this.right=document.getElementById("right");
			this.items=document.querySelector(".imgbox").children;		
			this.index=0;
			this.z=1;
			this.init1();
			this.init2();
		}		
		Banner.prototype.init1=function(){	
			var that=this;
			this.left.onclick=function(){
				that.changeIndex1()
			}
		}		
		Banner.prototype.changeIndex1=function(){
				if(this.index==0){
					this.index=this.items.length-1;
				}else{
					this.index--;
				}
				this.items[this.index].style.zIndex=this.z++;
				this.items[this.index].style.left="1130px";
				move(this.items[this.index],{left:0})
			
		}		
		Banner.prototype.init2=function(){
			var that=this;
		this.right.onclick=function(){
			that.changeIndex2();
		}		
		}		
		Banner.prototype.changeIndex2=function(){
			if(this.index==this.items.length-1){
				this.index=0;
			}else{
				this.index++;
			}			
			this.items[this.index].style.zIndex=this.z++;
			this.items[this.index].style.left="-1130px";
			move(this.items[this.index],{left:0})			
		}	
		new Banner();		
	</script>
</html>

轮播图的运动也封装了一个公共函数，以后有运动效果的可以直接拿过来调用（都是用原生写的）

function move(ele,json,callback){
    clearInterval(ele.timer);
    ele.timer = setInterval(function(){
        var onoff = true;
        for(var attr in json){
            if(attr == "opacity"){
                var iNow = getStyle(ele,attr);
            }else{
                var iNow = parseInt(getStyle(ele,attr));
            }
            var speed = (json[attr] - iNow)/8;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
            if(attr == "opacity"){
                iNow += speed;
                ele.style[attr] = iNow/100;
            }else{
                ele.style[attr] = iNow + speed + "px";
            }
            if(iNow != json[attr]){
                onoff = false;
            }
        }
        if(onoff){
            clearInterval(ele.timer);
            callback && callback();
        }
    },30)
}
function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr]
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}

好了，插入图片就可以实现轮播图的效果了

weixin_45561178

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生实现轮播图效果

轮播图有很多插件，自己试着用原生写了一个，用来加深对原生的印象。有点小瑕疵，但插入图片可以实现1.首先先分析轮播图有什么效果：点击左右按钮能转换图片2.那么为什么能实现切换效果呢：点击按钮之后，有个唯一的值让其识别——索引，点击右箭头，图片索引++，点击左箭头，图片索–3.但是如果点右箭头时，图片就是最后一张，那怎么办呢？可以强行将图片索引变为0好了，那就来实现轮播图的效果吧<!...
复制链接

扫一扫

专栏目录