Jquery实例教程:幻灯片图片的特效代码
http://www.itjxue.com 2015-08-06 23:00 来源:未知 点击次数:
好了，几天没有写博客了，今天就来用JQ弄一个简单的banner。
先看下效果图：
好了，最终效果就是上图所示：
列一下所带的功能：
①自动运行
②鼠标放在小图上会自动滚到对应的大图上(这个是废话)
③鼠标离开后保存当前的顺序继续执行（但愿你能理解这个的意思）
如果你想看效果：请狠狠的撞击这里
好了，进入正题：
先看下HTML：
接下来上CSS（PS：这个CSS写的有点草率，见谅~）：
接下来就是关键了jQuery代码：
最后附上完整的代码：
view sourceprint? 01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 02.<html xmlns="http://www.w3.org/1999/xhtml"> 03.<head> 04.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 05.<title>DEMO 2012-10-18</title> 06.<style type="text/css"> 07.* {padding:0; margin:0} 08.ul, li {list-style:none} 09.body {font-size:12px; color:#333} 10..fl {float:left} 11..cf {zoom:1} 12..cf:after {clear:both; content:"."; display:block; height:0; visibility:hidden} 13..banner {padding:5px; border-right:1px solid #EFEFEF} 14..banner img {border:0 none} 15..img_wrap {width:190px; height:270px; overflow:hidden;} 16..img_b {position:relative} 17..img_b li {width:190px; height:270px; overflow:hidden} 18..img_s {padding:0 0 0 5px} 19..img_s li {margin:0 0 1px 0;width:49px; height:64px; padding:2px 1px 1px 5px;} 20..img_s li img {width:42px; height:60px} 21..img_s li.hover {background:url(/demo/pic/bsbg.jpg) no-repeat} 22.</style> 23.</head> 24. 25.<body> 26. 27.<div class="banner"> 28. <div class="cf"> 29. <div class="img_wrap fl"> 30. <ul class="img_b"> 31. <li><a href="#"><img src="/demo/pic/banner_a.jpg" alt="" width="190" height="270" /></a></li> 32. <li><a href="#"><img src="/demo/pic/banner_b.jpg" alt="" width="190" height="270" /></a></li> 33. <li><a href="#"><img src="/demo/pic/banner_c.jpg" alt="" width="190" height="270" /></a></li> 34. <li><a href="#"><img src="/demo/pic/banner_d.jpg" alt="" width="190" height="270" /></a></li> 35. </ul> 36. </div> 37. <ul class="fl img_s"> 38. <li class="hover"><a href="#"><img src="/demo/pic/banner_a.jpg" alt="" /></a></li> 39. <li><a href="#"><img src="/demo/pic/banner_b.jpg" alt="" /></a></li> 40. <li><a href="#"><img src="/demo/pic/banner_c.jpg" alt="" /></a></li> 41. <li><a href="#"><img src="/demo/pic/banner_d.jpg" alt="" /></a></li> 42. </ul> 43. </div> 44.</div> 45. 46.<script type="text/javascript" src="jquery-1.8.1.min.js"></script> 47.<script type="text/javascript"> 48. var cur = 0; //用来存储当前的顺序，也就是运行第几个帧banner 49. var runTimer = setInterval(autoRun, 3000); //每过3秒知道执行 50. 51. $(document).ready(function(){ 52. $(".img_s").find("li").each(function(index){ 53. $(this).hover(function(){ 54. clearInterval(runTimer); //清除runTimer 55. $(this).addClass("hover").siblings("li").removeClass("hover"); //不解释 56. var mt = 270*index; //运算top的值 57. $(".img_b").stop(true,false).animate({top:"-"+mt+"px"},500); //不用解释吧？ 58. cur = index; //把当前index保存在cur中 59. },function(){ 60. runTimer = setInterval(autoRun, 3000); //鼠标离开时，继续自动执行 61. }) 62. }); 63. }); 64. 65. /* 自动执行的代码 */ 66. function autoRun(){ 67. $(".img_s").find("li").eq(cur).addClass("hover").siblings("li").removeClass("hover"); 68. var mt = 270*cur 69. $(".img_b").stop(true,false).animate({top:"-"+mt+"px"},500); 70. cur++; 71. cur = cur < $(".img_s").find("li").size() ? cur : 0; //判断是否小于banner帧数，不是的话就赋值为0 72. } 73.</script> 74.</body> 75.</html>如果有没看懂哒，或者好的建议，欢迎留言~ 0.0