html中如何设置几张图片在一个div里来回切换 / 木子杰软件教程

在html中如何设置实现几张图片在一个div里来回切换呢？下面就来给大家介绍一种简单大方的DIV+CSS+JQ自动切换图片的功能特效，一起来看看吧。

操作方法

01

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

打开所建立的html文档（本实例为 Default.html 文档），并进入代码编辑的状态，如下图：
03

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

在代码编辑页面，输入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>
05

在代码编辑页，引入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>
06

在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>
07

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

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

操作方法

相关推荐