制作天天生鲜的幻灯片部分

贴了全部代码:

main.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>天天生鲜-首页</title>
  6. <link rel="stylesheet" type="text/css" href="css/reset.css">
  7. <link rel="stylesheet" type="text/css" href="css/main.css">
  8. <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  9. <script type="text/javascript" src="js/slide.js"></script>
  10. </head>
  11. <body>
  12. <div class="header_con">
  13. <div class="header">
  14. <div class="welcome fl">欢迎来到天天生鲜</div>
  15. <div class="user_info fr">
  16.  
  17. <div class="user_login_link fl">
  18. <a href="#">登陆</a>
  19. <span>|</span>
  20. <a href="#">注册</a>
  21. </div>
  22.  
  23. <div class="user_welcome fl">
  24. 欢迎您 : <em>张三</em>
  25. </div>
  26.  
  27. <div class="user_shopping fl">
  28. <span>|</span>
  29. <a href="#">我的购物车</a>
  30. <span>|</span>
  31. <a href="#">我的订单</a>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="logo_bar">
  37. <div class="logo fl">
  38. <a href="#"><img src="data:images/logo.png"></a>
  39. </div>
  40. <div class="search fl">
  41. <form>
  42. <!--placeholder:输入框中有“搜索”两个字,输入文字后消失的一种样式-->
  43. <input type="text" name="" placeholder="搜索" class="input_text fl">
  44. <input type="button" name="" value="搜索" class="input_btn fr">
  45. </form>
  46. </div>
  47. <div class="chart fr">
  48. <a href="#" class="fl">我的购物车</a>
  49. <span class="fr">0</span>
  50. </div>
  51. </div>
  52. <div class="sub_menu_con">
  53. <div class="sub_menu">
  54. <h1 class="fl">全部商品分类</h1>
  55. <ul class="fl">
  56. <li><a href="">首页</a></li>
  57. <li><a href="">手机生鲜</a></li>
  58. <li><a href="">抽奖</a></li>
  59. </ul>
  60. </div>
  61. </div>
  62. <div class="center_con" >
  63. <ul class="main_menu fl">
  64. <li><a href="" class="fruit">新鲜水果</a></li>
  65. <li><a href="" class="seafood">海鲜水产</a></li>
  66. <li><a href="" class="meat">猪肉牛肉</a></li>
  67. <li><a href="" class="egg">禽类蛋品</a></li>
  68. <li><a href="" class="vegetable">新鲜蔬菜</a></li>
  69. <li><a href="" class="ice">速冻食品</a></li>
  70. </ul>
  71.  
  72. <div class="slide_con fl">
  73. <ul class="slide">
  74. <li><a href=""><img src="data:images/slide.jpg" alt="幻灯片"></a></li>
  75. <li><a href=""><img src="data:images/slide02.jpg" alt="幻灯片"></a></li>
  76. <li><a href=""><img src="data:images/slide03.jpg" alt="幻灯片"></a></li>
  77. <li><a href=""><img src="data:images/slide04.jpg" alt="幻灯片"></a></li>
  78. </ul>
  79.  
  80. <div class="prev"></div>
  81. <div class="next"></div>
  82.  
  83. <ul class="points">
  84.  
  85. </ul>
  86. </div>
  87. <div class="adv fl" >
  88. <a href=""><img src="data:images/adv01.jpg" alt="广告"></a>
  89. <a href=""><img src="data:images/adv02.jpg" alt="广告"></a>
  90. </div>
  91. </div>
  92.  
  93. <div class="common_model">
  94. <div class="common_title">
  95.  
  96. <h3 class="fl">新鲜水果</h3>
  97.  
  98. <ul class="fl">
  99. <li><span>|</span></li>
  100. <li><a href="#">草莓</a></li>
  101. <li><a href="#">荔枝</a></li>
  102. <li><a href="#">牛油果</a></li>
  103. </ul>
  104.  
  105. <a href="#" class="more fr">查看更多&gt;</a>
  106. </div>
  107.  
  108. <div class="common_goods_list">
  109. <div class="goods_banner fl"><img src="data:images/banner.jpg" alt="商品banner">
  110. </div>
  111. <ul class="good_list fl">
  112. <li>
  113. <h4>草莓</h4>
  114. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  115. <p>$ 5.00</p>
  116. </li>
  117. <li>
  118. <h4>草莓</h4>
  119. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  120. <p>$ 5.00</p>
  121. </li>
  122. <li>
  123. <h4>草莓</h4>
  124. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  125. <p>$ 5.00</p>
  126. </li>
  127. <li>
  128. <h4>草莓</h4>
  129. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  130. <p>$ 5.00</p>
  131. </li>
  132. </ul>
  133. </div>
  134. </div>
  135. <div class="common_model">
  136. <div class="common_title">
  137.  
  138. <h3 class="fl">新鲜水果</h3>
  139.  
  140. <ul class="fl">
  141. <li><span>|</span></li>
  142. <li><a href="#">草莓</a></li>
  143. <li><a href="#">荔枝</a></li>
  144. <li><a href="#">牛油果</a></li>
  145. </ul>
  146.  
  147. <a href="#" class="more fr">查看更多&gt;</a>
  148. </div>
  149.  
  150. <div class="common_goods_list">
  151. <div class="goods_banner fl"><img src="data:images/banner.jpg" alt="商品banner">
  152. </div>
  153. <ul class="good_list fl">
  154. <li>
  155. <h4>草莓</h4>
  156. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  157. <p>$ 5.00</p>
  158. </li>
  159. <li>
  160. <h4>草莓</h4>
  161. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  162. <p>$ 5.00</p>
  163. </li>
  164. <li>
  165. <h4>草莓</h4>
  166. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  167. <p>$ 5.00</p>
  168. </li>
  169. <li>
  170. <h4>草莓</h4>
  171. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  172. <p>$ 5.00</p>
  173. </li>
  174. </ul>
  175. </div>
  176. </div>
  177. <div class="common_model">
  178. <div class="common_title">
  179.  
  180. <h3 class="fl">新鲜水果</h3>
  181.  
  182. <ul class="fl">
  183. <li><span>|</span></li>
  184. <li><a href="#">草莓</a></li>
  185. <li><a href="#">荔枝</a></li>
  186. <li><a href="#">牛油果</a></li>
  187. </ul>
  188.  
  189. <a href="#" class="more fr">查看更多&gt;</a>
  190. </div>
  191.  
  192. <div class="common_goods_list">
  193. <div class="goods_banner fl"><img src="data:images/banner.jpg" alt="商品banner">
  194. </div>
  195. <ul class="good_list fl">
  196. <li>
  197. <h4>草莓</h4>
  198. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  199. <p>$ 5.00</p>
  200. </li>
  201. <li>
  202. <h4>草莓</h4>
  203. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  204. <p>$ 5.00</p>
  205. </li>
  206. <li>
  207. <h4>草莓</h4>
  208. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  209. <p>$ 5.00</p>
  210. </li>
  211. <li>
  212. <h4>草莓</h4>
  213. <a href="#"><img src="data:images/good_pic.jpg" alt="商品图片"></a>
  214. <p>$ 5.00</p>
  215. </li>
  216. </ul>
  217. </div>
  218. </div>
  219. <div class="footer">
  220. <div class="links">
  221. <a href="">关于我们</a>
  222. <span>|</span>
  223. <a href="">联系我们</a>
  224. <span>|</span>
  225. <a href="">招聘人才</a>
  226. <span>|</span>
  227. <a href="">友情链接</a>
  228. </div>
  229. <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved<br />
  230.  
  231. 电话:010-****888 京ICP备*******8号</p>
  232. </div>
  233. </body>
  234. </html>

