「?? 作者：極客小俊」
「* 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」

今天我們來看一個用jquery實現(xiàn)360度汽車產(chǎn)品3D旋轉(zhuǎn)展示的效果，其實邏輯很簡單, 就是讓一堆圖片轉(zhuǎn)來轉(zhuǎn)去就行了!????

準(zhǔn)備工作

1. 準(zhǔn)備一個jquery庫，這里我用的是jquery1.11.3.js 沒有的朋友自行官網(wǎng)下載!

2. 準(zhǔn)備一堆汽車圖片和按鈕圖片，并且把汽車圖的名稱改成有序的數(shù)值, 如下 如圖

1. 好了準(zhǔn)備工作做好了， 接下來不廢話直接上代碼

HTML結(jié)構(gòu) ???

<div id="box">
? ?<img src="img/1.png" id="img" title="" alt="" width="" height=""/>
? ?<div class="btn">
? ? ? ?<a href="javascript:;" class="prev" id="prev"></a>
? ? ? ?<a href="javascript:;" class="next" id="next"></a>
? ?</div>
</div>

CSS樣式代碼 ??

*{
? ?margin: 0px;
? ?padding: 0px;
}

a{
? ?text-decoration: none;
}

body{
? ?font-family: '微軟雅黑';
? ?background: #f9f7f6;
}

ul,ol{
? ?list-style: none;
}


#box{
? ?width: 1000px;
? ?height: 447px;
? ?margin: 50px auto;
? ?position: relative;
}

#box>.btn{
? ?width: 88px;
? ?height: 44px;
? ?position: absolute;
? ?bottom: 10px;
? ?left: calc(50% - 44px);
}

#box>.btn>a:nth-child(1), #box>.btn>a:nth-child(2){
? ?height: 44px;
? ?width: 44px;
? ?float: left;
}

#box>.btn>a:nth-child(1){
? ?background: url("img/arrows.png") no-repeat;
}

#box>.btn>a:nth-child(2){
? ?background: url("img/arrows.png") no-repeat -44px 0px;
}

jQuery 代碼邏輯??

? $(function(){
? ? ? ?var i=0; //圖片的數(shù)字名稱
? ? ? ?var timer=null;
? ? ? ?var stop=1;

? ? ? ?function _fnLeft(){
? ? ? ? ? ?i++;
? ? ? ? ? ?if(i>=51){
? ? ? ? ? ? ? ?i=1;
? ? ? ? ? ?}
? ? ? ? ? ?$("#img").attr("src","img/"+i+".png");
? ? ? ?}

? ? ? ?function _fnRight(){
? ? ? ? ? ?i--;
? ? ? ? ? ?if(i<=1){
? ? ? ? ? ? ? ?i=51;
? ? ? ? ? ?}
? ? ? ? ? ?$("#img").attr("src","img/"+i+".png");
? ? ? ?}

? ? ? ?//當(dāng)鼠標(biāo)移動到next上的時候
? ? ? ?$("#next").hover(
? ? ? ? ? ?function(){
? ? ? ? ? ? ? ?console.log(stop);
? ? ? ? ? ? ? ?timer=setInterval(_fnLeft,50);
? ? ? ? ? ?},
? ? ? ? ? ?function(){
? ? ? ? ? ? ? ?stop=1;
? ? ? ? ? ? ? ?clearInterval(timer);
? ? ? ? ? ?}
? ? ? ?);

? ? ? ?//當(dāng)鼠標(biāo)移動到prev上的時候
? ? ? ?$("#prev").hover(
? ? ? ? ? ?function(){
? ? ? ? ? ? ? ?timer=setInterval(_fnRight,50);
? ? ? ? ? ?},
? ? ? ? ? ?function(){
? ? ? ? ? ? ? ?stop=1;
? ? ? ? ? ? ? ?clearInterval(timer);
? ? ? ? ? ?}
? ? ? ?);

? ? ? ?$("#next").click(function(){
? ? ? ? ? ?stop*=-1;
? ? ? ? ? ?if(stop==-1){
? ? ? ? ? ? ? ?clearInterval(timer);
? ? ? ? ? ?}else if(stop==1){
? ? ? ? ? ? ? ?timer=setInterval(_fnLeft,50);
? ? ? ? ? ?}
? ? ? ?})

? ? ? ?$("#prev").click(function(){
? ? ? ? ? ?stop*=-1;
? ? ? ? ? ?if(stop==-1){
? ? ? ? ? ? ? ?clearInterval(timer);
? ? ? ? ? ?}else if(stop==1){
? ? ? ? ? ? ? ?timer=setInterval(_fnRight,50);
? ? ? ? ? ?}
? ? ? ?})
? ?})

最終效果??

如圖

怎么樣 是不是很簡單呢 ，趕緊試試吧! ?????? 挺好玩的!

大家的支持就是我堅持的動力!

如果文章對你有幫助的話就請

???點贊 ??評論 ??收藏

一鍵三連哦！

如果以上內(nèi)容有任何錯誤或者不準(zhǔn)確的地方，????歡迎在下面 ?? 留個言指出!

或者你有更好的想法，歡迎一起交流學(xué)習(xí)??????????