您的位置:首页 > Web前端 > JavaScript

图片轮转 编写记录(二)

2014-11-22 15:54 169 查看
在上一篇文章中,我已经成功的写了一个小小的图片轮转效果了。

可是,那图片的轮转效果确实有一点差强人意的。所以我对其进行了修改,适逢我的网页需要用一个大图轮转的效果,所以我就把效果写成大图轮转效果。

因为是大图了,首先应该自己上搜图片吧,简易下载一些较大的图片咯,小的图片拉伸后效果很差,大的图片,缩小了以后,还是勉强可以的。

其实大体上市差不多的,但是这次控制class 而是调用jquery的fadeToggle()函数

先上html代码 <div id="wallpaper">
<ul>
<li><img src="images/image_01.jpg" alt="image.jpg"></img></li>
<li><img src="images/image_02.jpg" alt="image.jpg"></img></li>
<li><img src="images/image_03.jpg" alt="image.jpg"></img></li>
<li><img src="images/image_04.jpg" alt="image.jpg"></img></li>
<li><img src="images/image_05.jpg" alt="image.jpg"></img></li>
</ul>
</div> 然后是css代码
#wallpaper{
width:100%;
}

#wallpaper li{
position:absolute;
list-style:none;
}

#wallpaper img{
display:block;
height:40.3em;
width:100%;
}
接着就是图片轮转了
jQuery(function($){
$("#wallpaper").slide();
});
然后,大概的效果就出来了。

代码下载地址:https://github.com/450570469/ImageFade/

这一次关于图片轮转的研究就先告一段落了。但是还是需要慢慢的坚持研究,学点技术。加油!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript 图片轮播