main.css:

  1. body{
  2. font-family: 'Microsoft YaHei';
  3. color:#666;
  4. font-size:12px;
  5. }
  6.  
  7. /*顶部状态条*/
  8. .header_con{
  9. height:29px;
  10. background-color: #f7f7f7;
  11. border-bottom:1px solid #ddd;
  12. }
  13.  
  14. .header{
  15. width:1200px;
  16. height:29px;
  17. margin:0 auto;
  18. }
  19.  
  20. .welcome{
  21. font:12px/29px 'Microsoft YaHei UI';
  22. }
  23.  
  24. .user_login_link,.user_welcome, .user_shopping{
  25. height:29px;
  26. line-height:29px;
  27. }
  28.  
  29. .user_login_link a, .user_shopping a{
  30. color:#666;
  31. }
  32.  
  33. .user_login_link a:hover,.user_shopping a:hover{
  34. color:#f80;
  35. }
  36.  
  37. .user_login_link span, .user_shopping span{
  38. margin:0 15px;
  39. color:#cecece;
  40. }
  41.  
  42. /*把这个块藏起来*/
  43. .user_welcome{
  44. display:none;
  45. }
  46.  
  47. .user_welcome em{
  48. color:#f80;
  49. }
  50.  
  51. /*左侧菜单样式*/
  52. .logo_bar{
  53. width:1200px;
  54. height:115px;
  55. margin:0 auto;
  56. }
  57.  
  58. .logo{
  59. width:151px;
  60. height:59px;
  61. margin:29px 0 0 17px;
  62. }
  63.  
  64. .search{
  65. width:616px;
  66. height:38px;
  67. border:1px solid #37ab40;
  68. margin:34px 0 0 123px;
  69. /*雪碧图的放大镜作背景图*/
  70. background:url(../images/icons.png) 10px -335px no-repeat;
  71. }
  72.  
  73. .search .input_text{
  74. width:470px;
  75. height:37px;
  76. border:0px;
  77. margin-left:37px;
  78. outline:none;
  79. }
  80.  
  81. .search .input_btn{
  82. width:100px;
  83. height:38px;
  84. background-color: #37ab40;
  85. border:;
  86. font:14px/38px 'Microsoft YaHei UI';
  87. color:#fff;
  88. /*鼠标变成手*/
  89. cursor:pointer;
  90. }
  91.  
  92. .chart{
  93. width:200px;
  94. height:40px;
  95. margin-top:34px;
  96. }
  97. .chart a{
  98. width:158px;
  99. height:38px;
  100. border:1px solid #ddd;
  101. font:14px/38px 'Microsoft YaHei UI';
  102. color:#37ab40;
  103. text-indent:56px;
  104. background:url(../images/icons.png) 10px -300px no-repeat #f7f7f7;
  105. }
  106.  
  107. .chart span{
  108. width: 40px;
  109. height:40px;
  110. background-color:#f80;
  111. font:bold 18px/40px 'Microsoft YaHei UI';
  112. text-align:center;
  113. color:#fff;
  114. }
  115.  
  116. .sub_menu_con{
  117. height:40px;
  118. border-bottom:2px solid #37ab30
  119. }
  120.  
  121. .sub_menu{
  122. width:1200px;
  123. height:40px;
  124. margin:0 auto;
  125. }
  126.  
  127. .sub_menu h1{
  128. width:200px;
  129. height:40px;
  130. background-color: #37ab40;
  131. font:14px/40px 'Microsoft YaHei UI';
  132. text-align:center;
  133. color:#fff;
  134. }
  135.  
  136. .sub_menu ul{
  137. overflow:hidden;
  138. }
  139.  
  140. .sub_menu li{
  141. float:left;
  142. height:14px;
  143. padding:0 25px;
  144. border-left:1px solid #666;
  145. margin-left:-2px;
  146. margin-top:13px;
  147. }
  148.  
  149. .sub_menu li a{
  150. font:14px/14px 'Microsoft YaHei UI'
  151. color:#666;
  152. }
  153.  
  154. .sub_menu li a:hover{
  155. color:#f80;
  156. }
  157.  
  158. .center_con{
  159. width:1200px;
  160. height:270px;
  161. margin:0 auto;
  162. }
  163.  
  164. .center_con .main_menu{
  165. width:200px;
  166. height:270px;
  167. overflow:hidden;
  168. }
  169.  
  170. .center_con .main_menu li{
  171. width:198px;
  172. height:44px;
  173. border:1px solid #eee;
  174. margin-top:-1px;
  175. background:url(../images/icons.png) 166px -260px no-repeat;
  176. }
  177.  
  178. .center_con .main_menu li a{
  179. display:block;
  180. width:198px;
  181. height:44px;
  182. text-indent:71px;
  183. font:14px/44px 'Microsoft YaHei UI';
  184. color:#333;
  185. background:url(../images/icons.png) 33px -260px no-repeat;
  186. }
  187.  
  188. .center_con .main_menu li .fruit{
  189. background-position: 30px 0px;
  190. }
  191.  
  192. .center_con .main_menu li .seafood{
  193. background-position: 30px -41px;
  194. }
  195.  
  196. .center_con .main_menu li .meat{
  197. background-position: 30px -87px;
  198. }
  199.  
  200. .center_con .main_menu li .egg{
  201. background-position: 30px -132px;
  202. }
  203.  
  204. .center_con .main_menu li .vegetable{
  205. background-position: 30px -174px;
  206. }
  207.  
  208. .center_con .main_menu li .ice{
  209. background-position: 30px -220px;
  210. }
  211.  
  212. /*幻灯片样式*/
  213.  
  214. .slide_con{
  215. width:760px;
  216. height:270px;
  217. position:relative;
  218. overflow:hidden;
  219.  
  220. }
  221.  
  222. /*.slide_con .slide{*/
  223. /*position:relative;left:0;top:0;width:760px;height:270px;*/
  224. /*}*/
  225.  
  226. .slide_con .slide li{
  227. width:760px;
  228. height:270px;
  229. position:absolute;
  230. left:;
  231. top:;
  232.  
  233. }
  234.  
  235. .prev{
  236. width:15px;
  237. height:23px;
  238. /*绝对定位*/
  239. position: absolute;
  240. left:11px;
  241. top:122px;
  242. background:url(../images/icons.png) -2px -388px no-repeat;
  243. cursor: pointer;
  244. }
  245.  
  246. .next{
  247. width:15px;
  248. height:23px;
  249. /*绝对定位,叠加图片*/
  250. position: absolute;
  251. left:732px;
  252. top:122px;
  253. background:url(../images/icons.png) -2px -428px no-repeat;
  254. cursor: pointer;
  255. }
  256. .points{
  257. position: absolute;
  258. width:100%;
  259. height:11px;
  260. left:;
  261. bottom:9px;
  262. text-align:center;
  263. font-size:0px;
  264. }
  265.  
  266. .points li{
  267. width:11px;
  268. height:11px;
  269. display:inline-block;
  270. background-color: #9f9f9f;
  271. margin:0 5px;
  272. /*设置圆角,半径为高度的一半*/
  273. border-radius:50%;
  274. cursor:pointer;
  275. }
  276.  
  277. .points .active{
  278. background-color: #cecece;
  279. }
  280.  
  281. .adv{
  282. width:240px;
  283. height:270px;
  284. }
  285. .adv a{
  286. float:left;
  287. width:240px;
  288. height:135px;
  289. }
  290.  
  291. /*解决图片下方3像素白边的情况*/
  292. .adv a img{
  293. display:block;
  294. }
  295.  
  296. .common_model{
  297. width:1200px;
  298. height:340px;
  299. margin:18px auto 0;
  300. }
  301.  
  302. .common_title{
  303. height:38px;
  304. border-bottom: 2px solid #42ad46;
  305. }
  306.  
  307. .common_model h3{
  308. font:bold 16px/38px 'Microsoft YaHei UI';
  309. color:#37ab40;
  310. }
  311.  
  312. .common_model .common_title ul{
  313. height:12px;
  314. margin:13px 0 0 20px;
  315. }
  316.  
  317. .common_model .common_title li{
  318. float:left;
  319. margin:0 10px;
  320. }
  321.  
  322. .common_model .common_title li a{
  323. /*微软雅黑默认有行高*/
  324. color:#666;
  325. }
  326.  
  327. .common_model .common_title li a:hover{
  328. color:#f80;
  329. }
  330.  
  331. .common_model .common_title .more{
  332. height:38px;
  333. line-height:38px;
  334. color:#666;
  335. }
  336.  
  337. .common_model .common_title .more:hover{
  338. color:#f80;
  339. }
  340.  
  341. .common_model .common_goods_list{
  342. height:300px;
  343. width:1200px;
  344. }
  345.  
  346. .common_model .common_goods_list .goods_banner{
  347. width:200px;
  348. height:300px;
  349. }
  350.  
  351. .common_model .common_goods_list .good_list{
  352. width:1000px;
  353. height:300px;
  354. }
  355.  
  356. .common_model .common_goods_list .good_list li{
  357. width:249px;
  358. height:299px;
  359. border-right:1px solid #ededed;
  360. border-bottom:1px solid #ededed;
  361. float:left;
  362. }
  363.  
  364. .common_goods_list .good_list li:hover{
  365. width:248px;
  366. height:298px;
  367. border:1px solid #ff0;
  368. }
  369.  
  370. .common_goods_list .good_list li h4{
  371. height:52px;
  372. font:14px/52px 'Microsoft YaHei UI';
  373. color:#666;
  374. text-align:center;
  375. }
  376.  
  377. .common_goods_list .good_list li a{
  378. display:block;
  379. height:180px;
  380. width:180px;
  381. margin:0 auto;
  382. }
  383.  
  384. .common_goods_list .good_list li p{
  385. height:52px;
  386. font:bold 20px/52px 'Microsoft YaHei UI';
  387. color:#c40000;
  388. text-align: center;
  389. }
  390.  
  391. .footer{
  392. height:145px;
  393. border-top:2px solid #4ab14e;
  394. margin-top:30px;
  395. }
  396.  
  397. .footer .links{
  398. text-align:center;
  399. /*有边框就没有margin-top塌陷了*/
  400. margin-top:40px;
  401. }
  402.  
  403. .footer .links a{
  404. color:#4e4e4e;
  405. }
  406.  
  407. .footer .links a:hover{
  408. color:#f80;
  409. }
  410.  
  411. .footer .links span{
  412. color:#4e4e4e;
  413. margin:0 10px;
  414. }
  415.  
  416. .footer p{
  417. text-align: center;
  418. line-height:27px;
  419. color:#4e4e4e;
  420. margin-top:10px;
  421. }

