龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

JS高仿网易163幻灯片

时间:2013-03-06 14:58来源:未知 作者:admin 点击: 次
分享到：
js幻灯片特效高仿网易163幻灯片展示，用js拖动插件和js滑动条插件两款插件结合制作图片幻灯片效果。 这款幻灯片效果是一种比较好的用户体验设计。 498)this.width=498;' onmousewheel = 'jav

js幻灯片特效高仿网易163幻灯片展示，用js拖动插件和js滑动条插件两款插件结合制作图片幻灯片效果。

这款幻灯片效果是一种比较好的用户体验设计。

 

查看演示>>

[代码部分]

  1. <link type="text/css" href="css/gallery.css" rel="stylesheet" />  
  2. <script src="js/slider.js" type="text/javascript"></script>  
  3.  
  4. <div class="nph_area">  
  5.  
  6. <div id="gallery" class="nph_gallery clearfix">  
  7.     <div class="nph_bg">  
  8.  
  9.         <div class="nph_photo" id="modePhoto">  
  10.             <div class="nph_photo_view">  
  11.                 <div id="photoView" class="nph_cnt">  
  12.                     <i></i><img src="http://img1.cache.netease.com/cnews/img/gallery11/bg06.png" id="photo" />  
  13.                 </div>  
  14.                 <div class="nph_photo_prev">  
  15.                     <a id="photoPrev" class="nph_btn_pphoto" target="_self" hidefocus="true" href="#p=7DOBC5MA00AO0001"></a>  
  16.                 </div>  
  17.                 <div class="nph_photo_next">  
  18.  
  19.                     <a id="photoNext" class="nph_btn_nphoto" target="_self" hidefocus="true" href="#p=7DOBC21A00AO0001"></a>  
  20.                 </div>  
  21.             </div>  
  22.             <!--nph_photo_view end-->  
  23.               
  24.             <div class="nph_cnt">  
  25.                 <div class="nph_cnt clearfix">  
  26.                     <div class="nph_set_info">  
  27.                         <div id="setInfo">  
  28.                             <div class="nph_set_title">  
  29.  
  30.                                 <span id="photoType" class="nph_set_cur">（<span class="nph_c_lh" id="photoIndex">6</span>/11）</span>  
  31.                                 <h1>混血“腰”姬美女，凹凸玲珑妖娆</h1>  
  32.                             </div>  
  33.                         </div>  
  34.                     </div>  
  35.                 </div>  
  36.                   
  37.                 <div id="photoDesc" class="nph_photo_desc">  
  38.  
  39.                     <p></p>  
  40.                 </div>  
  41.             </div><!--nph_cnt end-->  
  42.               
  43.             <div class="nph_cnt">  
  44.                 <div class="clearfix">  
  45.                     <div class="nph_set">  
  46.                         <div class="nph_set_thumb">  
  47.                             <div id="scrl" class="nph_photo_thumb clearfix" style="width:589px;">  
  48.                                 <div class="clearfix">  
  49.  
  50.                                     <div class="nph_scrl">  
  51.                                         <div class="nph_scrl_thumb">  
  52.                                             <div class="nph_scrl_main" id="nph_scrl_main">  
  53.                                                 <ul id="thumb" class="nph_list_thumb clearfix" style="width:1180px;">  
  54. <li>  
  55. <a href="#p=80LDC1RI43UD0031" hidefocus="true"><img src="http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC1RI43UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  56. <p>1、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  57. <i title="img">http://img4.cache.netease.com/photo/0031/2012-05-04/80LDC1RI43UD0031.jpg</i>  
  58. <i title="timg">http://img3.cache.netease.com/photo/0031/2012-05-04/t_80LDC1RI43UD0031.jpg</i>  
  59. </li>  
  60.  
  61. <li>  
  62. <a href="#p=80LDBVG943UD0031" hidefocus="true"><img src="http://img4.cache.netease.com/photo/0031/2012-05-04/s_80LDBVG943UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  63. <p>2、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  64. <i title="img">http://img4.cache.netease.com/photo/0031/2012-05-04/80LDBVG943UD0031.jpg</i>  
  65. <i title="timg">http://img3.cache.netease.com/photo/0031/2012-05-04/t_80LDBVG943UD0031.jpg</i>  
  66. </li>  
  67. <li>  
  68. <a href="#p=80LDC4EG43UD0031" hidefocus="true"><img src="http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC4EG43UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  69. <p>3、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  70. <i title="img">http://img3.cache.netease.com/photo/0031/2012-05-04/80LDC4EG43UD0031.jpg</i>  
  71. <i title="timg">http://img4.cache.netease.com/photo/0031/2012-05-04/t_80LDC4EG43UD0031.jpg</i>  
  72.  
  73. </li>  
  74. <li>  
  75. <a href="#p=80LDC11R43UD0031" hidefocus="true"><img src="http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC11R43UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  76. <p>4、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  77. <i title="img">http://img3.cache.netease.com/photo/0031/2012-05-04/80LDC11R43UD0031.jpg</i>  
  78. <i title="timg">http://img3.cache.netease.com/photo/0031/2012-05-04/t_80LDC11R43UD0031.jpg</i>  
  79. </li>  
  80. <li>  
  81. <a href="#p=80LDBVOE43UD0031" hidefocus="true"><img src="http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDBVOE43UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  82. <p>5、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  83. <i title="img">http://img3.cache.netease.com/photo/0031/2012-05-04/80LDBVOE43UD0031.jpg</i>  
  84. <i title="timg">http://img4.cache.netease.com/photo/0031/2012-05-04/t_80LDBVOE43UD0031.jpg</i>  
  85.  
  86. </li>  
  87. <li>  
  88. <a href="#p=80LDC0BE43UD0031" hidefocus="true"><img src="http://img4.cache.netease.com/photo/0031/2012-05-04/s_80LDC0BE43UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  89. <p>6、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  90. <i title="img">http://img3.cache.netease.com/photo/0031/2012-05-04/80LDC0BE43UD0031.jpg</i>  
  91. <i title="timg">http://img4.cache.netease.com/photo/0031/2012-05-04/t_80LDC0BE43UD0031.jpg</i>  
  92. </li>  
  93. <li>  
  94. <a href="#p=80LDC1B543UD0031" hidefocus="true"><img src="http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC1B543UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  95. <p>7、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  96. <i title="img">http://img3.cache.netease.com/photo/0031/2012-05-04/80LDC1B543UD0031.jpg</i>  
  97. <i title="timg">http://img4.cache.netease.com/photo/0031/2012-05-04/t_80LDC1B543UD0031.jpg</i>  
  98.  
  99. </li>  
  100. <li>  
  101. <a href="#p=80LDC2J743UD0031" hidefocus="true"><img src="http://img4.cache.netease.com/photo/0031/2012-05-04/s_80LDC2J743UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  102. <p>8、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  103. <i title="img">http://img4.cache.netease.com/photo/0031/2012-05-04/80LDC2J743UD0031.jpg</i>  
  104. <i title="timg">http://img3.cache.netease.com/photo/0031/2012-05-04/t_80LDC2J743UD0031.jpg</i>  
  105. </li>  
  106. <li>  
  107. <a href="#p=80LDC2TE43UD0031" hidefocus="true"><img src="http://img4.cache.netease.com/photo/0031/2012-05-04/s_80LDC2TE43UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  108. <p>9、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  109. <i title="img">http://img4.cache.netease.com/photo/0031/2012-05-04/80LDC2TE43UD0031.jpg</i>  
  110. <i title="timg">http://img3.cache.netease.com/photo/0031/2012-05-04/t_80LDC2TE43UD0031.jpg</i>  
  111.  
  112. </li>  
  113. <li>  
  114. <a href="#p=80LDC3BP43UD0031" hidefocus="true"><img src="http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC3BP43UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  115. <p>10、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  116. <i title="img">http://img3.cache.netease.com/photo/0031/2012-05-04/80LDC3BP43UD0031.jpg</i>  
  117. <i title="timg">http://img4.cache.netease.com/photo/0031/2012-05-04/t_80LDC3BP43UD0031.jpg</i>  
  118. </li>  
  119. <li>  
  120. <a href="#p=80LDC43543UD0031" hidefocus="true"><img src="http://img3.cache.netease.com/photo/0031/2012-05-04/s_80LDC43543UD0031.jpg" alt="混血“腰”姬美女，凹凸玲珑妖娆" /></a>  
  121. <p>11、近日《使徒》论坛发出一组名为混血美女秀凹凸身材的写真，庆游戏公测。</p>  
  122. <i title="img">http://img3.cache.netease.com/photo/0031/2012-05-04/80LDC43543UD0031.jpg</i>  
  123. <i title="timg">http://img4.cache.netease.com/photo/0031/2012-05-04/t_80LDC43543UD0031.jpg</i>  
  124.  
  125. </li>  
  126.                                                 </ul>  
  127.                                             </div>  
  128.                                               
  129.                                             <div class="nph_scrl_bar clearfix">  
  130.                                                 <span class="nph_scrl_lt"></span>  
  131.                                                 <span class="nph_scrl_rt"></span>  
  132.                                                 <div class="nph_scrl_bd">  
  133.                                                     <div class="nph_scrl_ct" id="nph_scrl_ct">  
  134.                                                         <a id="bar" class="nph_btn_scrl">  
  135.  
  136.                                                             <b class="nph_btn_lt"></b>  
  137.                                                             <b class="nph_btn_rt"></b>  
  138.                                                             <span class="nph_btn_bd"><span><b class="nph_btn_ct"></b></span></span>  
  139.                                                         </a>  
  140.                                                     </div>  
  141.                                                 </div>  
  142.                                             </div>  
  143.                                               
  144.                                         </div>  
  145.                                     </div>  
  146.  
  147.                                       
  148.                                     <span class="nph_scrl_prev"><a id="scrlPrev" class="nph_btn_pscrl" hidefocus="true" href="javascript:void(0)"></a></span>  
  149.                                     <span class="nph_scrl_next"><a id="scrlNext" class="nph_btn_nscrl" hidefocus="true" href="javascript:void(0)"></a></span>  
  150.                                       
  151.                                 </div>  
  152.                             </div>  
  153.                         </div>  
  154.                     </div>  
  155.                 </div>  
  156.             </div>  
  157.         </div>  
  158.  
  159.     </div>  
  160. </div><!--gallery end-->  
  161.  
  162. </div>  
  163.  
  164. <script type="text/javascript">  
  165. var slider = new Slider({  
  166.     icontainer : "nph_scrl_ct",  
  167.     idrag : "bar",  
  168.     plusBtn : "scrlPrev",  
  169.     reduceBtn : "scrlNext",  
  170.     panel : "thumb",  
  171.     content : "nph_scrl_main",    
  172.     direction : "left",  
  173.     acceleration : 5,  
  174.     sliderAcc : 1         
  175. });  
  176.  
  177. var ul = $.get("nph_scrl_main"),  
  178.     list = ul.getElementsByTagName("li"),  
  179.     len = list.length,  
  180.     intervalD = Math.ceil( ul.scrollWidth / len ),  
  181.     intervalS = Math.ceil( slider.Max.left / len ),  
  182.     index = 1,  
  183.     photoPrev = $.get("photoPrev"),  
  184.     photoNext = $.get("photoNext"),  
  185.     photo = $.get("photo"),  
  186.     photoIndex = $.get("photoIndex"),  
  187.     photoDesc = $.get("photoDesc").getElementsByTagName("p")[0];  
  188.  
  189. function removeClass(){  
  190.     $.each(list, function(o, i){  
  191.         o.className = "";  
  192.     });  
  193. }  
  194.  
  195. function Go(i, o){  
  196.     index = i;  
  197.     var _distance = 0;  
  198.     if(i > 2){  
  199.         slider.content.scrollLeft = intervalD * (i - 2);          
  200.     }else{  
  201.         slider.content.scrollLeft = 0;  
  202.     }  
  203.     _distance = intervalS * i;  
  204.     if(i === len - 1){  
  205.         _distance = intervalS * (i + 1);  
  206.     }  
  207.     slider.idrag.style.left = Math.min(Math.max(_distance , 0),slider.Max.left)  + "px" 
  208.     removeClass();  
  209.     o.className = "nph_list_active";  
  210.     photo.src = o.getElementsByTagName("i")[0].innerHTML;  
  211.     photoDesc.innerHTML = o.getElementsByTagName("p")[0].innerHTML;  
  212.     photoIndex.innerHTML = i + 1;  
  213. }  
  214.  
  215. Go(0, list[0]);  
  216.       
  217. $.each(list, function(o, i){  
  218.     $.addEvent(o, function(){  
  219.         Go(i, o);         
  220.     },"click");  
  221. });  
  222.  
  223. $.addEvent(photoNext, function(){  
  224.     index++;  
  225.     if(index >= len){  
  226.         index = len - 1;  
  227.         return;  
  228.     }  
  229.     Go(index, list[index]);  
  230.       
  231. },"click");  
  232.  
  233. $.addEvent(photoPrev, function(){  
  234.     index--;  
  235.     if(index < 0 ){  
  236.         index = 0;  
  237.         return;  
  238.     }  
  239.     Go(index, list[index]);  
  240.       
  241. },"click");  
  242. </script> 
 
精彩图集
node+express+ejs制作简单页面上手指南_node.js
node+express+
js点亮星星评分并获取参数的js代码
js点亮星星评
鼠标滑过出现预览的大图提示效果
鼠标滑过出
查找Oracle高消耗语句的方法
查找Oracle高
PHP开发者必须掌握的6个关键字
PHP开发者必

热门标签

头元素 入侵检测 CouchDB linux实用工具 保留小数点 技巧 tee命令 追加 Received 2014过年倒计时 x 填入数据 子分 最全 浮动对联 ids 下个月 MSScriptCont python发邮件 时间段 路由规则 Backtrack5 监听事件 取 父进程ID ssh使用rsa GY-85九轴模块 皇后 路线图 n皇后问题 iisvdir.vbs 第一个不同 动态改变 空白属 服务器故障 格式 数组深度 全局环境 java小数 用户名问 对象指针 列出 地方 c语言二进制 选中值 time() td 解答 创建圆形饼图 Operator 第二天 横向滚动条 几个星期 RHEL5 正则式 URL传递参数 linux命令行 带附件 创建Guid strripos

赞助商链接