详细内容请点击
无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作，可以说是我的第一个处女座的jquery图片切换效果。无聊之余对它的宽度稍稍做了一下修改，变成了支持pc端、手机端全屏的banner图片切换效果。
写法很简单，网页初学者们或者wenbapp初学者们可以拿去学习学习，也可以在这基础上加上手机的图片滑动切换效果。废话不多说，下面说说这个简单的图片切换的效果吧！
首先以下是图片切换的效果图：
图片切换效果html内容：
- 你是我的小呀小苹果
- 手机banner图片切换效果
- pc全屏图片切换效果
- pc、app都可用的图片切换
- webapp图片切换效果
图片切换效果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内容请点击