reset.css:

  1. /*不要用网上现成的,不用的标签不要写,会影响性能,标签组选择器*/
  2. body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{
  3. margin:;
  4. padding:;
  5. }
  6.  
  7. /*让h标签继承body类设置的字体大小*/
  8. h1,h2,h3,h4,h5,h6{
  9. font-size:100%;
  10. }
  11.  
  12. /*去掉默认. 标签选择器*/
  13. ul{
  14. list-style: none;
  15. }
  16.  
  17. /*不倾斜*/
  18. em{
  19. font-style:normal;
  20. }
  21.  
  22. /*去掉下划线*/
  23. a{
  24. text-decoration:none;
  25. }
  26.  
  27. /*去掉IE下,图片做链接时产生的边框*/
  28. img{
  29. border:none;
  30. }
  31.  
  32. /*清除margin-top塌陷和清除浮动*/
  33. .clearfix:before, .clearfix:after{
  34. content:"";
  35. /*一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局,
  36. 使我们能够轻松定义一个单元格的边界、背景等样式,
  37. 而不会产生因为使用了table那样的制表标签所导致的语义化问题。*/
  38. display:table;
  39. }
  40.  
  41. .clearfix:after{
  42. /*清除左右两边浮动*/
  43. clear:both;
  44. }
  45.  
  46. .clearfix{
  47. zoom:;
  48. }
  49.  
  50. .fl{
  51. float:left;
  52. }
  53.  
  54. .fr{
  55. float:right;
  56. }

