html: |
<div class= "flash" > |
<div class= "pic_box" > |
<div id= "imgshow" > |
<div id= "img01" ><a href= "javascript:void(0)" target= "_blank" ><img src= "/images/ZZZ_01.jpg" alt= "焦点图" /></a></div> |
<div id= "img02" ><a href= "javascript:void(0)" target= "_blank" ><img src= "/images/xuanchuan_02.jpg" alt= "焦点图" /></a></div> |
<div id= "img03" ><a href= "javascript:void(0)" target= "_blank" ><img src= "/images/shijian_03.jpg" alt= "焦点图" /></a></div> |
</div> |
<div class= "dot" > |
<a href= "javascript:void(0)" target= "_blank" num= "img01" class= "current" ></a> |
<a href= "javascript:void(0)" target= "_blank" num= "img02" ></a> |
<a href= "javascript:void(0)" target= "_blank" num= "img03" ></a> |
</div> |
</div> |
</div> |
CSS: |
.flash{ width : 100% ; height : 400px ; border-bottom : 1px solid #D9D5D5 ; margin : 0px 0 10px ;} |
.flash .pic_box{ width : 100% ; height : 400px ; margin : 0 auto ; overflow : hidden ; position : relative ; background : url (/images/loading.gif) no-repeat center center ;} |
.flash .pic_box #img 03 { background : #fc0 ; text-align : center ;} |
.flash .pic_box #img 02 { background : #2D2D2D ; text-align : center ;} |
.flash .pic_box #img 01 { background : #C80C26 ; text-align : center ;} |
.flash .pic_box img{ width : 960px ; height : 400px ;} |
.flash .pic_box .dot{ position : absolute ; bottom : 15px ; text-align : center ; width : 100% ;} |
.flash .pic_box .dot a{ width : 20px ; height : 15px ; display :inline- block ; background : url (/images/dot 0114 .png) no-repeat 2px -2px ; _background : none ;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= "/images/dot0114.png" ,sizingMethod= "crop" );} |
.flash .pic_box .dot a:hover,.flash .pic_box .dot a.current{ background-position : -18px -2px ;} |
JS: |
//焦点图: |
function slide(n) { |
if (n >= $( ".dot a" ).length) { |
n = 0 ; |
} |
|
$( "#imgshow div" ).eq(n).fadeIn().siblings().fadeOut(); |
$( ".dot a" ).eq(n++).addClass( "current" ).siblings().removeClass( "current" ); |
t = setTimeout( 'slide(' + n + ')' , 3000 ); |
} |
$(function () { |
slide( 0 ); |
$( ".dot a" ).hover(function () { |
clearTimeout(t); |
slide($(this).index()); |
}); |
}) |