Question

【js开发】求网页图片切换代码

求javascript网页图片切换代码，特效多一点的，比如随机百叶窗啊，淡入淡出，收缩啊。。。

Answer 1

html部分：
<div id="d1">
<ul id="adv"><li><img src="<%=basePath%>images/jianjie/1.jpg"/></li>
<li><img src="<%=basePath%>images/jianjie/2.jpg"/></li>
<li><img src="<%=basePath%>images/jianjie/3.jpg"/></li>
<li><img src="<%=basePath%>images/jianjie/4.jpg"/></li>
</ul>
<ul id="num"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><br/>

CSS样式部分：
* {
margin: 0px;
padding: 0px;
}
#d1 {
border: 1px solid #aaaaaa;
margin-left: 10px;
margin-top: 20px;
width: 650px;
height: 280px;
overflow: hidden;
position: relative;
}
#adv,#num {
position: absolute;
}
ul li {
list-style: none;
display: inline;
}
ul img {
width: 650px;
height: 280px;
display: block;
}
#num {
right: 5px;
bottom: 5px;
}
#num li {
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
}
.on {
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 01px;
border: 0;
background-color: red;
font-weight: bold;
}
Jquery代码：
$(function(){
$('#num li').mouseenter(function(){
var index = $('#numli').index(this);//需要知道光标指向的是哪一个li
showImage(index);//依据index(下标)，滚动图片
}).eq(0).mouseenter();
var i = 0; var taskId;//光标进入，停止滚动图片，光标离开，开始滚动图片
$('#d1').hover(function(){ clearInterval(taskId);//光标进入，清除定时任务
},function(){taskId = setInterval(function(){//光标离开，开始定时任务
showImage(i); i++;
if(i== 5){ i = 0; } },2000);
}).mouseleave(); });
//滚动图片函数，stop(true)：在执行当前动画之前，先清空之前累积的动画
functionshowImage(index){
$('#adv').stop(true).animate({'top':-index* 177},1000);
$('#numli').eq(index).addClass('on').siblings().removeClass('on');//加亮光标指定的li }

这个是门户网站。如淘宝，京东常用的图片滚屏效果，代码都是经过严格测试的，至于效果，你自己试一下就可以看到了，很简洁的代码，如果用js操作比较麻烦，建议还是用Jquery