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内容請點選

轉載于:https://www.cnblogs.com/j--d/p/html-j--d.html