轮播图片效果

 

html

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title ></ title >
< script type = " text/javascript " src = " js/jquery-1.3.2-vsdoc.js " ></ script >
< script type = " text/javascript " src = " js/jquery-1.3.2.js " ></ script >

<link type="text/css" href="css/play.css" rel="Stylesheet" /> </ head >
< body >
< div id = " play " >
< div id = " play_bg " ></ div >
< div id = " play_info " ></ div >
< div id = " play_text " >
< ul >
< li > 1 </ li >
< li > 2 </ li >
< li > 3 </ li >
< li > 4 </ li >
</ ul >
</ div >
< div id = " play_list " >
< a href = " # " target = " _blank " >< img src = " image/B00000040.jpg " title = " 第一幅图 " alt = " 第一幅图 " /></ a >
< a href = " # " target = " _blank " >< img src = " image/B00000041.jpg " title = " 第二幅图 " alt = " 第二幅图 " /></ a >
< a href = " # " target = " _blank " >< img src = " image/B00000042.jpg " title = " 第三幅图 " alt = " 第三幅图 " /></ a >
< a href = " # " target = " _blank " >< img src = " image/B00000045.jpg " title = " 第四幅图 " alt = " 第四幅图 " /></ a >
</ div >
</ div >

<script type="text/javascript" src="js/play.js"></script> 　　
</ body >
</ html >

play.css

代码

body{ font - size:12px; font - family:Verdana; margin: 0 ; padding: 0 }
#play{ width:300px; height:200px; overflow:hidden; position:relative; margin:50px 0 0 50px;}
#play img{ margin: 0 ; border: 0 ; width:300px; height:200px;}
#play_info{ position:absolute; margin - top:172px; padding:8px 0 0 20px; height:20px; width:200px;color:#fff; z - index: 1001 ; cursor:pointer ;}
#play_info b{ font - size:14px; display:block;}
#play_bg{ position:absolute; background - color:# 000 ; margin - top:170px; width:300px; height:30px;filter: Alpha(Opacity = 30 );opacity: 0.3 ;z - index: 1000 }
#play_text {position:absolute;margin:180px 0 0 220px;height:20px;width:80px; z - index: 1002 }
#play_text ul {list - style - type:none;width:80px;height:20px; margin: 0 ; display:block;padding - left: 0 ; padding - top:1px;_padding - top:0px;filter: Alpha(Opacity = 80 );opacity: 0.8 ;}
#play_text ul li {width:14px;height:14px; float :left;background - color:# 000 ;display:block;color:#FFF; text - align:center; margin:1px;cursor:pointer;font - family: " Courier New " ;}
#play_list a{display:block;width:300px;height:200px;position:absolute;overflow:hidden}

play.js

代码

var t = 0 ;
var n = 0 ;
var count = $( " #play_list a " ).size();
$(function() {
$( " #play_list a:not(:first-child) " ).hide();
$( " #play_info " ).html($( " #play_list a:first-child " ).find( " img " ).attr( " alt " ));
$( " #play_text li:first-child " ).css({ " background " : " #fff " , " color " : " #000 " });
$( " #play_info " ).click(function() { window.open($( " #play_list a:first-child " ).attr( " href " ), " _blank " ) });
$( " #play_text li " ).click(function() {
var i = $( this ).text() - 1 ;
n = i;
if (i >= count) return ;
$( " #play_info " ).html($( " #play_list a " ).eq(i).find( " img " ).attr( " alt " ));
$( " #play_info " ).unbind();
$( " #play_info " ).click(function() { window.open($( " #play_list a " ).eq(i).attr( " href " ), " _blank " ) });
$( " #play_list a " ).filter( " :visible " ).fadeOut( 500 ).parent().children().eq(i).fadeIn( 1000 );
$( this ).css({ " background " : " #fff " , ' color ' : ' #000 ' }).siblings().css({ " background " : " #000 " , ' color ' : ' #fff ' });
})
t = setInterval( " showAuto() " , 2000 );
$( " #play " ).hover(function() { clearInterval(t) }, function() { t = setInterval( " showAuto() " , 2000 ); });
})
function showAuto() {
n = n >= (count - 1 ) ? 0 : ++ n;
$( " #play_text li " ).eq(n).trigger( " click " );
}

 

转载于:https://www.cnblogs.com/guide/archive/2010/03/19/1689977.html