摘要:一个简单的图片轮播效果页面代码,基本的结构,在中显示图片,此处图片依次命名为。简单图片轮播然后对网页进行一个非常简单的美化。具体到元素标签最后是文件对图片轮播进行控制。
一个简单的图片轮播效果
photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg、2.jpg、3.jpg、4.jpg。
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>简单图片轮播title> 6 <link rel="stylesheet"href="css/photo.css"> 7 head> 8 <body> 9 <div class="warpper"> 10 <div class="header"> 11 <div class="logo">photos of tutujdiv> 12 div> 13 <div class="main"> 14 <div id="pics"> 15 <img src="img/1.jpg"/> 16 div> 17 div> 18 <div class="footer">div> 19 div> 20 body> 21 html> 22 <script src="js/photo.js">script>
然后对网页进行一个非常简单的CSS美化。
.logo{
font-size:18px;
color:brown;
background-color: #F0F8FF;
font-family: "calisto mt";
}
/* 具体到元素标签 */
#pics img{
margin-top:10px;
width:300px;
height:300px;
}
最后是js文件对图片轮播进行控制。
//获取内容 var pics=document.getElementById("pics"); var n=1; setInterval(function(){ if(n>4) n=1; pics.innerHTML="<img src=img/"+n+".jpg/>"; n++; },1000);
最后的效果是每隔一秒对图片进行变换,变换到最后一幅时再从第一幅开始变换。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1018.html
摘要:页面调试腾讯开发维护的代码调试发布,错误监控上报,用户问题定位。同样是由腾讯开发维护的代码调试工具,是针对移动端的调试工具。前端业务代码工具库。动画库动画库,也是目前通用的动画库。 本人微信公众号:前端修炼之路,欢迎关注 本篇文章整理自己使用过的和看到过的一些插件和工具,方便日后自己查找和使用。 另外,感谢白小明,文中很多的工具来源于此。 弹出框 layer:http://layer....
摘要:前段时间学习了淘宝首页的静态页面,其中收获较大的的就是这个循环播放的图片轮播组件,本文就将相关制作经验分享给大家。作为演示,用标签代替了图片。关键使用不同背景色的替代图片。 前段时间学习了淘宝首页的静态页面,其中收获较大的的就是这个循环播放的图片轮播组件,本文就将相关制作经验分享给大家。 先看看在线DEMO:原生JS循环播放图片轮播组件 (支持IE8+,本文中的在线demo均未经过压缩...
摘要:前段时间学习了淘宝首页的静态页面,其中收获较大的的就是这个循环播放的图片轮播组件,本文就将相关制作经验分享给大家。作为演示,用标签代替了图片。关键使用不同背景色的替代图片。 前段时间学习了淘宝首页的静态页面,其中收获较大的的就是这个循环播放的图片轮播组件,本文就将相关制作经验分享给大家。 先看看在线DEMO:原生JS循环播放图片轮播组件 (支持IE8+,本文中的在线demo均未经过压缩...
摘要:前段时间学习了淘宝首页的静态页面,其中收获较大的的就是这个循环播放的图片轮播组件,本文就将相关制作经验分享给大家。作为演示,用标签代替了图片。关键使用不同背景色的替代图片。 前段时间学习了淘宝首页的静态页面,其中收获较大的的就是这个循环播放的图片轮播组件,本文就将相关制作经验分享给大家。 先看看在线DEMO:原生JS循环播放图片轮播组件 (支持IE8+,本文中的在线demo均未经过压缩...
阅读 713·2023-04-25 19:43
阅读 3910·2021-11-30 14:52
阅读 3784·2021-11-30 14:52
阅读 3852·2021-11-29 11:00
阅读 3783·2021-11-29 11:00
阅读 3869·2021-11-29 11:00
阅读 3557·2021-11-29 11:00
阅读 6105·2021-11-29 11:00