欢迎访问 水平网    今天是:2017年11月19日 注册 | 登录 | 订阅 | 收藏
>> JavaScript >> 图片幻灯切换效果,可自定义数量
推荐代码
热点代码

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

作者:未知,  来源:网络,  阅读:3242,  发布时间:2014-04-19  【放入收藏夹

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>
<!-- 幻灯 结束 -->

代码:HTML+JS复制
<div class="flashmoviebox clear">
	<div class="flashmovieimglist">
		<div id="movieimglists" style="filter:progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward)">
			<ul>
			<li id="switch_0"><a href="movie/movie.php?id=17"><img onerror="this.src='images/error.gif'" width="398" height="248" alt="【变形金刚II:卷土重来/堕落者的复仇/复仇之战】Transformers Revenge of the Fallen" src="http://img.album.pchome.net/54/71/61/85/ab4602bdce46fe8b85ca1b905c571b93.jpg"></a></li><li id="switch_1"><a href="movie/movie.php?id=14"><img onerror="this.src='images/error.gif'" width="398" height="248" alt="【真人游戏/公民游戏/游戏求生/电玩逃杀王】Gamer" src="http://img.album.pchome.net/54/72/17/19/85092d0c2407e124459e2846323ec375.jpg"></a></li><li id="switch_2"><a href="movie/movie.php?id=13"><img onerror="this.src='images/error.gif'" width="398" height="248" alt="【忍者】Ninja" src="http://img.album.pchome.net/54/72/20/63/f6c8dfe230317eeaad789f55ebe63fc6.jpg"></a></li><li id="switch_3"><a href="movie/movie.php?id=12"><img onerror="this.src='images/error.gif'" width="398" height="248" alt="【佐罗的面具/蒙面侠佐罗/黑侠佐罗】The Mask Of Zorro" src="http://img.album.pchome.net/54/72/29/65/fa1d32293d8ae3d2db35544074dd7bc5.jpg"></a></li><li id="switch_4"><a href="movie/movie.php?id=11"><img onerror="this.src='images/error.gif'" width="398" height="248" alt="【蝴蝶效应3:启示】The Butterfly Effect 3: Revelations" src="http://p3.images22.51img1.com/6000/mysilu_re/3ec12390c087590f576974a9db33f75b.jpg"></a></li><li id="switch_5"><a href="movie/movie.php?id=10"><img onerror="this.src='images/error.gif'" width="398" height="248" alt="【爱到底】LOVE" src="http://forum.qxxy.org/attachments/month_0911/20091126_fa6591b507f0c05d4de8ewiW8Rk7tkCW.jpg"></a></li><li id="switch_6"><a href="movie/movie.php?id=5"><img onerror="this.src='images/error.gif'" width="398" height="248" alt="【速度与激情I/玩命关头/狂野时速】The Fast and the Furious" src="http://img.album.pchome.net/54/72/32/98/1260195669f3ccdd27d2000e3f9255a7e3e2c48800.jpg"></a></li><li id="switch_7"><a href="movie/movie.php?id=4"><img onerror="this.src='images/error.gif'" width="398" height="248" alt="【2012末日预言/世界末日】2012" src="http://img.album.pchome.net/54/72/25/59/bb4937bd9b407f7840468eec724f785f.jpg"></a></li><li id="switch_8"><a href="movie/movie.php?id=2"><img onerror="this.src='images/error.gif'" width="398" height="248" alt="【死神来了4/死神来了:死亡之旅3D/绝命终结站4】The Final Destination 4" src="http://i48.tinypic.com/2ps3cxu.jpg"></a></li>					</ul>
		</div>
	</div>

	<div class="flashmovielist">
		<ul>
			<li><a class="up" id="focus_0" onmouseover="show_focus_image(0,9);" title="【变形金刚II:卷土重来/堕落者的复仇/复仇之战】Transformers Revenge of the Fallen" href="movie/movie.php?id=17">【变形金刚II:卷土重来/堕落者的复仇...</a></li><li><a class="up" id="focus_1" onmouseover="show_focus_image(1,9);" title="【真人游戏/公民游戏/游戏求生/电玩逃杀王】Gamer" href="movie/movie.php?id=14">【真人游戏/公民游戏/游戏求生/电玩逃杀...</a></li><li><a class="up" id="focus_2" onmouseover="show_focus_image(2,9);" title="【忍者】Ninja" href="movie/movie.php?id=13">【忍者】Ninja</a></li><li><a class="up" id="focus_3" onmouseover="show_focus_image(3,9);" title="【佐罗的面具/蒙面侠佐罗/黑侠佐罗】The Mask Of Zorro" href="movie/movie.php?id=12">【佐罗的面具/蒙面侠佐罗/黑侠佐罗】T...</a></li><li><a class="up" id="focus_4" onmouseover="show_focus_image(4,9);" title="【蝴蝶效应3:启示】The Butterfly Effect 3: Revelations" href="movie/movie.php?id=11">【蝴蝶效应3:启示】The Butterfly E...</a></li><li><a class="up" id="focus_5" onmouseover="show_focus_image(5,9);" title="【爱到底】LOVE" href="movie/movie.php?id=10">【爱到底】LOVE</a></li><li><a class="up" id="focus_6" onmouseover="show_focus_image(6,9);" title="【速度与激情I/玩命关头/狂野时速】The Fast and the Furious" href="movie/movie.php?id=5">【速度与激情I/玩命关头/狂野时速】T...</a></li><li><a class="up" id="focus_7" onmouseover="show_focus_image(7,9);" title="【2012末日预言/世界末日】2012" href="movie/movie.php?id=4">【2012末日预言/世界末日】2012...</a></li><li><a class="up" id="focus_8" onmouseover="show_focus_image(8,9);" title="【死神来了4/死神来了:死亡之旅3D/绝命终结站4】The Final Destination 4" href="movie/movie.php?id=2">【死神来了4/死神来了:死亡之旅3D/绝...</a></li>				</ul>
	</div>
