html js简单实现图片轮播功能
本章记录简单的图片轮播功能,需要html、js和css共同实现1、html文件
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="css/text.css"/><script type="text/javascript" src="js/prototype.js" ></script><script type="text/javascript" src="js/test.js"></script><title>图片轮播</title></head><body> <div id="imgchangediv" align="center"><img src="img/59670ce9N177a082d.jpg" style="display: block;"/><img src="img/5966d4bdN6a8ec0c3.jpg" style="display: none;"/><img src="img/59670880N97321a68.jpg" style="display: none;"/><img src="img/59672bd4N65eac785.jpg" style="display: none;"/><img src="img/59674450Nf337c487.jpg" style="display: none;"/><img src="img/596818beN633101f5.jpg" style="display: none;"/><img src="img/59681aefN6cae4f5b.jpg" style="display: none;"/><img src="img/596878daN6ae9b27a.jpg" style="display: none;"/><div id="imgyuan"><font></font><font></font><font></font><font></font><font></font><font></font><font></font><font></font></div></div></body>
</html>
2、css外联样式
/**图片中的一条椭圆半透明背景* * */
#imgyuan{width: 182px;height: 20px;border-radius: 12px;background-color: red;padding-left: 13px;margin: 0 auto;position: relative;top: -40px;background-color: rgba(1, 150, 0, 0.3);
}
/**每一个小圆点* */
#imgyuan font{border:1px solid white;width:11px; height:11px;border-radius:50%;margin-right: 9px;margin-top: 4px;display: block;float: left;background-color: white;
}
3、js文件
var index=0;//每张图片的下标,window.onload=function(){ var start=setInterval(autoPlay,1000);//开始轮播,每秒换一张图$('imgchangediv').onmouseover=function(){//当鼠标光标停在图片上,则停止轮播clearInterval(start);}$('imgchangediv').onmouseout=function(){//当鼠标光标停在图片上,则开始轮播start=setInterval(autoPlay,1000);}var lis=$('imgyuan').getElementsByTagName('font');//得到所有圆圈//当移动到圆圈,则停滞对应的图片var funny = function(i){lis[i].onmouseover = function(){changeImg(i)}}for(var i=0;i<lis.length;i++){funny(i);}
}
//一轮过后,还是第二轮
function autoPlay(){if(index>7){index=0;}changeImg(index++);
}
//对应圆圈和图片同步
function changeImg(index){var list=$('imgchangediv').getElementsByTagName('img');var list1=$('imgyuan').getElementsByTagName('font');for(i=0;i<list.length;i++){list[i].style.display='none';list1[i].style.backgroundColor='white';}list[index].style.display='block';list1[index].style.backgroundColor='red';
}
4、功能截图
html js简单实现图片轮播功能相关推荐
- html+css+js简单实现图片轮播效果
<html> <head> <style type="text/css"> *{background-color:green;} #lunbo{ ...
- 网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图 (4)使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播 设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
- 简单html图片轮播_web前端入门到实战:简单的图片轮播
效果: 功能: 1.左右箭头切换 2.状态控制点切换 3.鼠标悬念 4.自动轮播 HTML: <div class="zh-carousel"><div clas ...
- pc端html轮播带滑块,swiper.js简单快速实现轮播滑动(兼容PC端、移动端)
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端 移动端(在浏览器将设备切换为手机,这里 ...
- web前端入门到实战:简单的图片轮播
效果: 功能: 1.左右箭头切换 2.状态控制点切换 3.鼠标悬念 4.自动轮播 HTML: <div class="zh-carousel"><div clas ...
- 纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
- android魅族轮播图,用angularjs模仿魅族官网的图片轮播功能
使用指令模仿魅族官网的图片轮播功能(angularjs中DOM操作都在指令中完成) html css .slider{ position: relative; width:900px; height: ...
- 原生Js_使用setInterval() 方法实现图片轮播功能
用javascript图片轮播功能 <!DOCTYPE html> <html><head><meta charset="utf-8" / ...
- java postdelayed_Android开发使用Handler的PostDelayed方法实现图片轮播功能
本文实例讲述了Android开发使用Handler的PostDelayed方法实现图片轮播功能.分享给大家供大家参考,具体如下: 第一步:创建MainActivity类 public class Ba ...
最新文章
- @Autowire和@Resource注解使用的正确姿势,别再用错的了!!
- pyrender 安装
- linux sftp命令连接数,linux记录sftp命令
- Entity Framework 实体框架的形成之旅--为基础类库接口增加单元测试,对基类接口进行正确性校验(10)...
- java dns 解析域名解析_java网络学习 java dns 域名解析协议实现
- 3年后准确率仍达97%:利用谷歌语音转文本 API 绕过reCAPTCHA
- easyUI导入导出
- 联想集团董事长杨元庆先生在与微软签约仪式上的发言稿全文
- springboot底层原理简述
- 【零基础】一文读懂CPU(从二极管到超大规模集成电路)
- 时间管理表 - 《月总结计划表》
- Python数据库操作-pyodbc
- mysql是个单用户数据库_MySQL是一个支持单用户的数据库管理系统 答案:×
- js日期减一个月_正正正国庆!折上再减!三亚/香格里拉/稻城/拈花湾,最低499元…...
- win7制作ntp服务器,win7系统搭建ntp服务器的操作方法
- oracle进行列合并,oracle列合并的实现方法
- 最新postfix 的master.cf配置参考
- 在冷风中我凌乱了半小时,只因健康码刷不出来
- 《Spring实战(第四版)》电子版
- 计算机应用中的过程控制,计算机在过程控制中的应用