效果预览:
(暂无)
html代码:
1 <div id="focus"> 2 <ul> 3 <li> 4 <a href="#"><img src="images/index2013/jdt.gif" /> </a> 5 </li> 6 <li> 7 <a href="#"><img src="images/index2013/jdt.gif" /> </a> 8 </li> 9 <li> 10 <a href="#"><img src="images/index2013/jdt.gif" /> </a> 11 </li> 12 </ul> 13 </div>
js代码:
1 <script type="text/javascript" 2 src="http://lib.sinaapp.com/js/jquery/1.6/jquery.js "></script> 3 <script type="text/javascript"> 4 $(document).ready(function() { 5 slide(); 6 }); 7 function slide() { 8 var focusDivName = "#focus";//焦点图所在div的id 9 var sWidth = $(focusDivName).width(); // 获取焦点图的宽度(显示面积) 10 var len = $(focusDivName + " ul li").length; // 获取焦点图个数 11 var index = 0; 12 var picTimer; 13 14 // 以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮 15 var btn = "<div class='btnBg'></div><div class='btn'>"; 16 for ( var i = 0; i < len; i++) { 17 btn += "<span></span>"; 18 } 19 btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>"; 20 $(focusDivName).append(btn); 21 $(focusDivName + " .btnBg").css("opacity", 0.0); 22 23 // 为小按钮添加鼠标滑入事件,以显示相应的内容 24 $(focusDivName + " .btn span").css("opacity", 0.4).mouseover( 25 function() { 26 index = $(focusDivName + " .btn span").index(this); 27 showPics(index); 28 }).eq(0).trigger("mouseover"); 29 30 // 上一页、下一页按钮透明度处理 31 $(focusDivName + " .preNext").css("opacity", 0.2).hover(function() { 32 $(this).stop(true, false).animate({ 33 "opacity" : "0.5" 34 }, 300); 35 }, function() { 36 $(this).stop(true, false).animate({ 37 "opacity" : "0.2" 38 }, 300); 39 }); 40 41 // 上一页按钮 42 $(focusDivName + " .pre").click(function() { 43 index -= 1; 44 if (index == -1) { 45 index = len - 1; 46 } 47 showPics(index); 48 }); 49 50 // 下一页按钮 51 $(focusDivName + " .next").click(function() { 52 index += 1; 53 if (index == len) { 54 index = 0; 55 } 56 showPics(index); 57 }); 58 59 // 本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度 60 $(focusDivName + " ul").css("width", sWidth * (len)); 61 62 // 鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 63 $(focusDivName).hover(function() { 64 clearInterval(picTimer); 65 }, function() { 66 picTimer = setInterval(function() { 67 showPics(index); 68 index++; 69 if (index == len) { 70 index = 0; 71 } 72 }, 4000); // 此4000代表自动播放的间隔,单位:毫秒 73 }).trigger("mouseleave"); 74 75 // 显示图片函数,根据接收的index值显示相应的内容 76 function showPics(index) { // 普通切换 77 var nowLeft = -index * sWidth; // 根据index值计算ul元素的left值 78 $(focusDivName + " ul").stop(true, false).animate({ 79 "left" : nowLeft 80 }, 300); // 通过animate()调整ul元素滚动到计算出的position 81 // //为当前的按钮切换到选中的效果 82 $(focusDivName + " .btn span").stop(true, false).animate({ 83 "opacity" : "0.4" 84 }, 300).eq(index).stop(true, false).animate({ 85 "opacity" : "1" 86 }, 300); // 为当前的按钮切换到选中的效果 87 } 88 }; 89 </script>
css代码:
1 ul,li { 2 list-style: none; 3 } 4 5 img { 6 border: 0; 7 } 8 9 .wrapper { 10 width: 625px; 11 margin: 0 auto; 12 padding-bottom: 50px; 13 } 14 15 h1 { 16 height: 50px; 17 line-height: 50px; 18 font-size: 22px; 19 font-weight: normal; 20 font-family: "Microsoft YaHei", SimHei; 21 margin-bottom: 20px; 22 } 23 24 /* focus */ 25 #focus { 26 width: 625px; 27 height: 220px; 28 overflow: hidden; 29 position: relative; 30 } 31 32 #focus ul { 33 z-index: 0; 34 height: 220px; 35 position: absolute; 36 padding-left: 0px; 37 } 38 39 #focus ul li { 40 float: left; 41 width: 625px; 42 height: 220px; 43 overflow: hidden; 44 position: relative; 45 background: #000; 46 } 47 48 #focus ul li div { 49 position: absolute; 50 overflow: hidden; 51 } 52 53 #focus .btnBg { 54 position: absolute; 55 width: 625px; 56 height: 20px; 57 left: 0; 58 bottom: 0; 59 background: #000; 60 } 61 62 #focus .btn { 63 position: absolute; 64 width: 625px; 65 height: 10px; 66 padding: 5px 10px; 67 right: 0; 68 bottom: 0; 69 text-align: right; 70 } 71 72 #focus .btn span { 73 display: inline-block; 74 _display: inline; 75 _zoom: 1; 76 width: 25px; 77 height: 10px; 78 _font-size: 0; 79 margin-left: 5px; 80 cursor: pointer; 81 background: #fff; 82 } 83 84 #focus .btn span.on { 85 background: #fff; 86 } 87 88 #focus .preNext { 89 width: 45px; 90 height: 100px; 91 position: absolute; 92 top: 60px; 93 background: url(images/index2013/sprite.png) no-repeat 0 0; 94 cursor: pointer; 95 } 96 97 #focus .pre { 98 left: 0; 99 } 100 101 #focus .next { 102 right: 0; 103 background-position: right top; 104 }