使用原生js写的一个简单slider

网络编程 2024/11/16 佚名

3 2 1

复制代码代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div,ul,li {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
a img {
border: none;
}
.wrap {
width: 100%;
overflow: hidden;
position: relative;
}
.wrap .prev,
.wrap .next {
height: 320px;
position: absolute;
left: -50%;
top: 0;
background-color: #999;
opacity: 0.7;
width: 100%;
}
.wrap .next {
left: auto;
right: -50%;
}
.wrap .prev:hover,
.wrap .next:hover {
opacity: 0.5;
}
.container {
width: 100%;
height: 320px;
}
.container ul {
height: 100%;
}
.container li {
width: 1000px;
height: 100%;
float: left;
}
.container li a,
.container li img {
display: block;
width: 100%;
height: 100%;
}
.page {
position: absolute;
left: 50%;
bottom: 10px;
display:none;
}
.page span {
float: left;
margin-right: 10px;
width: 20px;
height: 20px;
display: block;
cursor: pointer;
background: #999;
border-radius: 50%;
text-align: center;
color: #fff;
}
.page .select {
background: #f00;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container" id="container">
<ul>
<li><a href="1"><img src="/UploadFiles/2021-04-02/20131031084228263.jpg"><li><a href="2"><img src="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg"><li><a href="3"><img src="/UploadFiles/2021-04-02/20140228091207797.jpg"><li><a href="4"><img src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg"></ul>
</div>
<div class="prev" id="prev"></div>
<div class="next" id="next"></div>
<div id="page" class="page"></div>
</div>
<script type="text/javascript">
/*
* Slider constructor
* @param {Node} ele 容器节点
* @param {Int} index 默认显示第几张
*/
var Slider = function(ele){
this.ele = ele;
this.oList = ele.children[0];
this.items = this.oList.getElementsByTagName("li");
this.itemWidth = parseInt(this.items[0].offsetWidth, 10);
this.page = document.getElementById("page");
this.prevBtn = document.getElementById("prev");
this.nextBtn = document.getElementById("next");
this.init();
}
Slider.prototype = {
constructor: Slider,
init: function(){
this.oList.style.position = 'absolute';
this.oList.style.top = 0;
this.oList.style.left = 0;

this.going = 0;
this.current = 1;
this.speed = 100;
this.timer = null;
this.wrapWidth = parseInt(this.ele.offsetWidth, 10);
this.pageCircles = null;

this.prevBtn.style.marginLeft = -this.itemWidth/2 + 'px';
this.nextBtn.style.marginRight = -this.itemWidth/2 + 'px';

if(this.items.length > 2) {
this.setUp();
} else {
this.oList.style.left = (this.wrapWidth - this.itemWidth * this.items.length)/2 + 'px';
this.prevBtn.style.display = "none";
this.nextBtn.style.display = "none";
}

this.oList.style.width = this.itemWidth * this.items.length + 'px';

},
setUp:function(){
var first1 = this.items[0].cloneNode();
first1.innerHTML = this.items[0].innerHTML;

first2 = this.items[1].cloneNode();
first2.innerHTML = this.items[1].innerHTML;

last1 = this.items[this.items.length-1].cloneNode();
last1.innerHTML = this.items[this.items.length-1].innerHTML;

last2 = this.items[this.items.length-2].cloneNode();
last2.innerHTML = this.items[this.items.length-2].innerHTML;

this.oList.appendChild(first1);
this.oList.appendChild(first2);
this.oList.insertBefore(last1, this.items[0]);
this.oList.insertBefore(last2, this.items[0]);

this.buildPage();
this.bindEvent();
this.slientGoTo();
},
buildPage:function(){
for(var i = 0,len = this.items.length - 4; i<len; i++) {
var circle = document.createElement('span');
circle.innerHTML = i + 1;
this.page.appendChild(circle);
}
this.pageCircles = this.page.getElementsByTagName('span');
this.addEvent(this.page, 'click', 'gotoIndex');
this.page.style.display = 'block';
},
bindEvent:function(){
this.addEvent(this.prevBtn, 'click', 'prev');
this.addEvent(this.nextBtn, 'click', 'next');
},
addEvent:function(ele, type, fn, context) {
context = context || this;
var innerFun = function(event) {
var evt = event || window.event;
if(typeof fn === 'string'){
context[fn].call(context, this, evt);
} else {
fn.call(context, this, evt);
}
}
if(window.addEventListener) {
ele.addEventListener(type, innerFun, false);
} else {
ele.attachEvent('on'+type, innerFun);
}
},
index:function(ele){
var parentNode = ele.parentNode;
var eles = parentNode.getElementsByTagName(ele.tagName);

for(var i = 0, len = eles.length; i<len; i++){
if(eles[i] == ele) {
return i;
}
}
},
hasClass: function(obj, cls) {
return !!obj.className && obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
},
addClass: function(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
},
removeClass:function (obj, cls) {
if (this.hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
},
gotoIndex:function(eleContext, evt){
var ele = evt.target || evt.srcElement;
var index = this.index(ele);
if(this.current === this.items.length-4 && index === 0) {
this.current = 0;
this.slientGoTo();
} else if(this.current === 1 && index ===this.items.length-5) {
this.current = this.items.length-3;
this.slientGoTo();
}
this.current = index + 1;
this.doAnimate();
},
prev:function(eleContext, evt){
this.current--;
this.doAnimate();
},
next:function(eleContext, evt){
this.current++;
this.doAnimate();
},
doAnimate:function(){
this.distance = (this.wrapWidth-this.itemWidth*(2*this.current + 3))/2 - parseInt(this.oList.style.left, 10);
if(this.distance < 0){
this.speed = -Math.abs(this.speed);
} else {
this.speed = Math.abs(this.speed);
}
this.distance = Math.abs(this.distance);
this.animate();
},
animate:function(){
var that = this;
this.timer = setTimeout(function() {
var left = parseInt(that.oList.style.left, 10) || 0;

if (that.going+Math.abs(that.speed) >= that.distance) {
if (that.speed > 0) {
that.oList.style.left = left + that.distance - that.going + 'px';
} else {
that.oList.style.left = left - that.distance + that.going + 'px';
}
clearTimeout(that.timer);
that.going = 0;
that.onceEnd();
} else {
that.going += Math.abs(that.speed);
that.oList.style.left = left + that.speed + 'px';
that.animate();
}
}, 25);

},
slientGoTo:function(){
console.log(this.current);
this.oList.style.left = (this.wrapWidth-this.itemWidth*(2*this.current + 3))/2 + 'px';
},
setCircleSelect:function(){
for(var i=0,len = this.pageCircles.length; i<len; i++) {
var ele= this.pageCircles[i];
if(this.hasClass(ele, 'select')) {
this.removeClass(ele, 'select');
}
}
this.addClass(this.pageCircles[this.current-1], 'select');
},
correctCurrent:function(){
if(this.current === 0) {
this.current = this.items.length - 4;
} else if(this.current === this.items.length - 3) {
this.current = 1;
} else {
return false;
}
this.slientGoTo();
},
onceEnd:function(){
this.correctCurrent();
this.setCircleSelect();
}
}
var con = document.getElementById("container");
var s = new Slider(con);
</script>
</body>
</html>

原生js,slider

标签：

原生js,slider

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“使用原生js写的一个简单slider”

使用原生js写的一个简单slider

暂无“使用原生js写的一个简单slider”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

使用原生js写的一个简单slider

原生js,slider

jquery实现更改表格行顺序示例

js判断横竖屏及禁止浏览器滑动条示例

评论“使用原生js写的一个简单slider”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

使用原生js写的一个简单slider

原生js,slider

jquery实现更改表格行顺序示例

js判断横竖屏及禁止浏览器滑动条示例

评论“使用原生js写的一个简单slider”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存