使用JS实现轮播图的效果
其中的一些css样式代码就省略了，下面只把结构层html、行为层js的代码展示出来 ，看代码说事。
一、简单的轮播图
<div class="box" id="box">
<div class="inner">
<ul>
<li><a href="#"><img src="data:images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/05.jpg" alt=""/></a></li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</div>
<script>
//获得要操作的对象
var box = document.getElementById("box");
var inner = box.children[0];
var ul = inner.children[0];
var square = inner.children[1];
var spans = square.children; //所有的字级元素
var imgWidth = inner.offsetWidth;
//循环遍历span标签
for(var i=0;i<spans.length;i++){
spans[i].index = i;
spans[i].onmouseover = function(){
for(var j=0;j<spans.length;j++){
spans[j].className = "";
}
this.className = "current";
var target = -imgWidth*this.index;
sports(ul,target);
}
}
//运动函数的封装
function sports(obj,target){
clearInterval(obj.timeId); //，每次点击时先清空计时器
obj.timeId = setInterval(function(){
var step =10;
var leader = obj.offsetLeft; //先获得当前的距离左侧的位置
//
step = leader<target?step:-step;
if(Math.abs(leader-target) > Math.abs(step)){
leader = leader+step;
obj.style.left = leader + "px";
}else{
clearInterval(obj.timeId); //清除计时器
obj.style.left = target+"px";
}
},10);
}
</script>
二、左右焦点轮播图
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="data:images/1.jpg" alt=""/></li>
<li><img src="data:images/2.jpg" alt=""/></li>
<li><img src="data:images/3.jpg" alt=""/></li>
<li><img src="data:images/4.jpg" alt=""/></li>
<li><img src="data:images/5.jpg" alt=""/></li>
</ul>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script>
//获取要操作对象
var box = document.getElementById("box");
var ad = box.children[0];
var ul = document.getElementById("imgs");
var arr = document.getElementById("arr");
var arrLeft = document.getElementById("left");
var arrRight = document.getElementById("right");
var imgWidth = ad.offsetWidth;
var lis = ul.children;
//鼠标移入大盒子时显示按钮
box.onmouseover = function(){
arr.style.display ="block";
}
box.onmouseout = function(){
arr.style.display = "none"; //鼠标离开大盒子时隐藏按钮
}
//给左右按钮注册单击事件
var pic=0; //重新定义一个变量，来标识图片的个数或索引
arrRight.onclick = function(){
if(pic<lis.length-1){
pic++;
}
var target = -imgWidth*pic;
sports(ul,target);
}
arrLeft.onclick =function(){
if(pic>0){
pic--;
}
var target = -imgWidth*pic;
sports(ul,target);
}
//运动函数的封装
function sports(obj,target){
clearInterval(obj.timeId); //，每次点击时先清空计时器
obj.timeId = setInterval(function(){
var step =10;
var leader = obj.offsetLeft; //先获得当前的距离左侧的位置
//
step = leader<target?step:-step;
if(Math.abs(leader-target) > Math.abs(step)){
leader = leader+step;
obj.style.left = leader + "px";
}else{
clearInterval(obj.timeId); //清除计时器
obj.style.left = target+"px";
}
},10);
}
</script>
三、无缝滚动原理轮播图
<div class="box" id="screen">
<ul>
<li><img src="data:images/01.jpg" alt=""/></li>
<li><img src="data:images/02.jpg" alt=""/></li>
<li><img src="data:images/03.jpg" alt=""/></li>
<li><img src="data:images/04.jpg" alt=""/></li>
<li><img src="data:images/01.jpg" alt=""/></li>
</ul>
</div>
<script>
//获得要操作的对象
var box = document.getElementById("screen");
var ul = box.children[0];
var lis = ul.children;
var imgWidth = ul.offsetWidth;
var timeId =null;
// timeId = setInterval(function(){
// var leader = ul.offsetLeft;
// var step = -10;
// if(leader>-1200){
// leader = leader + step;
// ul.style.left = leader + 'px';
// }else{
// ul.style.left = "0px";
// }
// },60)
timeId = setInterval(play,60);
//鼠标移入大盒子时，清除计时器
box.onmouseover = function(){
clearInterval(timeId);
}
//鼠标离开大盒子时，重新开启计时器
box.onmouseout = function(){
// timeId = setInterval(function(){
// var leader = ul.offsetLeft;
// var step = -10;
// leader = leader + step;
// ul.style.left = leader + 'px';
// },60)
timeId = setInterval(play,60);
}
//封装函数
function play(){
var leader = ul.offsetLeft;
var step = -10;
if(leader>-1200){
leader= leader + step;
ul.style.left = leader + 'px';
}else{
ul.style.left = "0px";
}
}
</script>
四、完整的轮播图
<div id="box" class="all" >
<div class="ad">
<ul id="imgs">
<li><img src="data:images/1.jpg" width='500' height='200' alt=""/></li>
<li><img src="data:images/2.jpg" width='500' height='200' alt=""/></li>
<li><img src="data:images/3.jpg" width='500' height='200' alt=""/></li>
<li><img src="data:images/4.jpg" width='500' height='200' alt=""/></li>
<li><img src="data:images/5.jpg" width='500' height='200' alt=""/></li>
</ul>
<ol></ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
/**
* Created by Administrator on 2016/8/25.
*/
/**
* 封装了一个匀速运动函数
* @param obj
* @param target
*/
function animate(obj,target){
clearInterval(obj.timerId);
obj.timerId = setInterval(function(){
var leader = obj.offsetLeft;
var step = 10;
step = leader<target?step:-step;
if(Math.abs(leader-target) > Math.abs(step)){
leader = leader + step;
obj.style.left = leader + 'px';
}else{
clearInterval(obj.timerId);
obj.style.left = target + 'px';
}
},15)
}
/**
* 封装了一个滚动函数
*/
function play(){
var leader = ul.offsetLeft;
var step = -10;
if(leader>=-1200){
leader = leader + step;
ul.style.left = leader + 'px';
}else{
ul.style.left = "0px";
}
}
<script src="common.js"></script>
<script>
// 1. 先获取要操作的对象
var box = document.getElementById("box");
var ad = box.children[0];
var ul = document.getElementById("imgs");
var lis = ul.children;
var ol = ad.children[1];
var arr = document.getElementById("arr");
var arrLeft = document.getElementById("left");
var arrRight = document.getElementById("right");
var imgWidth = ad.offsetWidth;
var timerId = null;
// 2. 根据图片的个数动态的生成小按钮
for(var i=0;i<lis.length;i++){
var li = document.createElement("li");
li.innerHTML = i+1;
ol.appendChild(li);
}
// 3. 获得所有的ol下的li，然后让第一个变成黄色
var olLis = ol.children;
olLis[0].className = "current";
// 4. 当鼠标移入的时候，对应的小方块显示出来
for(var j=0;j<olLis.length;j++){
olLis[j].index = j;
olLis[j].onmouseover = function(){
for(var k=0; k<olLis.length;k++){
olLis[k].className = "";
}
this.className = "current";
var target = -imgWidth*this.index;// 5. 让图片移动对应的小方块索引的图片宽度的距离 如果小方块的索引为0，则让ul移动0个图片的距离
animate(ul,target); //如果小方块的索引为1，就让ul移动1个图片宽度的距离
//让三者的显示状态同步或是统一起来
pic = square=this.index; //让三者的索引值统一起来
}
}
// 6. 鼠标移入的时候，显示左右按钮并注册点击事件
box.onmouseover = function(){
arr.style.display = "block";
clearInterval(timerId); //清除定时器
}
box.onmouseout = function(){
arr.style.display = "";
timerId = setInterval(playNext,1000);
}
// 8. 动态添加第一张图片到最后的位置
var imgFirst = lis[0].cloneNode(true);
ul.appendChild(imgFirst);
// 7. 给左右按钮注册点击事件
var pic=0; //定义一个变量来表示移动的图片个数 也相当于索引
var square =0; //默认显示的小方块的索引
arrRight.onclick = function(){
// if(pic==lis.length-1){
// pic=0; //迅速的让索引编号 等于0
// ul.style.left = "0px"; // 让ul快速的恢复成原来的位置
// }
// pic++;
// var target = -imgWidth*pic;
// sports(ul,target);
//
// if(square<olLis.length-1){
// square++;
// }else{
// square=0;
// }
// for(var i=0;i<olLis.length;i++){
// olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
// }
// olLis[square].className = "current";
playNext();
}
arrLeft.onclick =function(){
if(pic==0){
pic=lis.length-1;
ul.style.left = -imgWidth*pic + "px";
}
pic--;
var target = -imgWidth*pic;
animate(ul,target);
if(square>0){
square--;
}else{
square = olLis.length-1
}
for(var i=0;i<olLis.length;i++){
olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
}
olLis[square].className = "current";
}
//添加自动轮播功能
timerId = setInterval(playNext,1000);
function playNext(){
if(pic==lis.length-1){
pic=0; //迅速的让索引编号 等于0
ul.style.left = "0px"; // 让ul快速的恢复成原来的位置
}
pic++;
var target = -imgWidth*pic;
animate(ul,target);
if(square<olLis.length-1){
square++;
}else{
square=0;
}
for(var i=0;i<olLis.length;i++){
olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
}
olLis[square].className = "current";
}
</script>
使用JS实现轮播图的效果的更多相关文章
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- js编写轮播图，广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- js实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 【Lua学习笔记之：Lua环境搭建 Windows 不用 visual studio】
Lua 环境搭建 Windows 不用 visual studio 系统环境:Win7 64bit 联系方式:yexiaopeng1992@126.com 前言: 最近需要学习Unity3d游戏中的热 ...
- linux运维自动化shell脚本小工具
linux运维shell 脚本小工具,如要分享此文章,请注明文章出处,以下脚本仅供参考,若放置在服务器上出错,后果请自负 1.检测cpu剩余百分比 #!/bin/bash #Inspect CPU # ...
- Win8+VMware12+CentOS7网络设置
VMware提供了三种将虚拟网卡和物理网卡捆绑起来的方式,即桥接(Bridge)模式,网络地址转换(Network Address Transformation, NAT)模式和主机(Host Onl ...
- Microsoft SQL Server 数据库服务器管理维护角色
固定服务器角色: 按照从最低级别的角色(bulkadmin)到最高级别的角色(sysadmin)的顺序进行描述: Bulkadmin:这个服务器角色的成员可以运行BULK INSERT语句.这条语句允 ...
- 二十七、JDK1.5新特性---Annotation
上篇文章介绍了反射的一些基础知识以及应用案例,本文将介绍jdk 1.5 出现的新特性——Annotation也就是我们所说的注解,即使用注释的方式加入一些程序的信息. 注解相当于一种标记,在程序中加了 ...
- ORA-1034 ORACLE not available (转）
http://blog.csdn.net/onlyone_htliu/article/details/6075150 前言 每一个DBA在进行数据库管理的过程中不可避免的要遇到形形色色的错误(ORA- ...
- nodejs的初学
1.启服务器.先server.js,再命令行输入命令node server.js,打开浏览器输入http://127.0.0.1:2016可以看到有内容输出. server.js代码如下: var h ...
- python27 + windows7 报错 No module named requests
1.下载插件包 地址: http://www.lfd.uci.edu/~gohlke/pythonlibs/#distribute 包名: requests-2.12.4-py2.py3-none-a ...
- Bash:-:-通过awk获取文本变量的赋值
txt格式: ... logport='13000' sessionport='23000' ... ######################## 只获取logport的赋值13000 awk ' ...
- 谈谈html5存储之IndexdDB
IndexdDB简介 html5中indexdDB是一种能在浏览器持久的存储结构化数据的数据库:且具有丰富的查询能力. 新建一个IndexdDB数据库 IDBOpenDBRequest定义有几个重要的 ...