Axiu Blog
实现的,我不喜欢用插件,感觉比较难搞,而且定义起来麻烦。下面找了介绍两种非插件的实现的方法。 ### 1、A Simple jQuery Slideshow ![JquerySlideshow.jpg](https://farm5.static.flickr.com/4073/4812016118_e4a382da29.jpg) **演示:[demo]
最近一段时间看了许多外国比较出色的博客,除了广告多、流量大、评论少之外,几乎很大一部分都在首页放上了一个幻灯片展示-slideshow。或绚丽或低调,主要目的无疑都是突出显示博客与众不同之处,吸引读者眼球。看了很多实现方法,基本都是插件类型实现的,我不喜欢用插件,感觉比较难搞,而且定义起来麻烦。下面找了介绍两种非插件的实现的方法。 ### 1、A Simple jQuery Slideshow
最近一段时间看了许多外国比较出色的博客,除了广告多、流量大、评论少之外,几乎很大一部分都在首页放上了一个幻灯片展示-slideshow。或绚丽或低调,主要目的无疑都是突出显示博客与众不同之处,吸引读者眼球。看了很多实现方法,基本都是插件类型实现的,我不喜欢用插件,感觉比较难搞,而且定义起来麻烦。下面找了介绍两种非插件的实现的方法。 ### 1、A Simple jQuery Slideshow
为博客添加slideshow幻灯片效果
Max

最近一段时间看了许多外国比较出色的博客,除了广告多、流量大、评论少之外,几乎很大一部分都在首页放上了一个幻灯片展示-slideshow。或绚丽或低调,主要目的无疑都是突出显示博客与众不同之处,吸引读者眼球。看了很多实现方法,基本都是插件类型实现的,我不喜欢用插件,感觉比较难搞,而且定义起来麻烦。下面找了介绍两种非插件的实现的方法。

1、A Simple jQuery Slideshow

JquerySlideshow.jpg

演示:demo 下载:Download

之前用过这个方法,主要通过z-index层的替换和opacity透明度的改变来实现渐变的幻灯片切换,缺点是需要加载的Jquery库比较大。

2、TinySlider

tinyslider.jpg

演示:demo. 下载:Download

这是目前在用的方法。独立的script只有1.5k大小,并且不用加载其他东西,很小巧。脚本支持自动旋转和选项自动恢复,可以适用于导航列表的方向切换(垂直或水平)。

下面拿我目前用的做个例子。

css部分

#wrapper {width:97%;overflow:hidden;margin:5px 20px 5px 10px;background:#fff;} #slider {float:left; position:relative;margin-left:15px;-moz-border-radius:6px 6px; overflow:auto; width:590px; height:200px;} #slider ul {position:absolute; list-style:none; top:0; left:0} #slider li {float:left; width:590px; height:200px; padding-right:10px}

.pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px} .pagination li {float:left; cursor:pointer; padding:2px 7px;height:25px; color:#222} .pagination li:hover { color:#000;} .pagination li.current {background:#555 } #contents {width:566px; height:170px; padding:15px 28px 15px 18px;line-height:18px;font-size:15px;} #contents p{padding:0 6px;color:#888;} #contents p a.more-read{color:#9cf;} #contents p a.more-read:hover{color:#0ce;} #contents h2 {font:22px Georgia,Verdana; margin-bottom:11px; color:#fff}

php部分

			*   Title 1
			*   Title 2
			*   Title 3
			*   Title 4

		

	



	*   1
	*   2
	*   3
	*   4

var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', //slideshow div的 ID auto:3,// 自动切换的时间 resume:true, // 被打断后自动恢复,默认为false vertical:false,// 方向,默认为false navid:'pagination',// Optional ID ,就是1,2,3,4的选项卡 activeclass:'current',// 当前的LI position:0 // 起始位置,默认为0 });

当然,最后别忘了在header添加_(假设下载的packed.js文件,位置在主题的js文件夹内)_

有了以上几步,实现slideshow并不难,有需要就动手试试吧。

Comments