轮播图--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.注意在动画时 ...
随机推荐
- logstash搭建
logstash就是一个具备实时数据传输能力的管道,负责将数据信息从管道的输入端传输到管道的输出端:与此同时这根管道还可以让你根据自己的需求在中间加上滤网,Logstash提供里很多功能强大的滤网以满 ...
- wannafly 练习赛10 E 数列查找（莫队+分块分块分块......）
链接:https://www.nowcoder.net/acm/contest/58/E 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit ...
- [CSP-S模拟测试]:取石子（博弈论+DP）
题目描述 有三堆石子,它们的石子个数分别为$x,y,z$.$A$和$B$正在博弈,由$A$先手,双方轮流操作.每次操作是指,选择若干堆($1-3$堆)石子,从中各取出相同数量的石子(不能$1$个都不取 ...
- 使用GitHub（一）：添加SSHkey
使用GitHub(一):添加SSHkey 本文简单介绍使用GitHub对代码进行版本控制,包括添加SSHkey.配置Git.使用Git创建版本库并在GitHub上进行管理,主要目的是对学习内容进行总结 ...
- Windows系统安装分盘
按shift + F10 打出dos窗口
- 移动Anaconda安装目录后导致图标变白以及Anaconda Navigator，Anaconda Prompt，jupyter notebook和spyder启动不了的解决方法
Q:因为移动了Anaconda3的安装目录,所以Anaconda3的相应应用程序启动不了,包括图标也会变白 解决方法:修改对应快捷键的属性,有对应的启动位置,修改下位置路径配置以及图标(Anacond ...
- 1443：【例题4】Addition Chains
1443:[例题4]Addition Chains 题解 注释在代码里 注意优化搜索顺序以及最优化剪枝 代码 #include<iostream> #include<cstdio&g ...
- vue 表格组件分享
分享一款自己写的table组件 用起来还算简单好用 (先介绍使用方法(ts版本的)) 引入组件不多说 import jTable from '../comp/comp/table/table.v ...
- Vue知识整理16：单文件组件
过程较为复杂,这里直接写出视频地址,可以直接查看 https://learning.dcloud.io/#/?vid=14
- c# 窗口关闭方法
背景:点击datagridview某条信息弹出信息详情窗口,当连续点击时需要关闭之前的详情窗口. 实现方式: 父窗口中 全局创建子窗口(MsgDetailFrm ): MsgDetailFrm de ...