面向对象的图片轮播

最新推荐文章于 2022-11-30 00:13:36 发布

Sleepy Bunny瞌睡兔

最新推荐文章于 2022-11-30 00:13:36 发布

阅读量160

点赞数

文章标签：前端 javascript 轮播面向对象

本文链接：https://blog.csdn.net/weixin_45052104/article/details/96429417

版权

这篇博客介绍了一个使用JavaScript实现的面向对象图片轮播功能。通过创建Slider类，实现了左右按钮控制、文字信息显示、小圆点切换以及自动轮播等功能。Slider类包含了元素获取、事件绑定、滑动效果等核心方法。

摘要由CSDN通过智能技术生成

	<script src="js/js.js"></script>
</head>
<body>
	<div id="slide1" class="container">
		<ul>
			<li><a href="http://www.1000phone.com"><img src="img/1.jpg" alt="文字1"/></a></li>
			<li><a href="http://www.1000phone.com"><img src="img/2.jpg" alt="文字2"/></a></li>
			<li><a href="http://www.1000phone.com"><img src="img/3.jpg" alt="文字3"/></a></li>
			<li><a href="http://www.1000phone.com"><img src="img/4.jpg" alt="文字4"/></a></li>
		</ul>
	</div>
	<script type="text/javascript">
		
		var s = new Slider("slide1");
		console.info(s);
	</script>
</body>

在这里插入图片描述](https://img-blog.csdnimg.cn/20190718135500937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA1MjEwNA==,size_16,color_FFFFFF,t_70)

在这里插入图片描述
/*
左右按钮、文字信息的div 、小圆点（ol li)
设置轮播
大图： display
圆点： background
改变当前下标（事件）
自动轮播
*/
function Slider(id){
//获取大盒子
this.bigBox = $(’#’ + id);
//所有的大图li
this.ulli =this.bigBox.children[0].children;
//大图数量
this.num = this.ulli.length;
//创建元素并返回li
this.olli = this.createEle();
//当前下标
this.indexA = 0;
this.div = $(’#msg’);
this.slide();
//左右按钮
this.ltBtn = $(’#ltBtn’);
this.rtBtn = $(’#rtBtn’);
//添加事件
this.addEvent();

}
Slider.prototype.addEvent = function(){
this.ltBtn.onclick = function(){
this.indexA – ;
if(this.indexA === -1){
this.indexA = this.num - 1;
}
this.slide();
}.bind(this);
this.rtBtn.onclick = ()=>{
this.indexA ++;
if(this.indexA == this.num){
this.indexA = 0;
}
this.slide();
}
var that = this;
for(var i = 0;i < this.num;i ++){
this.olli[i].index = i;
this.olli[i].onmouseenter = function(){
that.indexA = this.index;
that.slide();
}

}
Slider.prototype.slide = function(){
//所有的大图 none 所有的圆点red
for(var i = 0;i < this.num;i ++){
this.ulli[i].style.display = ‘none’;
this.olli[i].style.background = ‘red’;
}
//显示当前大图
this.ulli[this.indexA].style.display = ‘block’;
//当前圆点蓝色
this.olli[this.indexA].style.background = ‘blue’;
//显示文字
this.div.innerHTML = this.ulli[this.indexA].children[0].children[0].alt;
}
Slider.prototype.createEle = function(){
//左右按钮
var leftSpan = $create(‘span’);
leftSpan.id = ‘ltBtn’;
leftSpan.innerHTML = ‘<’;
this.bigBox.appendChild(leftSpan);

var rightSpan = $create('span');
rightSpan.id = 'rtBtn';
rightSpan.innerHTML = '&gt;';
this.bigBox.appendChild(rightSpan);

//文字信息的div
var div = $create('div');
div.id = 'msg';
this.bigBox.appendChild(div);

//ol li  返回所有的li
var arr = [];
var ol = $create('ol');
for(var i = 0;i < this.num;i ++){
	var li = $create('li');
	arr.push(li);
	ol.appendChild(li);
}
this.bigBox.appendChild(ol);
return arr;

}

function $(select){
return document.querySelector(select);
}
function $create(tagName){
return document.createElement(tagName);
}