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

<!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. asp.net ajax get 调用(和post不一样,直接返回json才行,否则报错;post不能返回json)

    <script type="text/javascript" > $(document).ready(function () { $('#Label1').click( ...

  2. nginx内容

    nginx工作在7层:web server(静态内容 static contents)web reverse proxy(反向代理http,https,mail),cache(带缓存功能) proxy ...

  3. 深度学习实战-强化学习-九宫格 当前奖励值 = max(及时奖励 + 下一个位置的奖励值 * 奖励衰减)

    强化学习使用的是bellmen方程,即当前奖励值 = max(当前位置的及时奖励 + discout_factor * 下一个方向的奖励值)   discount_factor表示奖励的衰减因子 使用 ...

  4. oss对象云存储

    import qiniu import uuidimport config def qn_upload_voice(fileData): '''上传语音到七牛云 @arg: fileData - 编码 ...

  5. How to Build a New Habit: This is Your Strategy Guide

    How to Build a New Habit: This is Your Strategy Guide by James ClearRead this on JamesClear.com Acco ...

  6. 使用==操作符比较命令行参数args[0]和字符串返回“Invalid type"

    运行程序接收一个来自命令行的字符串参数(取值1,2,3,4),根据参数执行对应语句块. 由于未能判断字符串内容是否相同导致代码if语句块代码失效,怎么也看不到schedule方法的效果, 以下是错误代 ...

  7. Spring再接触 Scope范围

    <bean id="userService" class="com.bjsxt.service.UserService" scope="prot ...

  8. 同机器与不同机器redis集群

    此文为另外一位大神原创由于没有找到分享功能  粘贴复制到此  原地址为https://blog.csdn.net/u012042021/article/details/72818759 一.同机器下的 ...

  9. jquery中的 deferred之 when (三)

    先来看使用案例: var def1 = $.Deferred(); var def2 = $.Deferred(); var def3 = $.Deferred(); var def4 = $.Def ...

  10. 手眼标定之相机随动eye-in-hand 示例:handeye_movingcam_calibration

    * * This example explains how to use the hand eye calibration for the case where* the camera is atta ...