网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 背景图像 >> 正文
最新文章
· 带文字说明的js幻灯片代码
· 浏览器全屏浏览图片集
· 创意中国flash+xml焦点图代码
· 仿QQ商城焦点图jquery幻灯特效
· 带缓冲效果的图片幻灯片
· css和jquery配合完成-ipad向左向右拖
· 图片自动按比例缩小代码(防止页面被
· 仿QQ新闻图片浏览效果
· 一个横向滑动的图片切换容器代码
· 鼠标移入/移出改变图片透明度
热门文章
 图片上的左右箭头切换上一张下一张
 带缩略图和左右箭头自动切换的图片
 产品展示专用的jQuery图片幻灯+缩略
 Flash+XML前后按钮的超漂亮图片切换
 图片左右滚动,带有左右方向控制
 Jquery幻灯片/焦点图插件KinSlides
 JS 图片左右滚动,图片控制左右滚动
 可控制左右滚动的无缝图片滚动特效
 可控制图片放大缩小还原移动效果的
 非常漂亮的JS带缩略图的幻灯图片切
相关文章
带左右切换和数字焦点切换的图片幻灯切换
带说明的淡入式图片幻灯切换效果
有预览图的渐显渐隐图片幻灯切换效果
网站常用的Flash图片焦点幻灯代码
仿eBay产品幻灯片展示滑动切换效果
基于jQuery淡入淡出可自动切换的幻灯插件
很酷的仿Flash图片幻灯切换效果
ebay幻灯片产品展示效果
遮罩过渡效果的图片幻灯和选项卡菜单
腾讯客服图片幻灯切换效果
腾讯软件首页的图片幻灯切换效果
产品展示专用的jQuery图片幻灯+缩略图、左右控制按钮
来源:源码爱好者 更新时间:2010/10/12 9:26:47 阅读次数: 我要投稿
☉预览 ↓下载 #复制 +收藏
特效代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>广州简美网络-- 赢客宝产品展示效果</title>
<base target="_blank" />
</head>
<link href="style/ykb.css" rel="stylesheet" type="text/css" />
<script  src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/ivy.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/autoPalyer.js"></script>
<script src="js/pricev2_1.js"></script>
<script src="js/test_codefans.net.js" ></script>
<body >
  <div class="imgLib">
    <div class="imgShow">
    <div id="_playpic" class="playNav">
     <i class="title" id="alt"></i>
     <i class="playButtom">
    <a href="javascript://" target="_self" class="play" title="播放" id="butPlay"></a>
    <span id="playStatus">点击自动播放</span>
    <a href="javascript://" target="_self" style="display:none" class="stop" title="停止" id="butStop"></a>
    <a href="javascript://" target="_self" style="display:none" class="pause" title="暂停" id="butPause"></a>
    <span id="speedGroup" class="spead" style="display:none">
     <a href="javascript://" target="_self" speed="3">快</a>┊<a href="javascript://" target="_self" speed="5">中</a>┊<a href="javascript://" target="_self" speed="8">慢</a>
    </span>
   </i>
     <i class="jump">
    <a href="javascript://" class="pre" id="topPrev" target="_self" title="上一张"></a>
    <a href="javascript://" class="next" id="topNext" target="_self" title="下一张"></a>
    <span id="showPage">0</span>/<span id="showTotal">0</span>
     </i>
   </div>
   
    <div class="singlepic" id="_singlepic">
   <div class="prePic">
    <a href="javascript://" id="butPrev" target="_self" title="上一张"></a>
   </div>
   <div class="bigPic">
    <img id="screen" src="images/zp12.jpg" />
   </div>
   <div class="nextPic">
    <a href="javascript://" id="butNext" target="_self" title="下一张"></a>
   </div>
  </div>
  <div class="pageJump">键盘<i>← →</i>或<i>PageUp PageDown</i>键可查看
   
     <a id="butPrevLink" target="_self" href="#">上一页</a>
    
   
     <a id="butNextLink" target="_self" href="#">下一页</a>
    
  </div>
  <i class="to_left">
   <a id="butPrevGroup" href="javascript://" target="_self" title="上五张图片"></a>
  </i>
  <ul id="nav" class="silderpic">         
  </ul>  
  <i class="to_right">
   <a id="butNextGroup" href="javascript://" target="_self" title="下五张图片"></a>
  </i>  
   </div>
      
  </div>  
<script>var productId=349691; var brandId=35929; </script>
<span id="span_count" class="spanclass"></span>
<script type="text/javascript">
var autoPalyer = new AutoPlayer({
 "baseUrl":"http://product.pconline.com.cn/pdlib/",
 "tag":"",
 "screenId":"screen",
 "altId":"alt",
 "defaultAlt":"广州简美网络-- 赢客宝产品展示",
 "navId":"nav",
 "butPlayId":"butPlay",
 "butPauseId":"butPause",
 "butStopId":"butStop",
 "playStatusId":"playStatus",
 "butPrevId":"butPrev,topPrev",
 "butNextId":"butNext,topNext",
 "butPrevGroupId":"butPrevGroup",
 "butNextGroupId":"butNextGroup",
 "butPrevLinkId":"butPrevLink",
 "butNextLinkId":"butNextLink",
 "butExamineId":"butExamine",
 "pvCounterId":"span_count",
 "butSpeedGroupId":"speedGroup",
 "showTotalId":"showTotal",
 "showPageId":"showPage",
 "showSourceId":"showSource",
 "showSourceCompositeId":"showSourceComposite",
 "data":picsJson["pics"],
 "curId":2531086,
 "picFilter":"",
 "curUrl":""
});

</script>
</body>
</html>

☉预览 ↓下载 #复制 +收藏
特效说明:

  一款基于jquery插件完成的多功能产品图片展示效果,带缩略图、带左右控制按钮,腾讯图片频道的产品展示很相似,鼠标在图片的右半部分点击,会回到上一张,在右部分点击则继续下一张,同时你也可以使用键盘上的PageUp、PageDown键控制上翻下翻,本特效作为图片切换也可,幻灯片也行,效果图截图如上,推荐下载哦。

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号