图片轮转 编写记录(二)

在上一篇文章中,我已经成功的写了一个小小的图片轮转效果了。

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

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

其实大体上市差不多的,但是这次控制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/

这一次关于图片轮转的研究就先告一段落了。但是还是需要慢慢的坚持研究,学点技术。加油!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值