slide.js:

  1. $(function () {
  2.  
  3. var $li = $('.slide_con .slide li');
  4. var len = $li.length;
  5. var $prev = $('.prev');
  6. var $next = $('.next');
  7. var timer = null;
  8.  
  9. //将要运动过来的li
  10. var nowli = 0;
  11. //当前要离开的li
  12. var prevli = 0;
  13.  
  14. //除了第一个li,其他的li放到右边
  15. $li.not(':first').css({left:760})
  16.  
  17. $li.each(function (index) {
  18. // 选择li:var $sli = $('li');
  19. // 创建li:var $sli = $('<li>')
  20. var $sli = $('<li>');
  21. if(index==0)
  22. {
  23. $sli.addClass('active');
  24. }
  25. //将创建的li增加到points类中
  26. $sli.appendTo('.points');
  27.  
  28. });
  29.  
  30. var $points = $('.points li');
  31.  
  32. $points.click(function () {
  33. nowli = $(this).index();
  34. if(nowli==prevli){return;}
  35. move();
  36. $(this).addClass('active').siblings().removeClass('active');
  37. })
  38.  
  39. $prev.click(function () {
  40. nowli--;
  41. move();
  42. $points.eq(nowli).addClass('active').siblings().removeClass('active');
  43. })
  44.  
  45. $next.click(function () {
  46. nowli++;
  47. move();
  48. $points.eq(nowli).addClass('active').siblings().removeClass('active');
  49. })
  50.  
  51. //鼠标放在幻灯片处时停止播放,鼠标离开时继续播放
  52. $('.slide_con').mouseenter(function(event){
  53. clearInterval(timer);
  54. });
  55.  
  56. $('.slide_con').mouseleave(function () {
  57. timer = setInterval(autoplay,4000);
  58. })
  59.  
  60. //自动播放
  61. //函数没有括号!
  62. timer = setInterval(autoplay,4000);
  63.  
  64. function autoplay() {
  65. nowli++;
  66. move();
  67. $points.eq(nowli).addClass('active').siblings().removeClass('active');
  68. }
  69.  
  70. function move(){
  71. if(nowli<0){
  72. nowli = len-1;
  73. prevli = 0;
  74.  
  75. $li.eq(nowli).css({left:-760});
  76. //点的很快得时候会有bug,stop()用来解决这个bug
  77. $li.eq(prevli).stop().animate({left:760});
  78. $li.eq(nowli).stop().animate({left:0});
  79. prevli = nowli;
  80. //停止进行下面的if判断
  81. return;
  82. }
  83.  
  84. if(nowli>len-1){
  85. nowli = 0;
  86. prevli = len-1;
  87.  
  88. $li.eq(nowli).css({left:760});
  89. $li.eq(prevli).stop().animate({left:-760});
  90. $li.eq(nowli).stop().animate({left:0});
  91. prevli = nowli;
  92. return;
  93. }
  94.  
  95. if(nowli>prevli){
  96. $li.eq(nowli).css({left:760});
  97. $li.eq(prevli).stop().animate({left:-760});
  98. }
  99. else {
  100. $li.eq(nowli).css({left:-760});
  101. $li.eq(prevli).stop().animate({left:760});
  102. }
  103. $li.eq(nowli).stop().animate({left:0});
  104. prevli = nowli;
  105. }
  106. })

