html中如何设置几张图片在一个div里来回切换

1、在VS2017项目中添加新项，选择HTML页，以建立html新文档，如下图：

3、准备好5张图片（像素为300x200），存储于与Default.html 文档相同位置下的images目录中，以作html图片切换调用。

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>

7、完成以上代码编辑，保存后在浏览器中测试效果，如下图：