jsを用いてマルチキャスト効果を実現するいくつかの方法
48310 ワード
jsを用いてマルチキャスト効果を実現するいくつかの方法
私たちはいろいろなページでよく輪番図の効果を見ています.次に、いくつかの異なる方法でこの効果を実現します.もちろん、方法によって実現された効果にも違いがあります.
画像の移動を実現するためにmove関数をカプセル化します.
1.简易版:レイアウトは1つの大きな枠の中に1つの小さい枠を追加して画像を保存して、もう1つの小さい枠は左右のボタンを追加します;
大きな枠はoverflowを設定し、ピクチャ枠の幅は総幅である.画像とボタンの位置を設定する
js部分
2シームレス版1;簡易版のレイアウトとほぼ同じで、画像の最後に1枚目と同じ画像を追加して移行するだけで、画像枠imgboxに位置決めを設定し、画像枠全体を移動してシームレスな効果を達成する.
3シームレス版2:1枚以上の画像を設定する必要はなく、すべての画像を大きな枠の外の位置に設定し、1枚目だけを現在離れる画像として枠内の位置に設定します.
私たちはいろいろなページでよく輪番図の効果を見ています.次に、いくつかの異なる方法でこの効果を実現します.もちろん、方法によって実現された効果にも違いがあります.
画像の移動を実現するためにmove関数をカプセル化します.
function move(ele,json,callback){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in json){
var iNow = parseInt(getStyle(ele,i));
var speed = (json[i] - iNow)/6;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow != json[i]){
onoff = false;
}
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
callback && callback();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
1.简易版:レイアウトは1つの大きな枠の中に1つの小さい枠を追加して画像を保存して、もう1つの小さい枠は左右のボタンを追加します;
<div class="banner">
<div class="imgbox">
<img src="../../week2/day10/m5.jpg" />
<img src="../../week2/day10/mt.jpg" />
<img src="../../week2/day10/m0.jpg" />
<img src="../../week2/day10/miao.jpg" />
<img src="../../week2/day10/mm1.jpg" />
</div>
<div class="btns">
<input type="button" id="left" value="<<>
<input type="button" id="right" value=">>>">
</div>
</div>
大きな枠はoverflowを設定し、ピクチャ枠の幅は総幅である.画像とボタンの位置を設定する
.banner{
width: 800px;
height: 400px;
overflow: hidden;
margin: 20px auto;
position: relative;
}
.imgbox img{
width: 800px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
.imgbox img:nth-child(1){
z-index: 1
}
.btns input{
position: absolute;
top:180px;
width:40px;
height:40px;
border: none;
background: rgba(200,200,200,0.5);z-index: 9999999;
}
#left{
left:0
}
#right{
right:0
}
js部分
function Banner(){
// 1.
this.imgs = document.querySelector(".imgbox").children;
this.left = document.querySelector("#left");
this.right = document.querySelector("#right");
// ：
this.index = 0;
//
this.i = 2;
// 2.
this.init()
}
Banner.prototype.init = function() {
var that = this;
//
this.left.onclick = function() {
//
that.changeLeftIndex();
}
this.right.onclick = function() {
that.changeRightIndex();
}
}
Banner.prototype.changeLeftIndex= function() {
//
if (this.index === 0) {
this.index = this.imgs.length - 1;
} else {
this.index--;
}
//4
this.display(-1);
}
Banner.prototype.changeRightIndex= function() {
if (this.index === this.imgs.length - 1) {
this.index = 0;
} else {
this.index++
}
this.display(1);
}
Banner.prototype.display = function(type) {
//
this.imgs[this.index].style.zIndex = this.i++;
this.imgs[this.index].style.left = this.imgs[0].style.offsetWidth*type+"px";
move(this.imgs[this.index], {
left: 0,
})
}
new Banner();
2シームレス版1;簡易版のレイアウトとほぼ同じで、画像の最後に1枚目と同じ画像を追加して移行するだけで、画像枠imgboxに位置決めを設定し、画像枠全体を移動してシームレスな効果を達成する.
function Banner() {
this.left = document.getElementById("left")
this.right = document.getElementById("right")
this.imgbox = document.querySelector(".imgbox")
this.img = this.imgbox.children;
this.imgbox.style.width = this.img.length * this.img[0].offsetWidth + "px";
this.index = 0;
this.init();
}
Banner.prototype.init = function() {
var that = this;
this.left.onclick = function() {
that.changeIndex(-1);
}
this.right.onclick = function() {
that.changeIndex(1);
}
}
Banner.prototype.changeIndex = function(type) {
if (type == -1) {
if (this.index === 0) {
// ， ， this.img.length - 2
this.index = this.img.length - 2;
// imgbox left left
this.imgbox.style.left = -(this.img.length -1) * this.img[0].offsetWidth + "px";
console.log(this.imgbox.style.left)
} else {
this.index--
}
console.log(this.index)
this.display();
} else {
if (this.index === this.img.length - 1) {
// ， ， 1
this.index = 1;
// ， imgbox left left:0
this.imgbox.style.left = 0;
} else {
this.index++
}
this.display();
}
}
Banner.prototype.display = function() {
move(this.imgbox, {
left: -(this.index) * this.img[0].offsetWidth
})
}
new Banner();
3シームレス版2:1枚以上の画像を設定する必要はなく、すべての画像を大きな枠の外の位置に設定し、1枚目だけを現在離れる画像として枠内の位置に設定します.
function Banner() {
this.left = document.getElementById("left")
this.right = document.getElementById("right")
this.imgbox = document.querySelector(".imgbox")
this.img = this.imgbox.children;
this.index = 0;
//
this.iPrev = this.img.length - 1;
this.init();
}
Banner.prototype.init = function() {
var that = this;
this.left.onclick = function() {
that.changeIndex(-1);
}
this.right.onclick = function() {
that.changeIndex(1);
}
}
Banner.prototype.changeIndex = function(type) {
if (type == -1) {
if (this.index === 0) {
// ，
this.index = this.img.length - 1;
// 0；
this.iPrev = 0;
} else {
this.index--;
this.iPrev = this.index + 1;
}
this.display(type)
} else {
if (this.index === this.img.length - 1) {
this.index = 0;
// 0 ，
this.iPrev = this.img.length - 1;
} else {
this.index++;
// ， ， -1
this.iPrev = this.index - 1;
}
this.display(type);
}
}
Banner.prototype.display = function(type) {
//
// ， (move)
// ：this.img[this.iPrev]
this.img[this.iPrev].style.left = 0;
move(this.img[this.iPrev], {
left: -this.img[0].offsetWidth*type
})
// ：this.img[this.index]
this.img[this.index].style.left = this.img[0].offsetWidth*type + "px";
move(this.img[this.index], {
left: 0
})
}
new Banner()