<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>轮播焦点图</title><style>a:focus{ outline:0;}button:focus{ outline:0;}li{ list-style:none}.box{ width:600px; position:relative; height:270px; }ul,body{ margin:0; padding:0}#thepic{ width:3600px; height:270px; z-index:1; position:absolute; left:-600px; }#thepic li{ float:left}.btt{ position:relative; z-index:5}#btn1{ background:url(img/btnleft.png) no-repeat; outline:none; border:0px; cursor:pointer;width:29px; height:28px; position:absolute; top:115px}#btn2{background:url(img/btnright.png) no-repeat; outline:none; border:0px; cursor:pointer; width:29px; height:28px; position:absolute; top:115px; left:572px;}</style><script src="jquery.js" language="javascript" type="text/javascript"></script><script>$(document).ready(function() { var wwt=document.getElementById('thepic'); $('#btn1').click(function(){ $('#thepic').animate({left:'-=600px'}); if(wwt.style.left<-2600+'px'){ $('#thepic').animate({left:"-600px"}); } return }); $('#btn2').click(function(){ $('#thepic').animate({left:'+=600px'}); if(wwt.style.left>-200+'px'){ $('#thepic').animate({left:"-2400px"}) } });});</script></head><body><div class="box"><div class="btt"><button id="btn1"></button><button id="btn2"></button></div><div id="thepic" ><li><img src="img/zhutingqi.png" width="600" height="270" /></li><li><img src="img/ceyan.png" width="600" height="270" /></li><li><img src="img/productimg.png" width="600" height="270" /></li><li><img src="img/slide-2.jpg" width="600" height="270" /></li><li><img src="img/zhutingqi.png" width="600" height="270" /></li><li><img src="img/ceyan.png" width="600" height="270" /></li></div></div></body></html>
目前暂无任何回答
- 0 回答
- 0 关注
- 1816 浏览
添加回答
举报
0/150
提交
取消