</div>
<script type="text/javascript">
<!--
var movieSliderTimer = null ;
var MaxScreen = 9;
var hot_query_td =  document.getElementById('movieimglists');
setMovieFlashs(CurrentHotScreen,MaxScreen);
movieSliderTimer = setTimeout('movieSlider(MaxScreen);', 5000);	
//-->
</script>
代码:slider.js复制
var CurrentHotScreen = 0 ;
function setMovieFlashs(screen,MaxScreen){
	var Vmotion = "forward" ;
	if (screen >= MaxScreen) {
		screen = 0 ;
		Vmotion = "reverse" ;
	}
	cleanallstyle(MaxScreen);
	document.getElementById("focus_"+screen).className = "up" ;

	if(null!=hot_query_td.filters){
		hot_query_td.filters[0].apply();
		hot_query_td.filters[0].motion = Vmotion;
	}
	for (i=0;i<MaxScreen;i++) {
		document.getElementById("switch_"+i).style.display = "none" ;
	}
	document.getElementById("switch_"+screen).style.display = "block" ;
	if(null!=hot_query_td.filters){
		hot_query_td.filters[0].play();
	}
	CurrentHotScreen = screen ;
}

function movieSlider(MaxScreen){
	movieSliderTimer = null;
	setMovieFlashs(CurrentHotScreen+1,MaxScreen);
	movieSliderTimer = setTimeout('movieSlider(MaxScreen);', 5000);
}

function cleanallstyle(MaxScreen) {
	for (i = 0; i < MaxScreen; i++) {
		document.getElementById("focus_"+i).className = "" ;
	}
}
function show_focus_image(index,MaxScreen) {
	clearTimeout(movieSliderTimer);
	setMovieFlashs(index,MaxScreen);
	movieSliderTimer = setTimeout('movieSlider(MaxScreen);', 5000);
}
代码: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:幻灯
您可能还有兴趣查阅的内容
评论【共有0条评论】查看所有评论
昵称:(*)   邮箱:   QQ:   验证码: 看不清楚?点击刷新验证码