欢迎访问 水平网, 今天是:2010年09月09日 [订阅本站] [用户注册/登录] [收藏本站]
首     页 技术文章 注 册 码 代码仓库 资源下载 技术讨论 实用工具 站内搜索 联系我们
■ 站内搜索
■ 推荐
■ 热点
■ 相关
■ 当前位置:首页 >> 代码仓库 >> Javascript >> 代码内容

图片幻灯切换效果,可自定义数量

■ 简介说明:

PHP引用示例:
<!-- 幻灯 开始 -->
<?
$re = mysql_query("select movieId,movieName,movieTransName,movieCoverImage from ".$cfg_dbextend."movielist where movieCoverImage<>'' and movieCover=1 order by movieId desc limit 10");
$MaxScreen = mysql_num_rows($re);
if($MaxScreen > 0){
 $strImageList = '';
 $strText = '';
 $isup_style = '';
 $i = 0;

 while($rs = mysql_fetch_array($re)){
  $strImageList .= '<li id="switch_'.$i.'"><a href="'.$cfg_baseurl.'movie/movie.php?id='.$rs['movieId'].'"><img onerror="this.src=\''.$cfg_baseurl.'images/error.gif\'" width="398" height="248" alt="【'.out($rs['movieTransName']).'】'.out($rs['movieName']).'" src="'.out($rs['movieCoverImage']).'"></a></li>';
  if($i == 0){
   $isup_style = ' class="up"';
  }
  $strText .= '<li><a'.$isup_style.' id="focus_'.$i.'" onmouseover="show_focus_image('.$i.','.$MaxScreen.');" title="【'.out($rs['movieTransName']).'】'.out($rs['movieName']).'" href="'.$cfg_baseurl.'movie/movie.php?id='.$rs['movieId'].'">'.CutStr('【'.out($rs['movieTransName']).'】'.out($rs['movieName']),18).'</a></li>';
  $i++;
 }
}
else {
 $strImageList = '<li id="switch_0"><a" href="http:///"><img width="398" height="248" alt="Null" src="'.$cfg_baseurl.'/images/logo.gif"></a></li>';
 $strText = '<li><a class="up" id="focus_0" onmouseover="show_focus_image(0,'.$MaxScreen.');" title="暂无记录" href="http:///">暂无记录</a></li>';
}
unset($rs);
unset($re);
?>
<div class="flashmoviebox clear">
 <div class="flashmovieimglist">
  <div id="movieimglists" style="filter:progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward)">
   <ul>
   <?=$strImageList?>
   </ul>
  </div>
 </div>

 <div class="flashmovielist">
  <ul>
   <?=$strText?>
  </ul>
 </div>
</div>
<script type="text/javascript">
<!--
var movieSliderTimer = null ;
var MaxScreen = <?=$MaxScreen?>;
var hot_query_td =  document.getElementById('movieimglists');
setMovieFlashs(CurrentHotScreen,MaxScreen);
movieSliderTimer = setTimeout('movieSlider(MaxScreen);', 5000); 
//-->
</script>
<!-- 幻灯 结束 -->

■ CSS样式:复制代码】【保存代码
.flashmoviebox {
width:650px;
border:1px solid #CD6F00;
}
.flashmoviebox .flashmovieimglist {
float:left;
width:400px;
height:250px;
overflow:hidden;
}
.flashmoviebox .flashmovieimglist ul{
padding:0px;
margin:0px;
list-style:none;
}

.flashmoviebox .flashmovieimglist ul li{

}

.flashmoviebox .flashmovieimglist ul li img{
border:0px;
}
.flashmoviebox .flashmovielist {
float:right;
width:250px;
height:250px;
overflow:hidden;
line-height:25px;
}
.flashmoviebox .flashmovielist ul{
padding:0px;
margin:0px;
list-style:none;
}
.flashmoviebox .flashmovielist ul li{

}
.flashmoviebox .flashmovielist ul li a{
color:#333;
display:block;
text-indent:13px;
background:url(images/dian.gif) 5px 4px no-repeat;
text-decoration:none;
}

.flashmoviebox .flashmovielist ul li a:hover{
color:#333;
background:#FFAC470 url(images/jiantou.gif) 3px 0px no-repeat;
}
.flashmoviebox .flashmovielist ul li a.up {
color:#0000FF;
background:#FFAC47 url(images/jiantou.gif) 3px 0px no-repeat;
}
TAGS:幻灯
■ 发表评论
您的称呼:
联系方式:
验 证 码 : 看不清楚?点击刷新验证码 看不清楚?点击图片刷新验证码
■ 最新评论显示所有评论