四屏弹性滚动伸缩按钮的jquery焦点图代码

特效介绍

使用方法

<link href="css/tg_style.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<style type="text/css">
.mypng img {
azimuth: expression( this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "img/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")', ''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true);
}/* 兼容ie6png代码 */
</style>

<div id="focusBar">
<a href="javascript:void(0)" class="arrL" onclick="prePage()" style="left: 0px;">左</a>
<a href="javascript:void(0)" class="arrR" onclick="nextPage()" style="right: 0px;">右</a>
<ul class="mypng">
<li id="focusIndex1" style="background:url(./img/banner_bj_001.gif) repeat-x;">
  <div class="focusL"><a href="http://www.5imoban.net"><img src="img/1.png" width="1000" height="540"></a></div>
  <div class="focusR"><a href="http://www.5imoban.net"><img src="img/2.png" width="1000" height="540"></a></div>
  <div style="width:1000px; height:540px; margin:0 auto; background:url(./img/banner_bj_01.jpg) no-repeat;">
</li>
<li id="focusIndex2" style="background:url(./img/banner_bj_002.gif) repeat-x;">
  <div class="focusL"><a href="http://www.5imoban.net"><img src="img/3.png" width="1000" height="540"></a></div>
  <div class="focusR"><a href="http://www.5imoban.net"><img src="img/4.png" width="1000" height="540"></a></div>
  <div style="width:1000px; height:540px; margin:0 auto;"></div>
</li>
<li id="focusIndex3" style="background:url(./img/banner_bj_003.gif) repeat-x;">
  <div class="focusL"><a href="http://www.5imoban.net"><img src="img/5.png" width="1000" height="540"></a></div>
  <div class="focusR"><a href="http://www.5imoban.net"><img src="img/6.png" width="1000" height="540"></a></div>
  <div style="width:1000px;height:540px; margin:0 auto; background:url(./img/banner_bj_03.jpg) no-repeat; "></div>
</li>
<li id="focusIndex4" style="background:url(./img/banner_bj_004.gif) repeat-x;">
  <div class="focusL"><a href="http://www.5imoban.net"><img src="img/7.png" width="1000" height="540"></a></div>
  <div class="focusR"><a href="http://www.5imoban.net"><img src="img/8.png" width="1000" height="540"></a></div>
  <div style="width:1000px; height:540px; margin:0 auto; background:url(./img/banner_bj_04.jpg) no-repeat;"></div>
</li>
</ul>
</div>
<script type="text/javascript" src="js/index.js"></script>