js轮播图

Html

Css

 a {
	position:relative;
	display:block;
	width:840px;
	height:308px;
	background-repeat:no-repeat;
	border:1px solid #ccc;
}

function setStyle(obj, json) {
     for (i in json) {
         obj.style[i] = json[i];
     }
 }

function rnd(a, b) {
     return Math.random() * (b - a) + a;
 }
 window.onload = function() {
     var img = document.querySelector("#img")
     var aImg = ["https://picsum.photos/840/304?image=301", "https://picsum.photos/840/304?image=302"];
     img.style.backgroundImage = 'url(' + aImg[0] + ')';

function explore(index) {
         var C = 6;
         var R = 3;

var w = img.offsetWidth;
         var h = img.offsetHeight;

for (var i = 0; i < R; i++) {
             for (var j = 0; j < C; j++) {
                 (function() {
                     var oDiv = document.createElement("div");
                     setStyle(oDiv, {
                         position: 'absolute',
                         left: Math.floor(w / C) * j + 'px',
                         top: Math.floor(h / R) * i + 'px',
                         width: Math.floor(w / C) + "px",
                         height: Math.floor(h / R) + "px",
                         background: 'url(' + aImg[index] + ') ' + -Math.floor(w / C) * j + 'px ' + -Math.floor(h / R) * i + 'px  no-repeat',
                         transition: '0.5s all ease-out'
                     })
                     img.append(oDiv);

var l = (Math.floor(w / C) * j - w / 2) * rnd(2, 3) + Math.floor(w / C) - w / (2 * C);
                     var t = (Math.floor(h / R) * i - h / 2) * rnd(2, 3) + Math.floor(h / R) - h / (2 * R);

setTimeout(function() {
                         setStyle(oDiv, {
                             left: l + 'px',
                             top: t + 'px',
                             transform: 'rotateX(' + rnd(-180, 180) + 'deg) ' + 'rotateY(' + rnd(-180, 180) + 'deg) ' + 'rotateZ(' + rnd(-180, 180) + 'deg)    scale(' + rnd(1.5, 2) + ')',
                             opacity: 0
                         })
                     }, 200)
                 })()
             }
         }
         if (index < 1) {
             img.style.backgroundImage = 'url(' + aImg[index + 1] + ')';
         } else {
             img.style.backgroundImage = 'url(' + aImg[0] + ')';
         }

}
     explore(0);
     var index = 0;
     setInterval(function() {
         if (index < 1) {
             index++;
         } else {
             index = 0;
         }
         explore(index);
     }, 2000)
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js轮播图



代码描述：js幻灯片分裂式效果轮播

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Blank丨Page丶

相关代码

js轮播图

最新