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