TechHUB - 实用代码 - Javascript - 图片幻灯切换效果，可自定义数量

≡ 推荐 ≡

≡ 热点 ≡

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

作者：未知， 来源：网络， 阅读：446， 发布时间：2014-04-19

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;
}

引用示例 代码：【复制】 
<?
$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="<a href="http:///"><img">http:///"><img</a> 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="<a href="http:///">http:///</a>">暂无记录</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>
<!-- 幻灯 结束 -->

标签：幻灯

以下内容您可能有兴趣

● Javascript - CSS+JS的图片幻灯效果

以下是用户评论查看全部评论