원생 js 이음매 없 는 라운드 플러그 인 사용 상세 설명
html 구조
<div class="sliders-wraper" id="rotation-1">
<ul class="sliders clear">
<li class="slider" style="background:purple">5</li>
<li class="slider" style="background:pink">1</li>
<li class="slider" style="background:beige">2</li>
<li class="slider" style="background:gold">3</li>
<li class="slider" style="background:skyblue">4</li>
<li class="slider" style="background:purple">5</li>
<li class="slider" style="background:pink">1</li>
</ul>
<div class="pagenation">
<div class="page page-active"><a></a></div>
<div class="page"><a></a></div>
<div class="page"><a></a></div>
<div class="page"><a></a></div>
<div class="page"><a></a></div>
</div>
<span class='prev rotation-btn'><</span>
<span class='next rotation-btn'>></span>
</div>
css 스타일
*{margin: 0;padding: 0;box-sizing: border-box;}
.clear{zoom: 0;}
.clear:after{content: '';display: block;overflow: hidden;clear: both;widows: 0;height: 0;}
.sliders-wraper{width: 100%;height: 400px;line-height: 400px;
overflow: hidden;position: relative;text-align: center;}
.sliders{position: absolute;list-style: none;font-size: 50px;}
.slider{float: left;}
.rotation-btn{position: absolute;top: 50%;width: 50px;height: 50px;
line-height: 50px;margin-top: -25px;font-size: 30px;color: #ccc;cursor: pointer;}
.prev{left:0;}
.next{right:0;}
.pagenation{position: absolute;bottom: 10px;width: 100%;height: 25px;line-height: 25px;}
.pagenation .page{width: 40px;height: 25px;display: inline-block;cursor: pointer;}
.pagenation .page a{display: block;width: 30px;height: 5px;border: 1px solid #ccc;
border-radius: 5px;background: transparent;margin: 10px auto;}
.pagenation .page-active a{border-color: #0076ff;background-color: #0076ff;}
js
;(function(doc, win){
function Rotation(obj){
this.wraper = doc.getElementById(obj.el) //
this.sliders = this.wraper.getElementsByClassName('sliders')[0] //
this.slideList = this.sliders.getElementsByClassName('slider') //
this.length = this.slideList.length
this.index = 1 //
this.timer = null //
this.animation = null //
// obj
this.mode = 'easy-in-out'// , 'linear'
this.step = 5 //
this.delay = 2500 //
this.duration = 40 //
this.auto = true //
this.btn = false //
this.focusBtn = true //
for(var k in obj)
this[k] = obj[k]
if(this.btn){
this.prev = this.wraper.getElementsByClassName('prev')[0]
this.next = this.wraper.getElementsByClassName('next')[0]
}
if(this.focusBtn){
this.pagenation = this.wraper.getElementsByClassName('pagenation')[0]
this.pageList = this.pagenation.getElementsByClassName('page')
this.activePage = 0 //
}
this.init()
}
var D = Rotation.prototype
/*
* func init
*
* @para 0
*/
D.init = function(){
this.width = this.wraper.clientWidth
if(this.mode == 'linear')
this.duration = 1
for(var i=0; i<this.length; i++)
this.slideList[i].style.width = this.width + 'px'
this.sliders.style.width = this.width * this.length + 'px'
this.sliders.style.marginLeft = -this.width + "px";
this.handler()
this.auto && this.autoPlay()
}
D.getStyle = function(obj, attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
}
/*
* @method bind
*
* bind events
*/
D.handler = function(){
var _th = this,i=0
if(this.btn){
this.prev.onclick = function(){
_th.turnLeft();
}
this.next.onclick = function(){
_th.turnRight();
}
}
if(this.focusBtn){
for(; i<this.pageList.length; i++){
this.pageList[i].key = i
this.pageList[i].function(){
_th.index = this.key + 1
_th.toggleClass()
}
}
}
this.wraper.onmouseover = function(){
clearInterval(_th.animation);
}
this.wraper.onmouseout = function(){
_th.auto && _th.autoPlay()
}
}
/*
* func turnRight
*
* @para 0
*/
D.turnRight = function(){
this.index++;
if(this.index == this.length-1){
this.index=1;
this.sliders.style.marginLeft = 0;
}
this.toggleClass();
}
/*
* func turnLeft
*
* @para 0
*/
D.turnLeft = function(){
this.index--;
if(this.index == 0){
this.index = this.length-2;
this.sliders.style.marginLeft = -this.width * (this.length-1) + "px";
}
this.toggleClass();
}
/*
* func toggleClass
* ,
* @para 0
*/
D.toggleClass = function(){
if(this.focusBtn){
this.pageList[this.activePage].className = "page";
this.pageList[this.index-1].className = "page page-active";
this.activePage = this.index-1;
}
this.slide(-this.index * this.width);
}
/*
* func slide
* ,
* @param ins
*/
D.slide = function(ins){
var _th = this
//
if(_th.timer) clearInterval(_th.timer);
_th.timer = setInterval(move,_th.duration);
function move(){
var currentPosition = parseFloat(_th.sliders.style.marginLeft);
//
var n = ins-currentPosition<0?-1:1;
if(Math.abs(ins-currentPosition) < _th.step){
_th.sliders.style.marginLeft = ins + "px";
clearInterval(_th.timer);
}else{
// ,
if(_th.mode == 'easy-in-out')
_th.step = Math.abs(ins-currentPosition)/5
_th.sliders.style.marginLeft = currentPosition + n*_th.step + "px";
}
}
}
/*
* func autoPlay
*
* @para 0
*/
D.autoPlay = function(){
var _th = this
clearInterval(_th.animation)
_th.animation = setInterval(function(){
_th.turnRight();
},_th.delay)
}
/*
* func debounce
*
* @para fn< > delay< >
* @value func
*/
D.debounce = function(fn,delay){
var timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay)
}
}
/*
* func refresh
* ,
* @para 0
*/
D.refresh = function(){
var _th = this
this.debounce(function(){
_th.init()
_th.toggleClass()
},100)()
}
/*
* func rotation
*
* @para obj
* @value
*/
win.rotation = function(obj){
return new Rotation(obj)
}
})(document, window)
호출 방식
var r2 = rotation({
el: 'rotation-1',
mode: 'easy-in-out', //
auto: true,//
btn: true, //
focusBtn: false//
})
window.onresize = function(){
r2 && r2.refresh()
}
하 이 라이트 주제 공유:jQuery 사진 윤 방자 바스 크 립 트 사진 윤 방부 트 스 트랩 사진 윤 방이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.