轮播图--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.注意在动画时 ...
随机推荐
- cvtColor
E:/OpenCV/opencv/sources/modules/imgproc/src/color.cpp CV_RGB2GRAY:RGB--->GRAY.
- Replicate（网络复制）,ActorRole（角色）,Ownership（所有权）以及RPC（远程调用）等等
I. Replication Replication指的是 从服务端向客户端 传递数据和信息的行为.注意是单向的,不会从客户端传递信息和数据到服务端. 假设一个Actor被设置为Replicates, ...
- Who is better?
徐州网络赛A 所谓斐波那契博弈 考场推了个假规律自闭== import java.math.BigInteger; import java.util.ArrayList; import java.ut ...
- 组件内导航之beforeRouteUpdate的使用
使用场景: 组件复用:路由跳转: beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 / ...
- React曾经忽略的知识点（下）
1.JSX渲染 想让类似 false.true.null 或 undefined 出现在输出中,你必须先把它转换成字符串 : <div> My JavaScript variable is ...
- for循环，foreach, map，reduce用法对比+for in，for of
for不做赘述,相当简单: foreach方法: forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数. 注意: forEach() 对于空数组是不会执行回调函数的. array.f ...
- 网络对抗技术 20165220 Exp7 网络欺诈防范
网络对抗技术 20165220 Exp7 网络欺诈防范 实验任务 (1)简单应用SET工具建立冒名网站 (1分) (2)ettercap DNS spoof (1分) (3)结合应用两种技术,用DNS ...
- C# WPF 漂亮的loading 效果
<UserControl x:Class="TestLoadPic.Loading" xmlns="http://schemas.microsoft.com/win ...
- leetcode 590.N-ary Tree Postorder Traversal N叉树的后序遍历
递归方法 C++代码: /* // Definition for a Node. class Node { public: int val; vector<Node*> children; ...
- 【Python】—— 获取函数内部变量名称
原文出处: https://blog.csdn.net/maixiaochai/article/details/88693507 关键语句: func_vars = func.__code__.co_ ...