js实现自动播放匀速轮播图
本文实例为大家分享了js实现自动播放匀速轮播图的具体代码，供大家参考，具体内容如下
函数封装： （ 匀速运动函数）
function animate(obj,target,step,speed){
clearInterval(obj.timer);
var absStep = Math.abs(step);
step = target > obj.offsetLeft ? absStep : -absStep;
obj.timer = setInterval(function(){
var distance = Math.abs(target - obj.offsetLeft);
obj.style.left = obj.offsetLeft + step + 'px';
if(distance < absStep){
clearInterval(obj.timer);
obj.style.left = target + 'px';
}
},speed);
}
对象可以动态生成属性，用对象的timer，避免了全局变量的使用，
实现步骤：
1.动态生成ol导航条，并将导航条放入all中使其成为孩子节点
2.根据ul中图片数量动态生成li标签，使li成为ol的子节点，
3.给第0个li标签加上颜色（添加属性current）
4.用设置的属性的值去操作图片使图片移动，达到鼠标放上去移动到该图片效果，排它原理实现样式效果
5.深度克隆ul中的第一张图片并将图片放在ul的末尾
6.加入自动播放函数使其自动播放，设置两个变量key，squre，key的值用来计算图片的序号，squre用来计算当前li的序号
7.自动播放函数中排他原理设置当前li标签样式
8.在设置onmouseover和onmouseout事件鼠标放在盒子上暂停，鼠标离开盒子，继续运动
9.在鼠标放在li标签时让key等于当前图片的index属性值 ，并把key的值赋给squre。
实现细节：
1.动态给ul克隆出第0张图片补到末尾，以实现自动轮播是无缝的效果，
2.克隆分深克隆和浅克隆，深克隆克隆带标签内的所有内容，
3.浅克隆只克隆外部标签，深克隆参数为true
效果：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>匀速轮播动画</title>
<style type="text/css">
*{ padding:0; margin:0; list-style:none; border:0;}
.all{
width:500px;
height:200px;
padding:7px;
border:1px solid #ccc;
margin:100px auto;
position:relative;
}
.screen{
width:500px;
height:200px;
overflow:hidden;
position:relative;
}
.screen li{
width:500px;
height:200px;
overflow:hidden;
float:left;
}
.screen ul{
position:absolute;
left:0;
top:0px;
width:3000px;
}
.all ol{
position:absolute;
right:10px;
bottom:10px;
line-height:20px;
text-align:center;
}
.all ol li{
float:left;
width:20px;
height:20px;
background:#fff;
border:1px solid #ccc;
margin-left:10px;
cursor:pointer;
}
.all ol li.current{
background:yellow;
}
</style>
<script src="js/匀速运动.js"></script>
<script>
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var ul = $('ul');
var all = $('all');
var imgs = ul.getElementsByTagName('img');
var ol = document.createElement('ol');
all.appendChild(ol);
for(var i=0;i<imgs.length;i++){
var li = document.createElement('li');
li.innerHTML = i+1;
li.setAttribute('index',i);
ol.appendChild(li);
}
ol.childNodes[0].className = 'current';
var olLis = ol.children;
for(var i=0;i<olLis.length;i++){
olLis[i].onmouseover = function(){
for(var j=0;j<olLis.length;j++){
olLis[j].className = '';
}
this.className = 'current';
var index = -500*this.getAttribute('index');
animate(ul,index,20,10);
key=this.getAttribute('index');
squre = key;
}
}
ul.appendChild(ul.children[0].cloneNode(true));
var timer=null;
var key=0;
var squre = 0;
timer=setInterval(autoPlay, 1000);
function autoPlay(){
key++; //记录图片
squre++;//记录导航条
if(key>olLis.length){
key=1;
ul.style.left = 0 + 'px';
}
if(squre>=olLis.length){
squre = 0;
}
animate(ul,-500*key,20,10);
for(var i=0;i<olLis.length;i++){
olLis[i].className = '';
}
olLis[squre].className = 'current';
}
all.onmouseover = function(){
clearInterval(timer);
}
all.onmouseout = function(){
timer=setInterval(autoPlay, 1000);
}
}
</script>
</head>
<body>
<div class="all" id='all'>
<div class="screen">
<ul id="ul">
<li><img src="images/taobao/1.jpg" width="500" height="200" /></li>
<li><img src="images/taobao/2.jpg" width="500" height="200" /></li>
<li><img src="images/taobao/3.jpg" width="500" height="200" /></li>
<li><img src="images/taobao/4.jpg" width="500" height="200" /></li>
<li><img src="images/taobao/5.jpg" width="500" height="200" /></li>
</ul>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生js实现轮播图的示例代码
很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
-
js实现轮播图的完整代码
今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->
-
JS轮播图实现简单代码
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播
-
JS实现纵向轮播图（初级版）
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下 描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度达到效果. 效果: 代码: js文件: /* * 工厂模式 * */ var Method=(function () { return { loadImage:function (arr,callback) { var img=new Image(); img.arr=arr; img.list=[
-
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&
-
JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
js实现点击左右按钮轮播图片效果实例
本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
-
JS实现横向轮播图（初级版）
本文实例为大家分享了JS实现横向轮播图的具体代码,供大家参考,具体内容如下 描述: 轮播图,初级,横向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的位移达到效果. 效果: 代码: js文件: /* * 工厂模式 * */ var Method=(function () { return { loadImage:function (arr,callback) { var img=new Image(); img.arr=arr; img.
-
JS实现横向轮播图（中级版）
本文实例为大家分享了JS实现横向轮播图的具体代码,供大家参考,具体内容如下 描述: 轮播图,中级,横向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),解决了初级版本的点1再点5时多张图片滑动的问题,核心只有两张图在切换,加入了图片加载. 效果: 代码: js文件: /* * 工厂模式 * */ var Method=(function () { return { loadImage:function (arr,callback) { var img=new Im