以下那些注释呢,都是要靠自己理解才是最重要的,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.banner{width: 800px;height: 300px;margin: auto;position: relative;}
.banner img{width: %;height: %;}
ul{position: absolute;left: %;transform:translate(-%,);bottom: 15px;list-style: none;}
li{float: left;width: 30px;height: 30px;background:rgba(,,,.);border-radius: %;text-align: center;line-height: 30px;font-weight: bold;margin-right:10px ;}
#zleft,#yright{width:0px;position: absolute;top: ;line-height: 300px;font-size: 80px;font-weight: bold;color: white;background: rgba(,,,0.3);overflow: hidden;transition: .8s;}
#zleft{left: ;}
#yright{right: ;}
</style>
</head>
<body onload="dong()"><!--进入页面先行加载某个函数-->
<div class="banner">
<img src="img/t0.jpg" />
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="zleft"><</div>
<div id="yright">></div>
</div> <script>
//获取所有需要的东西;
var banner=document.getElementsByClassName("banner")[];
var lis=document.getElementsByTagName("li");
var zleft=document.getElementById("zleft");
var yright=document.getElementById("yright");
var imgs=document.getElementsByTagName("img")[]; var timer=setInterval("dong()",); //给图片定时,让图片按定时器秒数动;
var index=-; //给图片给初始值;
function dong(){
index++;
resetColor(); //5.调用函数
lis[index].style.backgroundColor="yellow";//4.给轮播点做选中状态
imgs.src="img/"+"t"+index+".jpg"; //1.获取图片路径
if(index==){ //3.判断关键节点,最后一张与第一张的关联;
index=;
}
//2.路径循环
}
function resetColor(){ //5.创建一个函数(清楚上一个轮播点的状态)
for(var i=;i<lis.length;i++){
lis[i].style.backgroundColor="rgba(255,255,255,.3)"
}
}
// btn点击
for (var i=;i<lis.length;i++) { //1.循环轮播点
lis[i].onclick = function(){ //2.给轮播点做点击
clearInterval(timer);//5.清楚名为timer的定时器
index = this.innerHTML-; //3.当前下标等于页面中的数字;注意:后面的减一;
imgs.src = "img/"+"t"+index +".jpg";//4.获取图片路径
resetColor();//6.获取上面的,清楚上一个轮播点的状态的函数
lis[index].style.background = "yellow"//6.清楚函数的样式 }
}
// 鼠标悬浮banner
banner.onmouseover = function(){//1.鼠标放到banner上的时候
clearInterval(timer); //3.清楚定时器
zleft.style.width = yright.style.width = "60px"; //2.两边按钮出现;这里要注意,上面设置按钮宽度的时候,给宽设置为0px
}
banner.onmouseout = function(){//1.鼠标离开banner上的时候
timer = setInterval("dong()",);//3.恢复轮播动
zleft.style.width = yright.style.width = "0px";//2.两边按钮消失
}
zleft.onclick = function(){//左边按钮点击
index--;
if (index ==-){//最后一张,与第一张之间的衔接
index = ;
}
resetColor()//获取清楚轮播点的函数
lis[index].style.background ="yellow"
imgs.src = "img/"+"t"+index+".jpg";//获取图片路径
}
yright.onclick = function(){
index++;
if (index == ){
index = ;
}
resetColor()
lis[index].style.background = "yellow"
imgs.src = "img/"+"t"+index+".jpg";
}
</script>
</body>
</html>

js做的轮播图的更多相关文章

  1. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  2. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  3. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  5. 自己用原生JS写的轮播图,支持移动端触屏滑动,面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  6. JS 实现动态轮播图

    JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出 ...

  7. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

  8. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

  9. photoSlider-原生js移动开发轮播图、相册滑动插件

    详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...

随机推荐

  1. tomcat Server启动带profile文件

    一般mvn如果配置有环境,直接在tomcat server中无法直接启动,需要在vm或者tomcat启动中添加profile启动. pom.xml中添加: 在<profile>中添加默认p ...

  2. VirtualBox虚拟机网络设置说明

    1. 网络接入模式简介    VirtualBox的提供了四种网络接入模式,它们分别是:         1.NAT 网络地址转换模式(NAT,Network Address Translation) ...

  3. generator 生成器

    L=[i*i for i in range(10)] print(L) G=(i*i for i in range(10)) #变中括号为小括号 print(G) 另一种方法: fib(max): n ...

  4. 多元高斯分布(The Multivariate normal distribution)

    在数据建模时,经常会用到多元高斯分布模型,下面就这个模型的公式并结合它的几何意义,来做一个直观上的讲解. 1, 标准高斯函数 高斯函数标准型: $f(x) = \frac{1}{\sqrt{2π}}e ...

  5. Win10系统下,本地连接远程桌面(Win2016)图解

    1.Win+R在运行框中输入mstsc,回车 2.在出现的远程登陆窗口中,计算机中输入远程桌面IP 3.点击显示选项按钮,在远程桌面窗口中,点击常规(默认),输入登陆的用户名: XXXXXX 4.点击 ...

  6. chrome开发者工具实现整站截屏

    我们经常要遇到将整个网站作为图片保存下来的情况,而windows系统自带的PrintScreen键只能保存当前屏幕的截图 在chrome浏览器中可以安装第三方的截图插件实现整站截图 今天我们要介绍的方 ...

  7. 一.C#基础:标识符和关键字

    只要语言就会有标识符,和关键字的概念,以下是C#的标识符与关键字: 一个字符串要成为标识符要满足的条件1:只包含字母,(包括大小写),数字,@符号,下划线——.2:首位可以是字母,@,但一定不能是数字 ...

  8. Shell 运算相关

    一.${str} 二.变量替换 三.3种计算字符串长度的效率比较 四.(())用法 五.expr 六.bc 4种连续整数求和效率 七.条件测试 八.字符串测试

  9. Spring Cloud+Dubbo对Feign进行RPC改造

    因为Spring Cloud Feign是基于Http Restful的调用,在高并发下的性能不够理想(虽然他是基于Ribbon以及带有熔断机制,可以防止雪崩),成为性能瓶颈,所以我们今天对Feign ...

  10. 阅读笔记:JAVA - chapter 1 & 2

    static 即使没有创建对象,也能调用这个方法. 当Static method, static变量有定义,不同对象将指向同一存储空间,将其初始化. 存储方式 寄存器 堆栈:对象引用,需要知道存活多久 ...