jQuery幻灯效果
自己下找几张幻灯图像换上去就行了。
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#indexHuandengFlash{
width:245px;
height:297px;
border:solid 1px #CCC;
}
#indexHuandengFlash .ihf_title{
height:26px;
width:243px;
background-color:#000;
position:relative;
bottom:301px;
margin:1px;
cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);
}
#indexHuandengFlash .ihf_title ul{
margin:0px;
padding:0px;
list-style:none;
}
#indexHuandengFlash .ihf_title ul li{
text-align:center;
display:none;
}
#indexHuandengFlash .ihf_title ul li a{
font-size:12px;
text-decoration: none;
color:#FFF;
font-weight:bold;
}
#indexHuandengFlash .ihf_piclist{}
#indexHuandengFlash .ihf_piclist ul{
margin:0px;
padding:0px;
list-style:none;
}
#indexHuandengFlash .ihf_piclist ul li{
display:none;
}
#indexHuandengFlash .ihf_indexnum{
width:245px;
position:relative;
left:0px;
bottom:64px;
}
#indexHuandengFlash .ihf_indexnum ul{
margin:0px;
padding:0px;
list-style:none;
float:right;
}
#indexHuandengFlash .ihf_indexnum ul li{
padding:2px;
margin:4px;
border:solid 1px #CCC;
background-color:#000 ;
color:#FFF;
float:left;
width:12px;
text-align:center;
font-size:11px;
cursor:pointer; opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70);
}
#indexHuandengFlash .ihf_indexnum .current{
background-color:#FFF;
color:#000;
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.5.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var currentIndex = 0;
var DEMO; //函数对象
var currentID = 0; //取得鼠标下方的对象ID
var pictureID = 0; //索引ID
$("#indexHuandengFlash .ihf_title ul li").eq(0).show(); //默认
$("#indexHuandengFlash .ihf_piclist ul li").eq(0).show(); //默认
autoScroll();
$(".ihf_indexnum li").hover(function() {
StopScrolll();
$(".ihf_indexnum li").removeClass("current")//所有的li去掉当前的样式加上正常的样式
$(this).addClass("current"); //而本身则加上当前的样式去掉正常的样式
pictureID=$(".ihf_indexnum ul>li").index($(this));
$(".ihf_piclist ul>li").hide();
$(".ihf_piclist ul>li").eq(pictureID).fadeIn("slow"); //本身显示
$(".ihf_title li").hide();
$(".ihf_title li").eq(pictureID).show();
}, function() {
currentIndex = $(".ihf_indexnum ul>li").index($(this));;
autoScroll();
});
//自动滚动
function autoScroll() {
$(".ihf_indexnum li:last").removeClass("current");
$(".ihf_indexnum li").eq(currentIndex).addClass("current");
$(".ihf_indexnum li").eq(currentIndex - 1).removeClass("current");
$(".ihf_title li").eq(currentIndex - 1).hide();
$(".ihf_title li").eq(currentIndex).show();
$(".ihf_piclist li").hide();
$(".ihf_piclist li").eq(currentIndex).fadeIn("slow");
currentIndex++; currentIndex = currentIndex >= 3 ? 0 : currentIndex;
DEMO = setTimeout(autoScroll, 2000);
}
function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动
{
clearTimeout(DEMO);
}
});
</script>
</head>
<body>
<div id="indexHuandengFlash">
<div class="ihf_piclist">
<ul>
<li><img src="pic1.jpg" width="245" height="297"/></li>
<li><img src="pic2.jpg" width="245" height="297"/></li>
<li><img src="pic3.jpg" width="245" height="297"/></li>
</ul>
</div>
<div class="ihf_title">
<ul>
<li><a href="#" target="_blank">第一个切换图像</a></li>
<li><a href="#" target="_blank">第二个切换图像</a></li>
<li><a href="#" target="_blank">第三个切换图像</a></li>
</ul>
</div>
<div class="ihf_indexnum">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>
网络收集：另一效果的幻灯源码下载：https://files.cnblogs.com/jishume/jquery%E5%B9%BB%E7%81%AF.rar
