? ? ?前不久我的一個朋友想要我幫他寫一個圖片切換的樣式，我就隨便從網上下下載了一個模版，結果里面的圖片切換是需要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 ?建站整理發布 ?（相互學習）

?

? ??

轉載于:https://www.cnblogs.com/aphidic/p/3654307.html

總結

以上是生活随笔為你收集整理的图片切换的一种简单的方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。