整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
為一名職業(yè)web前端，我們需要對網(wǎng)頁上常見的交互都要具備手寫js的能力，或者js比較復(fù)雜如果習(xí)慣jquery也可以。最近切圖網(wǎng)一個客戶項目中遇到了圖片滾動效果，因客戶要求，寫了3個不同的版本，留作備注和分享。
1，右箭頭，點擊一下移動一個單元，當(dāng)移動到最后一個單元的時候，在點擊右箭頭，回到第一個單元
/*圖片滾動*/
$('.imgroll').each(function(){
$(this).find('li:first').addClass('selected');
})
$('.imgroll .next').click(function(){
var f=$(this).parent();
var l=(f.find('li').size()-4) * 258;
//console.log(parseInt(f.find('ul').css('margin-left')) + '-' + l);
if(parseInt(f.find('ul').css('margin-left')) > -l){
f.find('ul').stop().animate({'marginLeft':'-=258'})
}
else{
f.find('ul').stop().animate({'marginLeft':0})
}
});
$('.imgroll .prev').click(function(){
var f=$(this).parent();
var l=(f.find('li').size()-4) * 258;
//console.log(parseInt(f.find('ul').css('margin-left')) + '-' + l);
if(parseInt(f.find('ul').css('margin-left')) < 0){
f.find('ul').stop().animate({'marginLeft':'+=258'})
}
else{
f.find('ul').stop().animate({'marginLeft':0})
}
})
2，點擊右箭頭，移動一個單元，當(dāng)移動到最后一個單元的時候，點擊右箭頭無效。
/*圖片滾動*/
$('.imgroll').each(function(){
$(this).find('li').each(function(){
$(this).attr('data-index',$(this).index());
})
})
$('.imgroll .next').click(function(){
// 將整個ul設(shè)置動畫方式負(fù)移位，制造圖片左移的效果，然后設(shè)置移位為0，將第一張圖片獲取補到最后，到這里整個圖片左移效果完成
var f=$(this).parent();
//console.log(f.find('li:eq(3)').data('index')+1 + '-----'+ f.find('li').size());
if(f.find('li:eq(3)').data('index')+ 1==f.find('li').size()){
return false;
}
f.find('ul').animate({'marginLeft':-258},function(){
$(this).css('marginLeft',0).find('li:first').appendTo($(this));
});
});
$('.imgroll .prev').click(function(){
var f=$(this).parent();
if(f.find('li:first').data('index')==0){
return false;
}
// 同上
f.find('ul').css('marginLeft',-258).find('li:last').prependTo(f.find('ul'));
f.find('ul').animate({'marginLeft':0});
})
3，最常規(guī)的寫法，參見切圖框架 slicy 。
http://www.slicy.cn
原文地址：http://www.qietu.cn/thread-15196-1-1.html （切圖社區(qū)）
加微信公眾號：qietuwang （限做前端的人）
景：
想要實現(xiàn)圖片持續(xù)滾動，既然使用js,就千萬不要加css動畫、過渡等相關(guān)樣式，如果想要滾動的平滑一下，可以一像素一像素的感動，則很平滑，如果加了過渡動畫，當(dāng)圖片重置為0時，會有往回倒的動畫效果，跟預(yù)期不符。
原理：
圖片滾動原理同圖片輪播原理，同樣也適用于文字滾動等一系列滾動，通過復(fù)制最后一張圖片或最后一堆文字插入第一行，或復(fù)制第一張圖片或一堆文字插入在結(jié)尾，來實現(xiàn)無縫拼接，前提：1、必須是沒有設(shè)置過渡動畫的，2、重置為0的時候與當(dāng)前已經(jīng)滾動到的高度對于圖片的位置而言肉眼看上去沒變化。
實現(xiàn)：
html主要包含三塊：
1、最外層盒子，用來展示滾動圖的區(qū)域，overflow:hidden;
2、滾動的盒子，主要改變該盒子的定位值，來實現(xiàn)滾動，里面包含所有要滾動的圖片或文字
3、包含圖片或文字的盒子。
代碼：
class Roll {
constructor(opts) {
this.elem=opts.elem; // 圖片包含滾動長度的元素的
this.elemBox=opts.elemBox; //圖片展示區(qū)域元素，為了獲取展示區(qū)域的高度
this.direction=opts.direction;
this.time=opts.time;
this.init();
this.roll=this.roll.bind(this)
this.startRoll=this.startRoll.bind(this)
this.stopRoll=this.stopRoll.bind(this)
}
init(){
this.elemHeight=this.elem.offsetHeight;
this.elemHtml=this.elem.innerHTML;
this.elem.innerHTML=this.elem.innerHTML + this.elemHtml+ this.elemHtml;
this.speed;
// 如果向上滾或者向左滾動每次減1，向下滾或者向右滾動每次加1
if(this.direction==='top' || this.direction==='left'){
this.speed=-1;
}else{
this.speed=1;
}
}
roll(){
switch (this.direction) {
case "top":
// 如果滾動的盒子的top值超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetTop) >=this.elemHeight){
this.elemBox.style.top=0;
}else{
this.elemBox.style.top=this.elemBox.offsetTop + this.speed + 'px';
}
break;
case "bottom":
// 如果滾動的盒子的bottom值超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetBottom) >=this.elemHeight){
this.elemBox.style.bottom=0;
}else{
this.elemBox.style.bottom=this.elemBox.offsetBottom + this.speed + 'px';
}
break;
case "left":
// 如果滾動的盒子的left超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetLeft) >=this.elemHeight){
this.elemBox.style.left=0;
}else{
this.elemBox.style.left=this.elemBox.offsetLeft + this.speed + 'px';
}
break;
case "right":
// 如果滾動的盒子的right超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetRight) >=this.elemHeight){
this.elemBox.style.right=0;
}else{
this.elemBox.style.right=this.elemBox.offsetRight + this.speed + 'px';
}
break;
default:
// 默認(rèn)向上滾動，如果滾動的盒子的top超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetTop) >=this.elemHeight){
this.elemBox.style.top=0;
}else{
this.elemBox.style.top=this.elemBox.offsetTop + speed + 'px';
}
}
}
stopRoll(){
clearInterval(this.scrollTimer)
}
startRoll(){
this.scrollTimer=setInterval(this.roll,this.time)
}
}
原文鏈接：https://www.php.cn/js-tutorial-448891.html
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
