jquery picswitch图片焦点图展示效果

393 阅读 0 评论 260 点赞

我是靠谱客的博主畅快小土豆，这篇文章主要介绍jquery picswitch图片焦点图展示效果，现在分享给大家，希望可以做个参考。

效果如下:
这个插件的要点之处就在JQuery-1.4.2.js的发布添加的新函数data的应用，所以jquery库一定要是1.4.2的版本

另一方面就是css的编写，setInterval和setTimeout的用法，前者是每隔多长时间执行一次，后者是多长时间执行一次；

关于setTimeout的用法有二种形式 1 setTimeout(code,interval) 中的code是字符串

2 setTimeout(func,interval,args) 中的func是函数

实现代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>jquery slidepictrue</TITLE> 
<style type="text/css"> 
*{ margin:0px; padding:0px; list-style:none; } 
body{ font-size:12px; color:white} 
#imageShow { position:relative;z-index:3;overflow:hidden;width:586px;height:150px } 
#imageShow #imageSwitch { position:absolute;right:0px;bottom:0px;padding-left:50px;z-index:4; 
background-color:#C08A93;filter:Alpha(opacity=70); opacity:0.7;} 
#imageShow #imageSwitch li{ float:left;border-left:1px solid white;height:14px;width:30px; 
text-align:center;line-height:14px;} 
</style> 
</HEAD>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]