jquery——幻灯片(只动一屏)的更多相关文章

  1. 基于jQuery的网站首页宽屏焦点图幻灯片

    今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  2. 基于bootstrup3全屏宽度的响应式jQuery幻灯片特效

    这是一款效果非常酷的基于Bootstrup3.x和HTML5的响应式全屏宽度jQuery幻灯片特效.该幻灯片能自适应屏幕的宽度,使用HTML5的data属性来指定幻灯片所需的各种属性.使用简单,界面美 ...

  3. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  4. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  5. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  6. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. 60款很酷的 jQuery 幻灯片演示和下载【转】

    jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...

  8. 强大实用的jQuery幻灯片插件Owl Carousel

    演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...

  9. jQuery幻灯片插件Owl Carousel

    简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...

随机推荐

  1. http之pragma

    关于Pragma:no-cache,跟Cache-Control: no-cache相同.Pragma: no-cache兼容http 1.0 ,Cache-Control: no-cache是htt ...

  2. js变量和函数提升的小结

    对于变量和函数一起的提升说法,我比较认同"LittleBear"的说法. 比如: <script> console.log(a)//function a(){} var ...

  3. 浅谈双流水线调度问题以及Jhonson算法

    引入:何为流水线问题 有\(n\)个任务,对于每个任务有\(m\)道工序,每个任务的\(m\)道工序必须在不同的m台机器上依次完成才算把这个任务完成,在前\(i-1\)道工序完成后才能去完成第\(i\ ...

  4. 统计不同的单词(map应用)

    题目描述: 输入一些单词,找出所有满足如下条件的单词:该单词不能通过字母重排,得到输入文本中的另一个单词.在判断是否满足条件时,字母不区分大小写,但在输出时应保留输入中的大小写,按字典序进行排列(所有 ...

  5. netty中的ByteBuf

    网络数据的基本单位总是字节.Java NIO 提供了 ByteBuffer 作为它 的字节容器,但是这个类使用起来过于复杂,而且也有些繁琐. Netty 的 ByteBuffer 替代品是 ByteB ...

  6. 杂项-权限管理:Spring Secutity

    ylbtech-杂项-权限管理:Spring Secutity Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在S ...

  7. TS学习之解构与展开

    一.解构 1.解构数组 let input = [1, 2]; let [first, second] = input; console.log(first); // outputs 1 consol ...

  8. python 基础 字典生成式

    dict1 = {1:2,3:4,6:7,9:10} print dict((v,k) for k,v in dict.items()) 结果 {2:1.4:3,10:9,7:6} res = [{' ...

  9. Intent的简单概述

    Intent是负责在系统组件之间传递信息的一个对象,就像名字一样,是一个意图,可以将当前组件的意图传递给系统,例如启动Activity等,还可以在传递的时候附加上一些值,可以用Bundle对象封装这些 ...

  10. Java 常见注解

    @Retention 1.RetentionPolicy.SOURCE —— 这种类型的Annotations只在源代码级别保留,编译时就会被忽略2.RetentionPolicy.CLASS —— ...