1、在VS2017项目中添加新项，选择HTML页，以建立html新文档，如下图：
2、打开所建立的html文档（本实例为 Default.html 文档），并进入代码编辑的状态，如下图：
3、准备好5张图片（像素为300x200），存储于与Default.html 文档相同位置下的images目录中，以作html图片切换调用。
4、在代码编辑页面，输入CSS样式定义：
<style type="text/css">
* {
margin: 0px;
padding: 0px;
text-align: center;
}
#banner {
width: 300px;
height: 200px;
margin: 50px auto;
position: relative; /*相对定位,相对于.btn按钮*/
text-align: left;
}
.pic image {
display: block; /*默认有图片不显示*/
position: absolute; /*绝对定位.对应的是.pic这个div*/
top: 0px;
left: 0px;
}
.pic a {
display: none;
}
.pic { /*专门显现图片区*/
position: relative; /*相对定位.对应.pic img*/
border: 1px solid red;
}
.btn {
width: 150px;
height: 18px;
position: absolute; /*绝对定位相对于banner div*/
bottom: 5px;
right: 5px;
}
.btn ul li {
background-color: #000000; /*黑色*/
color: #ffffff;
list-style-type: none;
width: 18px;
height: 18px;
float: left;
border-radius: 9px; /*变成圆的*/
text-align: center;
line-height: 18px;
cursor: pointer; /*鼠标移动变手指状态*/
margin-left: 5px;
}
.btn ul li.one {
background-color: #ff9966;
}
</style>
5、在代码编辑页，引入jquery，并输入代码：
<script type="text/jscript" src="Scripts/jquery-3.2.1.min.js"></script>
<script type="text/jscript">
$(function () {
$("#all li").mouseover(function () {//鼠标进入离开事件
$(this).css("background-color", "#ff00ff").siblings().css("background-color", "white");
$(this).css({ "background-color": "red", "font-size": "9px" }).siblings().hide();
});
$(window).scroll(function () {//鼠标滚动事件
var _top = $(window).scrollTop(); //获得鼠标滚动的距离
});
//手动播放图片
$(".btn ul li").hover(function () {
$(this).addClass("one").siblings().removeClass("one");
index = $(this).index();
i = index;
$(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
});
//自动播放图片
var i = 0;
var t = setInterval(autoplay, 1000);
function autoplay() {
i++;
if (i > 4) i = 0;
$(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");
$(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
}
$("#banner").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(autoplay, 1000);
});
});
</script>
6、在html代码编辑中，输入div定义：
<div id="banner">
<div class="pic">
<a href="#" style="display:block"><img alt="" src="images/1.jpeg" /></a>
<a href="#"><img alt="" src="images/2.jpeg" /></a>
<a href="#"><img alt="" src="images/3.jpeg" /></a>
<a href="#"><img alt="" src="images/4.jpeg" /></a>
<a href="#"><img alt="" src="images/5.jpeg" /></a>
</div>
<div class="btn">
<ul>
<li class="one">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
7、完成以上代码编辑，保存后在浏览器中测试效果，如下图：
