jquery.imgscroll.min.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584
  1. /* Copyright (c) 2014 xcsoft.cn(http://www.xcsoft.cn)
  2. * Author:Xiucheng Yang
  3. * Version: 2.6.0
  4. * MyQQ:549642084
  5. * LastUpdateTime:2014-11-08
  6. * Used Url:http://www.xcsoft.cn/article/411.html
  7. *
  8. */
  9. var imgScroll = {
  10. fspeed: 1E3,
  11. aspeed: 5E3,
  12. gradual: function(b, e, c) {
  13. function m() {
  14. d > r - 1 && (d = 0);
  15. imgScroll.myGradual(a, d, {
  16. imginfo: s,
  17. direction: k,
  18. height: p,
  19. speed: h,
  20. descli: f,
  21. infoli: g
  22. });
  23. d++
  24. }
  25. var a = b.name,
  26. l, d = 1;
  27. c = 0 == b.addcss ? 0 : 1;
  28. e = e ? e: imgScroll.aspeed;
  29. var h = b.speed ? b.speed: 100,
  30. f = $("." + a + ">.imgdesc li").length,
  31. g = $("." + a + ">.imginfo li").length,
  32. r = $("." + a + ">.imglist li").length;
  33. 1 == c && ($("." + a).css({
  34. position: "relative",
  35. overflow: "hidden",
  36. width: b.width,
  37. height: b.height
  38. }), $("." + a).find(".imglist li,.imglist img").css({
  39. width: b.width,
  40. height: b.height
  41. }), $("." + a).find(".imglist li").css({
  42. position: "absolute"
  43. }), $("." + a + ">.imglist").css({
  44. position: "absolute"
  45. }), (0 < $("." + a + ">.pre").length || 0 < $("." + a + ">.next").length) && $("." + a + ">.pre,." + a + ">.next").css({
  46. position: "absolute"
  47. }));
  48. if (0 < g) {
  49. $("." + a + ">.imginfo,." + a + ">.imginfo li").css({
  50. position: "absolute"
  51. });
  52. var s = b.showinfo ? b.showinfo: "gradual",
  53. k = b.infodirection ? b.infodirection: "bottom",
  54. p = "left" == k || "right" == k ? $("." + a + ">.imginfo").width() : $("." + a + ">.imginfo").height();
  55. 1 == c && $("." + a + ">.imginfo,." + a + ">.imginfo li").css({
  56. position: "absolute"
  57. });
  58. if ("gradual" == s) $("." + a + ">.imginfo li:gt(0)").fadeTo(0, 0);
  59. else switch (k) {
  60. case "left":
  61. $("." + a + ">.imginfo li:gt(0)").css({
  62. left: "-" + p + "px"
  63. });
  64. break;
  65. case "top":
  66. $("." + a + ">.imginfo li:gt(0)").css({
  67. top: "-" + p + "px"
  68. });
  69. break;
  70. case "right":
  71. $("." + a + ">.imginfo li:gt(0)").css({
  72. right: "-" + p + "px"
  73. });
  74. break;
  75. case "bottom":
  76. $("." + a + ">.imginfo li:gt(0)").css({
  77. bottom: "-" + p + "px"
  78. })
  79. }
  80. }
  81. 0 < f && (1 == c && $("." + a + ">.imgdesc").css({
  82. position: "absolute"
  83. }), $("." + a + ">.imgdesc li:eq(0)").addClass("hover"));
  84. $("." + a + ">.imglist li:gt(0)").fadeTo(0, 0);
  85. imgScroll.addDataIndex(a, 0);
  86. l = setInterval(function() {
  87. m()
  88. },
  89. e);
  90. $("." + a + ">.imgdesc li").hover(function() {
  91. clearInterval(l);
  92. var b = $(this).index();
  93. d = b + 1;
  94. imgScroll.myGradual(a, b, {
  95. imginfo: s,
  96. direction: k,
  97. height: p,
  98. speed: h,
  99. descli: f,
  100. infoli: g
  101. })
  102. },
  103. function() {
  104. l = setInterval(function() {
  105. m()
  106. },
  107. e)
  108. });
  109. $("." + a + ">.imglist li img,." + a + " .pre,." + a + " .next").hover(function() {
  110. clearInterval(l)
  111. },
  112. function() {
  113. l = setInterval(function() {
  114. m()
  115. },
  116. e)
  117. });
  118. $("." + a + " .pre").click(function(b) {
  119. b = imgScroll.getDataIndex(a);
  120. d = parseInt(b - 1);
  121. 0 > d && (d = r - 1);
  122. imgScroll.myGradual(a, d, {
  123. imginfo: s,
  124. direction: k,
  125. height: p,
  126. speed: h,
  127. descli: f,
  128. infoli: g
  129. });
  130. d++
  131. });
  132. $("." + a + " .next").click(function(b) {
  133. d > r - 1 && (d = 0);
  134. imgScroll.myGradual(a, d, {
  135. imginfo: s,
  136. direction: k,
  137. height: p,
  138. speed: h,
  139. descli: f,
  140. infoli: g
  141. });
  142. d++
  143. })
  144. },
  145. scroll: function(b, e, c) {
  146. function m() {
  147. if (h > k - 1 || f <= -(n * k - n)) h = 0,
  148. f = n;
  149. f -= n;
  150. imgScroll.myScroll(a, h, l, f, c, k, {
  151. imginfo: u,
  152. direction: t,
  153. height: q,
  154. speed: r,
  155. descli: p,
  156. infoli: v
  157. });
  158. h++
  159. }
  160. var a = b.name,
  161. l = b.direction ? b.direction: "left",
  162. d,
  163. h = 1,
  164. f = 0,
  165. g = 0 == b.addcss ? 0 : 1,
  166. r = b.speed ? b.speed: 100;
  167. c = c ? c: imgScroll.fspeed;
  168. var s = e ? e: imgScroll.aspeed,
  169. k = $("." + a + ">.imglist li").length,
  170. p = $("." + a + ">.imgdesc li").length,
  171. v = $("." + a + ">.imginfo li").length;
  172. 1 == g && ($("." + a).css({
  173. position: "relative",
  174. overflow: "hidden",
  175. width: b.width,
  176. height: b.height
  177. }), $("." + a).find(".imglist li,.imglist img").css({
  178. width: b.width,
  179. height: b.height
  180. }), (0 < $("." + a + ">.pre").length || 0 < $("." + a + ">.next").length) && $("." + a + ">.pre,." + a + ">.next").css({
  181. position: "absolute"
  182. }), $("." + a + ">.imglist").css({
  183. position: "absolute"
  184. }));
  185. switch (l) {
  186. case "left":
  187. var n = $("." + a + ">.imglist li:first img").width();
  188. 1 == g && $("." + a + ">.imglist li").css({
  189. "float": "left",
  190. position: "relative"
  191. });
  192. $("." + a + ">.imglist").css({
  193. left: f + "px",
  194. width: k * n + "px"
  195. });
  196. break;
  197. case "right":
  198. n = $("." + a + ">.imglist li:first img").width();
  199. 1 == g && $("." + a + ">.imglist li").css({
  200. "float": "left",
  201. position: "relative"
  202. });
  203. $("." + a + ">.imglist").css({
  204. right: f + "px",
  205. width: k * n + "px"
  206. });
  207. break;
  208. case "top":
  209. n = $("." + a + ">.imglist li:first img").height();
  210. 1 == g && $("." + a + ">.imglist li").css({
  211. position: "relative"
  212. });
  213. $("." + a + ">.imglist").css({
  214. top: f + "px",
  215. height: k * n + "px"
  216. });
  217. break;
  218. case "bottom":
  219. n = $("." + a + ">.imglist li:first img").height(),
  220. 1 == g && $("." + a + ">.imglist li").css({
  221. position: "relative"
  222. }),
  223. $("." + a + ">.imglist").css({
  224. bottom: f + "px",
  225. height: k * n + "px"
  226. })
  227. }
  228. if (0 < v) {
  229. var u = b.showinfo ? b.showinfo: "gradual",
  230. t = b.infodirection ? b.infodirection: "bottom",
  231. q = "left" == t || "right" == t ? $("." + a + ">.imginfo").width() : $("." + a + ">.imginfo").height();
  232. 1 == g && $("." + a + ">.imginfo,." + a + ">.imginfo li").css({
  233. position: "absolute"
  234. });
  235. if ("bottom" == l || "right" == l) if ("gradual" == u) $("." + a + ">.imginfo li:lt(" + (k - 1) + ")").fadeTo(0, 0);
  236. else switch (t) {
  237. case "bottom":
  238. $("." + a + ">.imginfo li:lt(" + (k - 1) + ")").css({
  239. bottom: "-" + q + "px"
  240. });
  241. break;
  242. case "right":
  243. $("." + a + ">.imginfo li:lt(" + (k - 1) + ")").css({
  244. right: "-" + q + "px"
  245. });
  246. break;
  247. case "left":
  248. $("." + a + ">.imginfo li:lt(" + (k - 1) + ")").css({
  249. left: "-" + q + "px"
  250. });
  251. break;
  252. case "top":
  253. $("." + a + ">.imginfo li:lt(" + (k - 1) + ")").css({
  254. top: "-" + q + "px"
  255. })
  256. } else if ("gradual" == u) $("." + a + ">.imginfo li:gt(0)").fadeTo(0, 0);
  257. else switch (t) {
  258. case "left":
  259. $("." + a + ">.imginfo li:gt(0)").css({
  260. left: "-" + q + "px"
  261. });
  262. break;
  263. case "top":
  264. $("." + a + ">.imginfo li:gt(0)").css({
  265. top: "-" + q + "px"
  266. });
  267. break;
  268. case "right":
  269. $("." + a + ">.imginfo li:gt(0)").css({
  270. right: "-" + q + "px"
  271. });
  272. break;
  273. case "bottom":
  274. $("." + a + ">.imginfo li:gt(0)").css({
  275. bottom: "-" + q + "px"
  276. })
  277. }
  278. }
  279. 0 < p && (1 == g && $("." + a + ">.imgdesc").css({
  280. position: "absolute"
  281. }), $("." + a + ">.imgdesc li:eq(0)").addClass("hover"));
  282. imgScroll.addDataIndex(a, h);
  283. d = setInterval(function() {
  284. m()
  285. },
  286. s);
  287. $("." + a + ">.imgdesc li").hover(function() {
  288. clearInterval(d);
  289. var b = $(this).index();
  290. f = b * -n;
  291. h = b + 1;
  292. imgScroll.myScroll(a, b, l, f, c, k, {
  293. imginfo: u,
  294. direction: t,
  295. height: q,
  296. speed: r,
  297. descli: p,
  298. infoli: v
  299. })
  300. },
  301. function() {
  302. d = setInterval(function() {
  303. m()
  304. },
  305. s)
  306. });
  307. $("." + a + ">.imglist li img,." + a + " .pre,." + a + " .next").hover(function() {
  308. clearInterval(d)
  309. },
  310. function() {
  311. d = setInterval(function() {
  312. m()
  313. },
  314. s)
  315. });
  316. $("." + a + " .pre").click(function(b) {
  317. h = imgScroll.getDataIndex(a) - 1;
  318. 0 >= h && 0 <= f ? (h = k - 1, f = n * -h) : f += n;
  319. imgScroll.myScroll(a, h, l, f, c, k, {
  320. imginfo: u,
  321. direction: t,
  322. height: q,
  323. speed: r,
  324. descli: p,
  325. infoli: v
  326. });
  327. h++
  328. });
  329. $("." + a + " .next").click(function(b) {
  330. h > k - 1 && (h = 0, f = n);
  331. f -= n;
  332. imgScroll.myScroll(a, h, l, f, c, k, {
  333. imginfo: u,
  334. direction: t,
  335. height: q,
  336. speed: r,
  337. descli: p,
  338. infoli: v
  339. });
  340. h += 1
  341. })
  342. },
  343. myGradual: function(b, e, c) {
  344. imgScroll.addDataIndex(b, e);
  345. $("." + b + ">.imglist li:eq(" + e + ")").siblings().stop().fadeTo(500, 0);
  346. $("." + b + ">.imglist li:eq(" + e + ")").stop().fadeTo(500, 1);
  347. 0 < c.descli && ($("." + b + ">.imgdesc li:eq(" + e + ")").siblings().removeClass("hover"), $("." + b + ">.imgdesc li:eq(" + e + ")").addClass("hover"));
  348. if (0 < c.infoli) if ("gradual" == c.imginfo) $("." + b + ">.imginfo li:eq(" + e + ")").siblings().stop().fadeTo(500, 0),
  349. $("." + b + ">.imginfo li:eq(" + e + ")").stop().fadeTo(500, 1);
  350. else switch (c.direction) {
  351. case "top":
  352. $("." + b + ">.imginfo li:eq(" + e + ")").siblings().stop().animate({
  353. top: "-" + c.height + "px"
  354. },
  355. c.speed);
  356. setTimeout(function() {
  357. $("." + b + ">.imginfo li").hide();
  358. $("." + b + ">.imginfo li:eq(" + e + ")").show().stop().animate({
  359. top: "0px"
  360. },
  361. c.speed)
  362. },
  363. c.speed / 2);
  364. break;
  365. case "left":
  366. $("." + b + ">.imginfo li:eq(" + e + ")").siblings().stop().animate({
  367. left: "-" + c.height + "px"
  368. },
  369. c.speed);
  370. setTimeout(function() {
  371. $("." + b + ">.imginfo li").hide();
  372. $("." + b + ">.imginfo li:eq(" + e + ")").show().stop().animate({
  373. left: "0px"
  374. },
  375. c.speed)
  376. },
  377. c.speed / 2);
  378. break;
  379. case "right":
  380. $("." + b + ">.imginfo li:eq(" + e + ")").siblings().stop().animate({
  381. right: "-" + c.height + "px"
  382. },
  383. c.speed);
  384. setTimeout(function() {
  385. $("." + b + ">.imginfo li").hide();
  386. $("." + b + ">.imginfo li:eq(" + e + ")").show().stop().animate({
  387. right: "0px"
  388. },
  389. c.speed)
  390. },
  391. c.speed / 2);
  392. break;
  393. case "bottom":
  394. $("." + b + ">.imginfo li:eq(" + e + ")").siblings().stop().animate({
  395. bottom: "-" + c.height + "px"
  396. },
  397. c.speed),
  398. setTimeout(function() {
  399. $("." + b + ">.imginfo li").hide();
  400. $("." + b + ">.imginfo li:eq(" + e + ")").show().stop().animate({
  401. bottom: "0px"
  402. },
  403. c.speed)
  404. },
  405. c.speed / 2)
  406. }
  407. },
  408. myScroll: function(b, e, c, m, a, l, d) {
  409. imgScroll.addDataIndex(b, e);
  410. 0 < d.descli && ($("." + b + ">.imgdesc li:eq(" + e + ")").siblings().removeClass("hover"), $("." + b + ">.imgdesc li:eq(" + e + ")").addClass("hover"));
  411. if (0 < d.infoli) if (textindex = "right" == c || "bottom" == c ? parseInt(l - 1 - e) : e, "gradual" == d.imginfo) $("." + b + ">.imginfo li:eq(" + textindex + ")").siblings().stop().fadeTo(500, 0),
  412. $("." + b + ">.imginfo li:eq(" + textindex + ")").stop().fadeTo(500, 1);
  413. else switch (d.direction) {
  414. case "top":
  415. $("." + b + ">.imginfo li:eq(" + textindex + ")").siblings().stop().animate({
  416. top: "-" + d.height + "px"
  417. },
  418. d.speed);
  419. setTimeout(function() {
  420. $("." + b + ">.imginfo li").hide();
  421. $("." + b + ">.imginfo li:eq(" + textindex + ")").show().stop().animate({
  422. top: "0px"
  423. },
  424. d.speed)
  425. },
  426. d.speed / 2);
  427. break;
  428. case "left":
  429. $("." + b + ">.imginfo li:eq(" + textindex + ")").siblings().stop().animate({
  430. left: "-" + d.height + "px"
  431. },
  432. d.speed);
  433. setTimeout(function() {
  434. $("." + b + ">.imginfo li").hide();
  435. $("." + b + ">.imginfo li:eq(" + textindex + ")").show().stop().animate({
  436. left: "0px"
  437. },
  438. d.speed)
  439. },
  440. d.speed / 2);
  441. break;
  442. case "right":
  443. $("." + b + ">.imginfo li:eq(" + textindex + ")").siblings().stop().animate({
  444. right: "-" + d.height + "px"
  445. },
  446. d.speed);
  447. setTimeout(function() {
  448. $("." + b + ">.imginfo li").hide();
  449. $("." + b + ">.imginfo li:eq(" + textindex + ")").show().stop().animate({
  450. right: "0px"
  451. },
  452. d.speed)
  453. },
  454. d.speed / 2);
  455. break;
  456. case "bottom":
  457. $("." + b + ">.imginfo li:eq(" + textindex + ")").siblings().stop().animate({
  458. bottom: "-" + d.height + "px"
  459. },
  460. d.speed),
  461. setTimeout(function() {
  462. $("." + b + ">.imginfo li").hide();
  463. $("." + b + ">.imginfo li:eq(" + textindex + ")").show().stop().animate({
  464. bottom: "0px"
  465. },
  466. d.speed)
  467. },
  468. d.speed / 2)
  469. }
  470. switch (c) {
  471. case "left":
  472. $("." + b + ">.imglist").stop().animate({
  473. left: m + "px"
  474. },
  475. a);
  476. break;
  477. case "right":
  478. $("." + b + ">.imglist").stop().animate({
  479. right: m + "px"
  480. },
  481. a);
  482. break;
  483. case "top":
  484. $("." + b + ">.imglist").stop().animate({
  485. top: m + "px"
  486. },
  487. a);
  488. break;
  489. case "bottom":
  490. $("." + b + ">.imglist").stop().animate({
  491. bottom: m + "px"
  492. },
  493. a)
  494. }
  495. },
  496. addDataIndex: function(b, e) {
  497. $("." + b).attr("data-index", e)
  498. },
  499. getDataIndex: function(b) {
  500. return $("." + b).attr("data-index")
  501. },
  502. rolling: function(b) {
  503. function e() {
  504. g >= l * f / 2 && ("left" == a || "top" == a) ? g = 0 : g <= l * f / 2 - h && ("right" == a || "bottom" == a) && (g = l * f - h);
  505. switch (a) {
  506. case "left":
  507. c.find("ul").animate({
  508. left:
  509. "-" + g + "px"
  510. },
  511. 0);
  512. g += 1;
  513. break;
  514. case "top":
  515. c.find("ul").animate({
  516. top:
  517. "-" + g + "px"
  518. },
  519. 0);
  520. g += 1;
  521. break;
  522. case "right":
  523. c.find("ul").animate({
  524. left:
  525. "-" + g + "px"
  526. },
  527. 0);
  528. g -= 1;
  529. break;
  530. case "bottom":
  531. c.find("ul").animate({
  532. top:
  533. "-" + g + "px"
  534. },
  535. 0),
  536. g -= 1
  537. }
  538. }
  539. var c = $("." + b.name),
  540. m = 0 == b.addcss ? 0 : 1,
  541. a = b.direction ? b.direction: "left";
  542. c.find("ul").append(c.find("ul").html());
  543. var l = c.find("ul>li").length,
  544. d = b.speed ? b.speed: 40;
  545. 1 == m && (c.css({
  546. overflow: "hidden"
  547. }), c.find("ul").css({
  548. position: "relative"
  549. }), c.find("ul>li,ul>li>img").css({
  550. width: b.width,
  551. height: b.height
  552. }), c.find("ul>li").css({
  553. "float": "left"
  554. }));
  555. if ("left" == a || "right" == a) {
  556. var h = c.width(),
  557. f = c.find("ul>li:first").width(),
  558. g = "left" == a ? 0 : l * f - h;
  559. 1 == m && c.find("ul").css({
  560. width: l * f + "px",
  561. height: c.find("ul>li:first").height()
  562. })
  563. } else h = c.height(),
  564. f = c.find("ul>li:first").height(),
  565. g = "top" == a ? 0 : l * f - h,
  566. 1 == m && c.find("ul").css({
  567. height: l * f + "px",
  568. width: c.find("ul>li:first").width()
  569. });
  570. var r = setInterval(function() {
  571. e()
  572. },
  573. d);
  574. c.find("ul>li").hover(function() {
  575. clearInterval(r)
  576. },
  577. function() {
  578. r = setInterval(function() {
  579. e()
  580. },
  581. d)
  582. })
  583. }
  584. };