原生javascript实现图片轮播效果

淡淡的烟草味﹌ 2022-08-23 05:43 180阅读 0赞

最近学习javascript实现动画效果，就用原生的javascript代码实现了图片轮播的效果，供大家参考学习。

1.首先设置图片轮播的地方（id=banner）

2.然后是一个图片组

3.然后是一个按钮层，用来定位图片组( ul-->li)

4.最后为按钮层设置背景以及显示图片的**alt**信息

### 可以先构造出html结构  `<span style="font-family:SimSun;"><div id="main"> <div id="banner"> <img src="images/T_1.png"alt="第一张图" /> <img src="images/T_2.png"alt="第二张图" /> <img src="images/T_3.png"alt="第三张图" /> <img src="images/T_4.png"alt="第四张图" /> <img src="images/T_5.png"alt="第五张图" /> <img src="images/T_6.png"alt="第六张图" /> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> <span> </span> <strong> </strong> </div> </div></span>` ###

**至于CSS样式，附件源码中已给出。接着介绍封装的函数，直接看源码**

//获取某组节点的数量
    Base.prototype.length = function () {
    	return this.elements.length;
    };
    
    //获取某一个节点的属性   ******
    Base.prototype.attr = function (attr) {
    	return this.elements[0][attr];
    };
    
    //获取某一个节点在整个节点组中是第几个索引  ******
    Base.prototype.index = function () {
    	var children = this.elements[0].parentNode.children;
    	for (var i = 0; i < children.length; i ++) {
    		if (this.elements[0] == children[i]) return i;
    	}
    };
    
    //获取某一个节点，并且Base对象  *******
    Base.prototype.eq = function (num) {
    	var element = this.elements[num];
    	this.elements = [];
    	this.elements[0] = element;
    	return this;
    };
    
    
    
    //设置CSS
    Base.prototype.css = function (attr, value) {
    	for (var i = 0; i < this.elements.length; i ++) {
    		if (arguments.length == 1) {
    			return getStyle(this.elements[i], attr);
    		}
    		this.elements[i].style[attr] = value;
    	}
    	return this;
    };
    
    //设置innerHTML
    Base.prototype.html = function (str) {
    	for (var i = 0; i < this.elements.length; i ++) {
    		if (arguments.length == 0) {
    			return this.elements[i].innerHTML;
    		}
    		this.elements[i].innerHTML = str;
    	}
    	return this;
    };
    
    
    
    //设置鼠标移入移出方法   ******
    Base.prototype.hover = function (over, out) {
    	for (var i = 0; i < this.elements.length; i ++) {
    		addEvent(this.elements[i], 'mouseover', over);
    		addEvent(this.elements[i], 'mouseout', out);
    	}
    	return this;
    };
    
    
    
    //设置显示
    Base.prototype.show = function () {
    	for (var i = 0; i < this.elements.length; i ++) {
    		this.elements[i].style.display = 'block';
    	}
    	return this;
    };
    
    //设置隐藏
    Base.prototype.hide = function () {
    	for (var i = 0; i < this.elements.length; i ++) {
    		this.elements[i].style.display = 'none';
    	}
    	return this;
    };

原生的javascript实现图片轮播完整代码，有部分注释，其中有些注释的部分是自己的调试过程。

$(function () {
    	//轮播器初始化
    	$('banner img').css('display','none');
    	//alert();
    	$('#banner img').eq(0).css('display', 'block');
    	$('#banner ul li').eq(0).css('color', '#333');
    	//$('#banner strong').html('asfsdc');
    	$('#banner strong').html($('#banner img').eq(0).attr('alt'));  //获取alt的属性值
    	
    	//轮播器计数器
    	var banner_index = 1;
    	//自动轮播
    	var banner_timer = setInterval(banner_fn,1000);
    	
    	//手动轮播器
    	$('banner ul li').hover(function () {
    	//var num = $(this).index();
    	 // alert(num);
    	    clearInterval(banner_timer);    //清理计时器，停止播放
    	   //	alert($(this).css('color'));
    	  	banner(this);
    		
    	},function () {
    	  banner_index = $(this).index() + 1;
    	  banner_timer = setInterval(banner_fn,1000);
    	});
    	
    		
    	function banner(obj) {
    		$('#banner img').css('display', 'none');
    		$('#banner img').eq($(obj).index()).css('display', 'block');
    		$('#banner ul li').css('color', '#999');
    		$(obj).css('color', '#333');
    		$('#banner strong').html($('#banner img').eq($(obj).index()).attr('alt'));
    	}
    	
    	function banner_fn() {
    		if (banner_index >= $('#banner ul li').length()) banner_index = 0;
    		banner($('#banner ul li').eq(banner_index).first());   //传递本体
    		banner_index++;
    	}
    });
    上张效果图<img src="https://img-blog.csdn.net/20160610121559382?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
    
     总结;目前实现了自动轮播和手动暂停的功能，接下来的想法是设置滚动动画功能，并可以计入上下轮播选择，持续更新中.....
    源码地址：http://pan.baidu.com/s/1eSg8rr8