使用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 ...
随机推荐
- ffmpeg将图片合成视频
本来想做个android录制屏幕的功能,但是目前只能是截图 然后把图片合成视频,这里就需要用到 ffmpeg 在做之前也是参考了其它一些比较不错的文章 比如:http://www.open-open. ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- 3D数学的实际应用
以前自己在学习三维程序开发时并没有在意3D数学在程序中的重要作用,但在实际工作中逐渐发现:自己忽视了3D数学的作用,我们实际开发工作总要求模型准确的变换,而不是强调渲染有多炫,那是游戏,如果是仿真程序 ...
- Intent传递数据的方法
一.传递List 1.传递List<String>的方法 ArrayList<String> info = new ArrayList<String>(); inf ...
- curl 模拟请求get/post
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx24a0ef ...
- 货运APP产品魔力＝卓越功能×情感诉求
货运APP产品魔力＝卓越功能×情感诉求 [导语]在滴滴打车.快的打车软件风靡全国之际,很多企业也在探索如何将其应用到公路货运领域用以整合社会运力资源.但一方面大多数人聚焦的是干线运输中的长途货车运 ...
- 谷歌 HTML/CSS 规范 2016-12-30
背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除 ...
- pt-online-schema-change原理解析
都说pt-toolkit工具集中的pt-online-schema-change可以在线不锁表修改表结构,那么这个工具具体是什么原理呢,请见下面娓娓道来: 1.pt-online-schema-cha ...
- [OSG]OpenSceneGraph FAQ 以及OSG资源
1.地球背面的一个点,计算它在屏幕上的坐标,能得到吗? 不是被挡住了吗? 答:计算一个空间点的屏幕坐标,使用osgAPEx::GetScreenPosition函数.当空间点处于相机视空间内(不管它是 ...
- python查找空格和中文
前言 图片或者文件夹下,命名不规范,有中文或者有空格.这个脚本批处理查找,并输出到 txt中方便修改,也可以扩展为 直接脚本删除空格等.目前只用在Windows上,mac没有测试,不知道能不能行,有需 ...