jquery簡單的圖片轉場效果，支援pc端、移動端的banner圖片切換開發

標籤：

 

詳細內容請點擊

 

無意中看見了兩年前寫的一個圖片切換,那會兒剛剛學習網頁製作，可以說是我的第一個處女座的jquery圖片轉場效果。無聊之餘對它的寬度稍稍做了一下修改，變成了支援pc端、手機端全屏的banner圖片轉場效果。

 

寫法很簡單，網頁初學者們或者wenbapp初學者們可以拿去學習學習，也可以在這基礎上加上手機的圖片滑動轉場效果。廢話不多說，下面說說這個簡單的圖片切換的效果吧！

首先以下是圖片切換的：

 

圖片轉場效果html內容：

<div class="tyna2">
<div class="tyna2-none"><img src="images/tyna2-1.jpg" class="tyna2-ima" /></div>
<div class="tyna2-none"><img src="images/tyna2-2.jpg" class="tyna2-ima" /></div>
<div class="tyna2-none"><img src="images/tyna2-3.jpg" class="tyna2-ima" /></div>
<div class="tyna2-none"><img src="images/tyna2-4.jpg" class="tyna2-ima" /></div>
<div class="tyna2-none"><img src="images/tyna2-5.jpg" class="tyna2-ima" /></div>
<ul class="tyna2-ul1">
<li class="tyna2-none1">你是我的小呀小蘋果</li>
<li class="tyna2-none1">手機banner圖片轉場效果</li>
<li class="tyna2-none1">pc全屏圖片轉場效果</li>
<li class="tyna2-none1">pc、app都可用的圖片切換</li>
<li class="tyna2-none1">webapp圖片轉場效果</li>
</ul>
<ul class="tyna2-ul2">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

圖片轉場效果css內容：

.tyna2{width: 100%;position: relative;}
.tyna2-none{width: 100%;}
.tyna2-ima{width: 100%;}
.tyna2-ul1{width: 100%;height: 40px;font-size: 0.8em;position: absolute;left: 0px;bottom: 0px;color: #FFFFFF;filter: alpha(opacity: 50);opacity: 0.5;}
.tyna2-ul1 li{width: 98%;height: 40px;line-height: 40px;padding-left: 2%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.tyna2-ul2{position: absolute;right: 10px;bottom: 10px;}
.tyna2-ul2 li{width: 5px;height: 5px;border-radius: 90px;float: left;margin-left: 5px;}
.tyna2-none{display: none;}.tyna2-none1{display: none;}
.tyna2-block{display: block;}

圖片轉場效果js內容：

var tynatime
$(document).ready(function(){
$(‘.tyna2-ul2 li‘).bind("mousemove", changebg);
test(0);
});
function changebg(){
var index=$(‘.tyna2-ul2 li‘).index($(this));
test(index);
}
function test(index){
var li_length=$(‘.tyna2-ul2 li‘).length;
if(index>li_length){
index=0;
}
$(‘.tyna2-ul2 li‘).eq(index).css(‘background‘,‘red‘).siblings().css(‘background‘,‘#ffffff‘);
$(‘.tyna2-none‘).eq(index).show().siblings(‘.tyna2-none‘).hide();
$(‘.tyna2-none1‘).eq(index).show().siblings(‘.tyna2-none1‘).hide();
clearTimeout(tynatime);
tynatime=setTimeout(‘test(‘+(index+1)+‘)‘,3000);
}

學習來源：http://www.j--d.com/html/434.html

 

更多html5內容請點擊

 

jquery簡單的圖片轉場效果，支援pc端、移動端的banner圖片切換開發