JAvascriptシームレスで流暢なアニメーションの輪番放送、やっと私にやらせました.
9614 ワード
自分はずっと1つの本当に使うことができる轮播図を书きたいと思って、以前は1つ书いたことがあって、しかしシームレスな轮播ではありませんて、感じはとても悪くて、この轮播の前にも多くの実例をして、多くのコードを见て、しかし头はいつも曲がらないで、どうして一定の距离まで运动した后に突然原始の位置に戻ることができて、运动の情况が现れませんか?なぜタイマーが重なったのか、それともタイマーが重なったのか、マルチキャストが混乱したのかを知っていますか.どのように左右のボタン、ページングボタン、マルチキャスト関数を結びつけて、1つのイベントをトリガーする時、マルチキャストは正常に運行することができますか?最初のliのときに左(前の)にスライドするにはどうすればいいですか?
普段は自分で暇があって、いろいろな方法を試したことがありますが、なかなかできません.今日は他の人が書いたプラグインを見て、発見しました.
1.ulが最后の1枚まで転がる时、瞬间は初期の位置に戻って、动作していないで、私达のためにすべてこの初期の位置に戻る瞬间を运动の一部とするべきです.
2.タイマーが重なっていることについて、以前if(timer){clearInterval(timer)}を使ってみましたが、使いにくいので、ページングをクリックするときに問題が発生します.最後に他の人のコードを見て、マウスでsliderに移動した後、タイマーをクリアして、マウスがsliderに移動した後、タイマーがクリアされたことを発見しました.マウスがsliderに移動した後、タイマーがクリアされるので、この問題は永遠に解決できます.タイマーを再起動する前のすべての操作は、自動マルチキャストなしで行われます.
3.左右のボタン、ページングボタン、マルチキャスト関数を結合させて、私はこのように考えて、マルチキャスト関数は独立することができて、それから現在のoffsetLleftを取得することができて、後の運動の後のoffsetLleftは運動の距離と方向を決定して、それから左右のボタンはliの幅の正負の値のパラメータを設定するだけで連絡することができて、ページング関数と左右の関数、indexの増減を通じて、パラメータを連絡して、ページング関数は、現在のページングのインデックス値を取得することによって、ページングのインデックス値をクリックすることに関連しています.もちろん、このインデックス値はsetAttibuteとgetAttributeで設定できます.
4.最後の質問について、現在のページが最初のページの場合、前のページをクリックすると空白になります.どうせ間違っているので、初期化するときは、一番前に最後のスクロール単位(最後の画像のli)を追加する必要があります.最後のliにスクロールして初期位置に戻るために、ulの最後に最初のliを追加する必要があります.これでページングに影響するのではないでしょうか.実はページングはdata-indexを独立して設定することができ、ページングのlengthも初期化前に設定することができます.なぜなら、ノードが追加されていなかったからです.
html
javascript
普段は自分で暇があって、いろいろな方法を試したことがありますが、なかなかできません.今日は他の人が書いたプラグインを見て、発見しました.
1.ulが最后の1枚まで転がる时、瞬间は初期の位置に戻って、动作していないで、私达のためにすべてこの初期の位置に戻る瞬间を运动の一部とするべきです.
2.タイマーが重なっていることについて、以前if(timer){clearInterval(timer)}を使ってみましたが、使いにくいので、ページングをクリックするときに問題が発生します.最後に他の人のコードを見て、マウスでsliderに移動した後、タイマーをクリアして、マウスがsliderに移動した後、タイマーがクリアされたことを発見しました.マウスがsliderに移動した後、タイマーがクリアされるので、この問題は永遠に解決できます.タイマーを再起動する前のすべての操作は、自動マルチキャストなしで行われます.
3.左右のボタン、ページングボタン、マルチキャスト関数を結合させて、私はこのように考えて、マルチキャスト関数は独立することができて、それから現在のoffsetLleftを取得することができて、後の運動の後のoffsetLleftは運動の距離と方向を決定して、それから左右のボタンはliの幅の正負の値のパラメータを設定するだけで連絡することができて、ページング関数と左右の関数、indexの増減を通じて、パラメータを連絡して、ページング関数は、現在のページングのインデックス値を取得することによって、ページングのインデックス値をクリックすることに関連しています.もちろん、このインデックス値はsetAttibuteとgetAttributeで設定できます.
4.最後の質問について、現在のページが最初のページの場合、前のページをクリックすると空白になります.どうせ間違っているので、初期化するときは、一番前に最後のスクロール単位(最後の画像のli)を追加する必要があります.最後のliにスクロールして初期位置に戻るために、ulの最後に最初のliを追加する必要があります.これでページングに影響するのではないでしょうか.実はページングはdata-indexを独立して設定することができ、ページングのlengthも初期化前に設定することができます.なぜなら、ノードが追加されていなかったからです.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>demo3</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
ul{
padding:0px;
margin:0px;
}
#slider{
width:400px;
height:200px;
position: relative;
margin:400px auto;
overflow: hidden;
border:1px solid #eee;
}
#prev{
width:50px;
height:30px;
line-height: 30px;
color:#fff;
background:#000;
text-align: center;
position: absolute;
opacity:0.5;
left:-200px;
text-decoration: none;
top:50%;
z-index:100;
margin-top:-15px;
}
#next{
opacity:0.5;
text-decoration: none;
z-index:100;
width:50px;
height:30px;
line-height: 30px;
color:#fff;
background:#000;
text-align: center;
position: absolute;
right:-200px;
top:50%;
margin-top:-15px;
}
#slider ul{
height:200px;
position: absolute;
left:0px;
top:0px;
}
#slider ul li{
width:400px;
height:200px;
background:orange;
list-style: none;
text-align: center;
line-height: 200px;
font-size:100px;
font-weight:bold;
color:#fff;
float:left;
}
#slider ol{
list-style-type: none;
position: absolute;
bottom:10px;
padding:0;
margin:0;
width:100%;
text-align: center;
}
#slider ol li{
width:10px;
height:10px;
display: inline-block;
background: #000;
opacity: 0.3;
cursor:pointer;
margin:5px;
border-radius: 50%;
}
#slider ol li.on{
opacity: 0.8;
}
</style>
</head>
<body>
<div id="slider">
<a href="javascript:;" id="prev">prev</a>
<a href="javascript:;" id="next">next</a>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<ol>
</ol>
</div>
</body>
</html>
javascript
<script type="text/javascript" src="startmove.js"></script>
<script type="text/javascript">
window.onload = function (){
var slider = document.getElementById('slider');
var oUl = slider.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var liWidth = parseInt(getStyle(oLi[0] , 'width'));
var aNext = document.getElementById('next');
var aPrev = document.getElementById('prev');
var timer = null;
var inter = 3000;
var index = 0;
var oOl = slider.getElementsByTagName('ol')[0];
var pLi = oOl.getElementsByTagName('li');
var b = false;
//
function intSlider(){
for(var i = 0 ; i < oLi.length ; i++){
oLi[i].setAttribute('data-index',i);
}
for( var i = 0 ; i < oLi.length; i++){
var iLi = document.createElement('li');
oOl.appendChild(iLi);
}
for(var i = 0 ; i < pLi.length ; i++){
pLi[i].setAttribute('data-index',i)
}
pLi[0].className = 'on';
var cloneLastLi = oLi[oLi.length-1].cloneNode(true);
var cloneFirstLi = oLi[0].cloneNode(true);
oUl.insertBefore(cloneLastLi,oUl.childNodes[0]);
oUl.appendChild(cloneFirstLi);
oUl.style.left = -parseInt(getStyle(oLi[0] , 'width')) + 'px';
};
intSlider();
// ul
function getWidth(){
var liWidth = parseInt(getStyle(oLi[0] , 'width'));
oUl.style.width = oLi.length * liWidth + 'px';
};
getWidth();
// timer，
slider.onmouseover = function() {
if(timer){
clearInterval(timer);
}
startMove(aNext,{right : 20});
startMove(aPrev,{left : 20});
};
slider.onmouseout = function() {
timer = setInterval(nextSlider , inter);
startMove(aNext,{right : -100});
startMove(aPrev,{left : -100});
};
//
function sliderOffset(offset){
b = true;
// left left
var currentLeft = oUl.offsetLeft;
var afterLeft = currentLeft + offset;
startMove(oUl , {left : afterLeft},function(){
if (oUl.offsetLeft <= -(oUl.offsetWidth) + liWidth) {
oUl.style.left= -liWidth + 'px';
} else if (oUl.offsetLeft >= 0) {
oUl.style.left= -(oLi.length - 2) * liWidth + 'px';
};
b = false;
});
};
//
function pageSlider(index){
for(var i = 0; i < pLi.length ; i++){
if(pLi[i].className == 'on'){
pLi[i].className = '';
}
}
pLi[index].className = 'on';
};
//
for(var i = 0 ; i< pLi.length ; i++){
pLi[i].onclick = function (){
var index1 = this.getAttribute('data-index');
var offset = (index - index1) * liWidth;
sliderOffset(offset)
index = index1;
pageSlider(index);
}
};
//
function nextSlider(){
if(b){
return;
}
sliderOffset(-liWidth)
if(index >= pLi.length-1){
index = 0;
}else{
index++
}
pageSlider(index)
};
//
function prevSlider(){
if(b){
return;
}
sliderOffset(liWidth);
if(index <= 0){
index = pLi.length-1;
}else{
index--
}
pageSlider(index);
};
//
function addEvent(element,event,listener){
if(element.addEventListener){
element.addEventListener(event,listener,false);
}else{
element.attachEvent('on' + event , listener);
}
};
//
addEvent(aNext,'click',nextSlider);
addEvent(aPrev,'click',prevSlider);
//
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj,false)[attr]
}
};
//
timer = setInterval(nextSlider, inter);
}
</script>