轮播图--js课程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
ul,ol{
list-style:none;
}
#demo{
width:500px;
height:200px;
border:1px solid black;
margin:100px auto;
padding:3px;
background-color: #ccc;
position:relative;
}
#picbox{
width:100%;
height:100%;
position: relative;
overflow:hidden;
}
#picbox ul{
position:absolute;
width:3000px;
height:200px;
}
#picbox ul li{
float:left;
}
#demo ol{
position:absolute;
right:10px;
bottom:10px;
line-height:20px;
text-align:center;
}
#demo ol li{
float:left;
width:20px;
height:20px;
background:#fff;
border:1px solid #ccc;
margin-left:10px;
cursor:pointer
}
#demo ol .current{
background-color: yellow;
}
</style>
<script src="../my.js"></script>
</head>
<body>
<div id="demo">
<div id="picbox">
<ul id="ul">
<li><img src="taobao/1.jpg" alt=""></li>
<li><img src="taobao/2.jpg" alt=""></li>
<li><img src="taobao/3.jpg" alt=""></li>
<li><img src="taobao/4.jpg" alt=""></li>
<li><img src="taobao/5.jpg" alt=""></li>
</ul>
</div>
</div>
</body>
</html>
<script>
var demo=document.getElementById("demo");
var picbox=document.getElementById("picbox");
var ul=document.getElementById("ul");
var ulkids=ul.children; ul.appendChild(ulkids[0].cloneNode(true)); //把ul中的第一张图片克隆添加到ul中去 var ol=document.createElement("ol"); //demo里面添加ol
demo.appendChild(ol); for(var i=0;i<ulkids.length-1;i++) //ol里面添加li
{
var li=document.createElement("li");
ol.appendChild(li);
li.innerHTML=i+1;
}
ol.children[0].className="current"; //动画效果
var olkids=ol.children;
for(var i=0;i<olkids.length;i++)
{
olkids[i].index=i;
olkids[i].onmouseover=function () {
for(var j=0;j<olkids.length;j++)
{
olkids[j].className="";
}
this.className="current";
run(ul,-this.index*500);//调用匀速运动动画封装函数，谁做动画，哪个方向移动多少 pic=anniu=this.index;//鼠标碰到按钮上，都以当前的索引号为主
}
} //轮播图每隔1秒钟自动播放，设置定时器
var timer=null;
var pic=0;//控制播放张数
var anniu=0;//控制播放按钮
timer=setInterval(autoplay,1000);
function autoplay()
{
pic++; //先加加
if(pic>ulkids.length-1) //后判断,播放了5张图之后
{
ul.style.left=0; //迅速切到第1张
pic=1;//然后从第2张开始播放 ,因为第6张就是第1张
}
run(ul,-pic*500);//再执行 anniu++;//先加加
if(anniu>olkids.length-1) //后判断 ,因为序列号从0到4，所以需要减一
{
anniu=0;
}
for(var i=0;i<olkids.length;i++) //再执行
{
for(var j=0;j<olkids.length;j++)
{
olkids[j].className="";
}
olkids[anniu].className="current"; //播放了0张，第0个按钮黄色，播放了1张，第1个按钮黄色 }
} //最后，鼠标经过大盒子，清除定时器，离开时又开始定时器
demo.onmouseover=function () {
clearInterval(timer);
}
demo.onmouseout=function () {
timer=setInterval(timer);
} //匀速运动动画封装函数
function run(obj,target)
{
var speed=(target-obj.offsetLeft)>0 ? 10 : -10; //用来判断应该往前走还是后退
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var result=target-obj.offsetLeft; //盒子距离目标位置的距离
if(Math.abs(result)<=10) //盒子距离目标位置的距离在步长10以内时，说明到位置了，因为不会在10以内
{
obj.style.left=target+"px";
clearInterval(obj.timer);
}
else{
obj.style.left=obj.offsetLeft+speed+"px";
}
},10)
} </script>
效果：1，轮播图要无缝滚动（处理：5张轮播图的最后再添加一张轮播图，即添加第一张图片放在最 后）
2，右下方的按钮跟随轮播图的滚动而滚动（pic=anniu=this.index，鼠标碰到按钮上，都以当 前的索引号为主)
3，自动播放，设置定时器。
关键代码：
1，布局：（5个按钮在js里面添加)
<div id="demo">
<div id="picbox">
<ul>
<li><img src="taobao/5.jpg" alt=""></li>
<li><img src="taobao/5.jpg" alt=""></li>
<li><img src="taobao/5.jpg" alt=""></li>
<li><img src="taobao/5.jpg" alt=""></li>
<li><img src="taobao/5.jpg" alt=""></li>
</ul>
</div>
</div>
2，把ul里面的第一张图片克隆添加到ul里面去
ul.appendChild( ulkids[],cloneNode(true));
3,demo里面添加ol , 然后通过for循环添加 li ，并且第一个li 的当前样式--背景颜色是黄色
var ol=document.createElement("ol");
demo.appendChild(ol);
for(var i=;i<ulkids.length-;i++)
{
var li=document.createElement("ll");
ul.appendChild(li);
li.innerHTML=i+;
}
ol.children[].className="current";
4, 动画，首先实现效果：鼠标移动哪个按钮上方，哪个按钮就变成黄色背景，需要遍历所有按钮，然后利用排他思想让所有按钮失去背景而当前按钮黄色背景。
当鼠标移动到第一个按钮，ul 的 left 值为0，移动到第二个按钮，left值减去一张图片的长度，依次，所以需要自定义当前按钮的索引号 index 属性，遍历所有按钮时，ul 的 left值就是当前索引号乘以一张图片的宽度的负值。
最后，鼠标移动到当前按钮，要把当前按钮的索引号的值赋给pic和anniu
var olkids=ol.children;
for(var i=;i<olkids.length;i++)
{
olkids[i].index=i;
olkids[i].onmouseover=function(){
for(var j=;j<olkids.length;j++)
{
olkids[i].className="";
}
this.className="current";
run(ul , -this.index*);
pic=anniu=this.index;
}
}
5，轮播图每个一秒钟自动播放，设置定时器
pic 控制播放张数
anniu 控制播放按钮
封装一个自动播放函数（图片播放和按钮播放，都是先++后判断再执行）
注意图片的自动播放：播放到第5张之后（pic> ulkids.length-1) ，迅速切到第一张图片( ul.style.left=0), 然后从第二张图片开始播放，因为第一张已经播放过了（第六张就是第一张)
注意按钮的自动播放：按钮播放到最后一个的判断是 if(anniu>olkids.length-1)， 减一是因为序列号是从0到4，播放到最后一个按钮之后，又从第一个按钮开始播放(anniu=0) 。最后按钮播放的执行是通过排他思想.
var timer=null;
var pic=;
var anniu=;
timer=setInterval(autoplay,);
function autoplay()
{
pic++;
if(pic>ulkids.length-)
{
ul.style.left=;
pic=;
}
run(ul, -pic*); anniu++;
if(anniu>olkids.length-)
{
anniu=;
}
for(var i=; i<olkids.length; i++)
{
for(var j=; j<olkids.length;j++)
{
olkids[j].className="";
}
this.className="current";
}
}
6, 最后一步，鼠标经过大盒子，清除定时器，取消自动播放，鼠标离开时自动播放又开始.
demo.onmouseover=funciton()
{
clearInterval(timer);
}
demo.onmouseout=function(){
timer.setInterval(timer);
}
轮播图--js课程的更多相关文章
- 轮播图--JS手写
轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...
- 轮播图js版&jQ版
JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...
- 小米官网轮播图js+css3+html实现
官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...
- 轮播图js编写
//面向对象 function Left() { this.index = 0; this.lefthover = $('#left-content'); this.listenhover(); th ...
- 转：大气炫酷焦点轮播图js特效
使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...
- banner轮播图js
例子1: if(!$('.side_ul ul').is(":animated")){ var wli = $('.side_ul li').width()+ ...
- 简单介绍无限轮播图，js源代码
无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html> <head> <meta charse ...
- App轮播图
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
随机推荐
- 微信小程序访问后台出现 对应的服务器证书无效。控制台输入 showRequestInfo() 可以获取更详细信息。
检查微信开发者平台配置 https 服务端 nginx 配置 ssl 协议是否有效 在开发者工具中可以使用(详情 > 不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS ...
- PCA 最大方差理论的直观解释
PCA 这个名字看起来比较玄乎,其实就是给数据换一个坐标系,然后非常生硬地去掉一些方差很小的坐标轴. 例:三维空间中,有一些数据只分布在一个平面上,我们通过"坐标系旋转变换",使得 ...
- 修改win10 capslock键成esc键 vim
桌面编辑一个文件CapsLock2Esc.reg Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\CurrentCont ...
- 2、maven仓库位置设置
根据我们maven的安装目录找到config文件夹,并找到下面的setting.xml文件,在该文件里面添加下面的代码: <localRepository>F:\apache-maven- ...
- 【Python】—— 获取当前运行函数名称和类方法名称
原文出处: python笔记19-获取当前运行函数名称和类方法名称 获取函数名称 1.在函数外部获取函数名称,用.__name__获取 2.函数内部获取当前函数名称,用sys._getframe(). ...
- Redis存储对象序列化和反序列化
import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.ObjectInpu ...
- Jmeter之非GUI模式（命令行）执行
在使用Jmeter进行性能测试时,建议使用非GUI模式执行. 命令行启动 1.进入jmeter安装的bin目录 2.执行Jmeter命令 如下: (1.jmeter.bat -n -t E:\apac ...
- laravel 添加后台登陆守护器
后台不能在一个浏览器登陆,下面简单配置下即可解决这个问题. 设置路由如下: <?php /** * 后台路由,从Illuminate\Routing\Router控制器的auth()方法中复制过 ...
- c# 排列组合代码类
/// <summary> /// 排列组件算法类 /// </summary> /// <typeparam name="T"></ty ...
- Android专项测试监控资源
版本号 V 1.1.0 Android性能测试分为两类:1.一类为rom版本(系统)的性能测试2.一类为应用app的性能测试(本次主要关注点为app的性能测试) Android的app性能测试包括的测 ...