Js焦点图 - 左右滚动，原生JS面向对象

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>焦点图 - 左右滚动</title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }
body { background: #ecfaff; }
.box { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; background: #ccc; }
.box ol { position: absolute; left: 200px; bottom: 5px; z-index: 2; }
.box ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
.box .active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }
.box ul { position: absolute; top: 0; left: 0; z-index: 1; }
.box ul li { width: 470px; height: 150px; float: left; }
.box ul img { float: left; width: 470px; height: 150px; }
.box p { width: 20px; height: 20px; line-height: 20px; font-family: arial; color: #fff; text-align: center; font-weight: bold; background: #333; border: 1px solid #ccc; position: absolute; top: 60px; z-index: 2; cursor: pointer; }
.box .prev { left: 10px; }
.box .next { right: 10px; }
</style>
</head>
<body>
<div class="box" id="slider">
	<ul>
		<li><a href="javascript: void(0);"><img src="//ku.shouce.ren/files/images/201601/56a34a983a5f2.jpg" alt="广告一" /></a></li>
		<li><a href="javascript: void(0);"><img src="//ku.shouce.ren/files/images/201601/56a34a9b0aa0b.jpg" alt="广告二" /></a></li>
		<li><a href="javascript: void(0);"><img src="//ku.shouce.ren/files/images/201601/56a34a9e8992e.jpg" alt="广告三" /></a></li>
		<li><a href="javascript: void(0);"><img src="//ku.shouce.ren/files/images/201601/56a34aa0cfac2.jpg" alt="广告四" /></a></li>
		<li><a href="javascript: void(0);"><img src="//ku.shouce.ren/files/images/201601/56a34aa497189.jpg" alt="广告五" /></a></li>
	</ul>
</div>
<script type="text/javascript">
var Effect = (function() {
	
	var Slider = function(o) {
		this.setting      = typeof o === 'object' ? o : {};
		this.target       = this.setting.target || 'slider';
		this.showMarkers  = this.setting.showMarkers || false;
		this.showControls = this.setting.showControls || false;
		this.timer        = null;
		this.currentTime  = null;
		this.ms           = 35;
		this.autoMs       = 3000;
		this.iTarget      = 0;
		this.nextTarget   = 0;
		this.speed        = 0;
		
		this.init();
		this.handleEvent();
	};
	
	Slider.prototype = {
		init: function() {
			this.obj      = document.getElementById(this.target);
			this.oUl      = this.obj.getElementsByTagName('ul')[0];
			this.aUlLis   = this.oUl.getElementsByTagName('li');
			this.width    = this.aUlLis[0].offsetWidth;
			this.number   = this.aUlLis.length;
			
			this.oUl.style.width = this.width * this.number + 'px';
			
			if(this.showMarkers) {
				var oDiv = document.createElement('div');
				var aLis = [];
				for(var i = 0; i < this.number; i++) {
					aLis.push('<li>'+ (i+1) +'<\/li>');
				};
				oDiv.innerHTML = '<ol>'+ aLis.join('') +'<\/ol>';
				this.obj.appendChild(oDiv.firstChild);
				this.aLis = this.obj.getElementsByTagName('ol')[0].getElementsByTagName('li');
				this.aLis[0].className = 'active';
				oDiv = null;
			};
			
			if(this.showControls) {
				this.oPrev = document.createElement('p');
				this.oNext = document.createElement('p');
				this.oPrev.className = 'prev';
				this.oPrev.innerHTML = '&laquo;';
				this.oNext.className = 'next';
				this.oNext.innerHTML = '&raquo;';
				this.obj.appendChild(this.oPrev);
				this.obj.appendChild(this.oNext);
				
			};
			
		},
		
		handleEvent: function() {
			var that = this;
			
			this.currentTime = setInterval(function() {
				that.autoPlay();
			}, this.autoMs);
			
			this.addEvent(this.obj, 'mouseover', function() {
				clearInterval(that.currentTime);
			});
			
			this.addEvent(this.obj, 'mouseout', function() {
				that.currentTime = setInterval(function() {
					that.autoPlay();
				}, that.autoMs);
			});
			
			if(this.showMarkers) {
				for(var i = 0; i < this.number; i++) {
					var el = this.aLis[i];
					(function(index) {
						that.addEvent(el, 'mouseover', function() {
							that.goTime(index);
						});
					})(i);
				};
			};
			
			if(this.showControls) {
				this.addEvent(this.oPrev, 'click', function() {
					that.fnPrev();
				});
				this.addEvent(this.oNext, 'click', function() {
					that.autoPlay();
				});
			};
			
		},
		
		addEvent: function(el, type, fn) {
			if(window.addEventListener) {
				el.addEventListener(type, fn, false);
			}
			else if(window.attachEvent) {
				el.attachEvent('on' + type, fn);
			};
		},
		
		fnPrev: function() {
			this.nextTarget--;
			if(this.nextTarget < 0) {
				this.nextTarget = this.number - 1;
			};
			this.goTime(this.nextTarget);
		},
		
		autoPlay: function() {
			this.nextTarget++;
			if(this.nextTarget >= this.number) {
				this.nextTarget = 0;
			};
			this.goTime(this.nextTarget);
		},
		
		goTime: function(index) {
			var that = this;
			
			if(this.showMarkers) {
				for(var i = 0; i < this.number; i++) {
					i == index ? this.aLis[i].className = 'active' : this.aLis[i].className = '';
				};
			};
			
			this.iTarget = -index * this.width;
			if(this.timer) {
				clearInterval(this.timer);
			};
			this.timer = setInterval(function() {
				that.doMove(that.iTarget);
			}, this.ms);
		},
		
		doMove: function(target) {
			this.oUl.style.left = this.speed + 'px';
			this.speed += (target - this.oUl.offsetLeft) / 3;
			if(Math.abs(target - this.oUl.offsetLeft) === 0) {
				this.oUl.style.left = target + 'px';
				clearInterval(this.timer);
				this.timer = null;
			};
		}
	};
	
	return {
		
		slider: function(o) {
			var tt = new Slider(o);
		}
	};
})();
Effect.slider({
	'targetElement': 'slider',
	'showMarkers': true,
	'showControls': true
});
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js焦点图 - 左右滚动，原生JS面向对象

分类

图片代码

描述

一个基于JS来实现的焦点图，原生JS面向对象的思想，左右滚动的焦点图，经过修改，能在主流浏览器下（包括IE6-9、chrome、firefox）正常的运行，通过对本焦点图的编写，主要学习javascript的面向对象机制，与常用效果的封装，还有就是对函...