您好,游客注册登录繁體
首页 >> css3 >> 最简单的图片切换效果,支持pc端、移动端的banner图片切换开发

最简单的图片切换效果,支持pc端、移动端的banner图片切换开发

Tyna 2015-04-28 0
浏览次数2218

最简单的图片切换效果,支持pc端、移动端的banner图片切换开发

无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果。无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端、手机端全屏的banner图片切换效果。

 

写法很简单,网页初学者们或者wenbapp初学者们可以拿去学习学习,也可以在这基础上加上手机的图片滑动切换效果。废话不多说,下面说说这个简单的图片切换的效果吧!

首先以下是图片切换的效果图:

pc全屏图片切换 webapp图片切换全屏打入切换

图片切换效果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;background-color: #000000;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;background-color: #ffffff;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);
}

全部评论:0

需要登录才能发表评论!

需要 登录 才能发表评论

<