css和js部分,记得重新引用你自己的jquery库 我这个是本地的jquery库

<script src=”http://localhost:18111/templets/default/js/jQuery1_18.js” type=”text/javascript”></script>
<style type=”text/css”>
* {margin:0;padding:0;font-size:12px;font-family:Verdana;}
img {border:0}
#pic{margin:5px;width:300px;height:200px;overflow:hidden;cursor:pointer;}
#play{position:absolute;margin-left:200px;margin-top:-30px;}
#play a{text-decoration: none;border:1px solid #CEDEF7;background-color:#E8FCEB;width:20px;height:20px;color:#2F49DF;display:block;float:left;text-align:center;line-height:20px;margin-right:3px;}
</style>
<script type=”text/javascript”>
var _c = _h = 0;
$(function(){
$(‘#play > a’).click(function(){
var i = $(this).attr(‘alt’) – 1;
clearInterval(_h);
_c = i;
play();
change(i);
})
$(“#pic img”).hover(function(){clearInterval(_h)}, function(){play()});
play();
})
function play()
{
_h = setInterval(“auto()”, 1000);
}
function change(i)
{
$(‘#play > a’).css(‘background-color’,'#E8FCEB’).eq(i).css(‘background-color’,'#C6FF5E’).blur();
$(“#pic img”).hide().eq(i).fadeIn(‘slow’);
}
function auto()
{
_c = _c > 2 ? 0 : _c + 1;
change(_c);
}
</script>

html部分

<div id=”pic”>
<img src=”img1.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img2.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img3.jpg” width=”300″ height=”200″ alt=”" />
<img src=”img4.jpg” width=”300″ height=”200″ alt=”" />
</div>
<div id=”play”>
<a href=”###” alt=”1″ style=”background-color:#C6FF5E”>1</a>
<a href=”###” alt=”2″ >2</a>
<a href=”###” alt=”3″ >3</a>
<a href=”###” alt=”4″ >4</a>
</div>

 

Sorry, the comment form is closed at this time.

   
© 2012 Ai-WEB的博客 Suffusion theme by Sayontan Sinha