jQuery實(shí)現(xiàn)炸裂輪播效果

更新時(shí)間：2022年05月06日 10:47:25 作者：大兵的貓

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)炸裂輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)炸裂輪播圖，供大家參考，具體內(nèi)容如下

最終效果：

圖片炸裂成碎片，同時(shí)更換圖片

css代碼：

<style>
? ? *{
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? }
? ? .box{
? ? ? ? width: 600px;
? ? ? ? height: 400px;
? ? ? ? border:1px solid #000000;
? ? ? ? background-color: darkslategrey;
? ? ? ? position: relative;
? ? ? ? margin:100px auto;
? ? ? ? display: flex;
? ? ? ? flex-wrap: wrap;
? ? ? ? overflow: hidden;
? ? }
? ? .child{
? ? ? ? width: 60px;
? ? ? ? height: 40px;
? ? ? ? box-sizing: border-box;
? ? ? ? text-align: center;
? ? ? ? position: relative;
? ? ? ? line-height: 40px;
? ? ? ? background-image: url(./images/01.jpg);
? ? ? ? background-size: 600px 400px;
? ? ? ? transition: 0.5s;
? ? ? ??
? ? }
</style>

HTML+JS代碼：

<body>
? ? <div class="box"></div>
? ? <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
? ? <script>
? ? ? ? var str=''
? ? ? ? var timerId=null
? ? ? ? var a=1;
? ? ? ? for(var i=0;i<=99;i++){
? ? ? ? str+='<div class="child">'+i+'</div>' ? ?
? ? ? ? $('.box').html(str) //循環(huán)添加子節(jié)點(diǎn)
? ? ? ? }
? ? ? ? init() ? //調(diào)用初始化函數(shù)
? ? ? ? function init(){ ? //初始化函數(shù)，確定初始樣式
? ? ? ? ? ? for(var i=0;i<100;i++){
? ? ? ? ? ? ? ? var x=-($('.child').eq(i).offset().left-$('.box').offset().left-1)+'px'
? ? ? ? ? ? ? ? var y=-($('.child').eq(i).offset().top-$('.box').offset().top-1)+'px' ? //找到每一個(gè)子元素的位置
? ? ? ? ? ? ? ?console.log(x,y)
? ? ? ? ? $('.child').eq(i).css('background-position',x+' '+y) ? //將背景圖片的相對(duì)位置設(shè)置到子元素（每一個(gè)child取圖片的不同位置，以此拼成大的圖片）
? ? ? ? }
? ? ? ? }

? ? ? ? ?function boom(){ ? ? ? ? ? ? //炸裂函數(shù)
? ? ? ? ? ? ?for(var i=0;i<100;i++){
? ? ? ? ? ? ? ? var num ?=parseInt(Math.random()*100) ? ? ? ?
? ? ? ? ? ? ? ? var numx1=parseInt(Math.random()*100)
? ? ? ? ? ? ? ? var numy1=parseInt(Math.random()*100)
? ? ? ? ? ? ? ? var numx=parseInt(Math.random()*180) //獲取隨機(jī)數(shù)
? ? ? ? ? ? ? ? var numx=numx1-num ?//實(shí)現(xiàn)正負(fù)隨機(jī)數(shù)
? ? ? ? ? ? ? ? var numy=numy1-num?
? ? ? ? ? ? ? ? $('.child').eq(i).css('marginLeft',numx+'px') ? //隨機(jī)改變圖片的位置
? ? ? ? ? ? ? ? $('.child').eq(i).css('marginTop',numy+'px')
? ? ? ? ? ? ? ? $('.child').eq(i).css('transform','rotateX('+numx+'deg)')
? ? ? ? ? ? ? ? $('.child').eq(i).css('opacity','0.5')
? ? ? ? ? ? ?}
? ? ? ? ?}

? ? ? ? function guiwei(a){ ? //還原函數(shù)
? ? ? ? ? ? ? ? $('.child').css('marginLeft','') ? //將原來的屬性清空，就會(huì)還原初始狀態(tài)
? ? ? ? ? ? ? ? $('.child').css('marginTop','')
? ? ? ? ? ? ? ? $('.child').css('opacity','1')
? ? ? ? ? ? ? ? $('.child').css('transform','')
? ? ? ? ? ? ? ? $('.child').css('background-image','url(./images/0'+a+'.jpg)') ?//同時(shí)改變圖片路徑
? ? ? ? }

? ? ? ? ?timerId=setInterval(function(){ ?//定時(shí)器
? ? ? ? ? ? boom()
? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? a++
? ? ? ? ? ? ? ? if(a>4){
? ? ? ? ? ? ? ? ? ? a=1
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? guiwei(a)
? ? ? ? ? ? ? ?
? ? ? ? ? ? },1000)
? ? ? ? ?},2000)
? ? </script>
</body>

效果圖：