<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var timeID
var image
var current = 0
var images = new Array(5)
function init(){
for (var i=1i<=5i++){
images[i] = new Image(450,550)
images[i].src = "pictures/"+i+".jpg"
}
image = document.images[0]
}
function setSrc(i){
current = i
//设置图片src的属性，实现图片的切换
image.src = images[i].src
}
function pre(){
if (current <= 0){
alert('已经是第一张了')
}else{
current--
setSrc(current)
}
}
function next(){
if (current >= 5){
alert('已经是最后一张了')
}else{
current++
setSrc(current)
}
}
function play(){
if (current >= 5){
current = 0
}
setSrc(++current)
}
</script>
<body onload="init()">
<input type="button" value="第一张" onclick="setSrc(1)">
<input type="button" value="上一张" onclick="pre()">
<input type="button" value="下一张" onclick="next()">
<input type="button" value="最后一张" onclick="setSrc(5)">
<input type="button" value="幻灯播放" onclick="timeID=setInterval('play()',500)">
<input type="button" value="停止播放" onclick="clearInterval(timeID)">
<div style="border:1px solid bluewidth:450pxheight:550px" id="myPic">
<img src="pictures/1.jpg" />
</div>
</body>
</html>
<script type="text/javascript">var t = n = 0, count
$(document).ready(function(){
count=$("#ban_list a").length//获取图片数目
$("#ban_list a:not(:first-child)").hide()//除第一张图片都隐藏
$("#ban_info").html($("#ban_list a:first-child").find("img").attr('alt'))//这个是把alt里的内容作为标题
$("#ban_info").click(function(){window.open($("#ban_list a:first-child").attr('href'), "_blank")})//给标题绑定点击事件，添加链接
$("#ban li").click(function() { //按钮点击事件
var i = $(this).text() - 1//获取Li元素内的值，即1，2，3，4
n = i
if (i >= count) return
$("#ban_info").html($("#ban_list a").eq(i).find("img").attr('alt'))//重新获取标题
$("#ban_info").unbind().click(function(){window.open($("#ban_list a").eq(i).attr('href'), "_blank")})//重新绑定标题点击事件
$("#ban_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000)//渐进渐出效果
document.getElementById("ban").style.background=""
$(this).toggleClass("on")//切换按钮样式
$(this).siblings().removeAttr("class")
})
t = setInterval("showAuto()", 4000)
$("#ban").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000)})
})//鼠标指上停止轮播
function showAuto()//实现轮播的函数
{
n = n >=(count - 1) ? 0 : ++n
$("#ban li").eq(n).trigger('click')
}
</script>
<div id="ban">
<div id="ban_bg"></div>
<div id="ban_info"></div>
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="ban_list">
<a href="/Item/Show.asp?m=1&d=3824" target="_blank"><img src="/UploadFiles/2012-08/admin/2012081511562273110.jpg" alt="" width="414" height="286" /></a>
</div>
![[Quora] 论如何才能悄无声息地破坏室友的电脑](/aiimages/%5BQuora%5D+%E8%AE%BA%E5%A6%82%E4%BD%95%E6%89%8D%E8%83%BD%E6%82%84%E6%97%A0%E5%A3%B0%E6%81%AF%E5%9C%B0%E7%A0%B4%E5%9D%8F%E5%AE%A4%E5%8F%8B%E7%9A%84%E7%94%B5%E8%84%91.png)
