图片切换的一种简单的方式

     前不久我的一个朋友想要我帮他写一个图片切换的样式，我就随便从网上下下载了一个模版，结果里面的图片切换是需要js调用的，最坑的是js还加了密！没办法，还是自己老老实实写吧！

分享给大家，以后用这种吧，简单！

     

<div class="bannersection">

<ul class="picList">

<li><img src="http://www.aphidicc.com/images/slide1.jpg" border="0" /></li>

<li><img src="http://www.aphidicc.com/images/slide2.jpg" border="0" /></li>

<li><img src="http://www.aphidicc.com/images/slide3.jpg" border="0" /></li>

<li><img src="http://www.aphidicc.com/images/slide4.jpg" border="0" /></li>
</ul>

<!--图片切换-->
<script>
var piclist = $('.picList');
piclist.width($('.picList li').size()*1)
window.setInterval(function () {
var firstli = piclist.children('li').eq(0);
piclist.stop().animate({ 'right': '-3px' },8, function () {
piclist.children('li').eq(0).remove();
piclist.append(firstli);
piclist.css({ 'left': '0' })
});
}, 3000);

</script>
</div>
</div>

 

 

 

 

 

.bannersection .pic {
overflow: hidden;
width: 940px;
height: 417px;
}

#starScroll {
float:none;
position:relative;
}

#starScroll{width:940px;height:417px;overflow:hidden;float:left;}
.picList{

height:417px;
position:absolute;
margin:0px 0px;;
padding:0 0;

}
.picList li {
width:940px;
margin-right:0;
}

 

 

本文由艾菲迪克  http://www.aphidicc.com  建站整理发布  （相互学习）