使用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 ...
随机推荐
- html5，表单的综合案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- WebService "因 URL 意外地以 结束，请求格式无法识别" 的解决方法
最近在做一个图片上传的功能,js调用用webservice进行异步访问服务器,对于不是经常用webservice的菜鸟来说,经常会遇到以下的问题(起码我是遇到了) 在页面上写了js调用代码如下所示: ...
- 书籍推荐《以C语言解析电脑》
这本书要想买到,在大陆看起来比较难,理出个目录,看个大概: 另外在这个地方可以预览前20页:http://openebook.hyread.com.tw/ebookservice/hyviewer/o ...
- apache2.4配置Django1.7运行环境
系统环境Centos 6.5 这篇文章不适用6以下的系统,因为会碰到这个错误 [Mon Sep 22 18:13:02 2014] [error] [client 10.209.75.90] Trun ...
- MyBatis传入参数为集合、数组SQL写法
参考:http://blog.csdn.net/small____fish/article/details/8029030 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合 ...
- OC-@property、self及类的本质
让代码书写更加简便 --1-- 设置器和访问器 1.1 setter 1.2 getter --2-- 类的本质 2.1 类类型的对象 2.2 类的本质 2.3 如何获取类对象 2.4 类对象的使用 ...
- [课程设计]任务进度条&开发日志目录
任务进度条&开发日志目录 周期 时间 任务 Sprint One 11.14 ● Scrum团队分工及明确任务1.0 Sprint One 11.15 ● Scr ...
- Jquery表单验证
.代码中添加引用(必备引用) <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript&quo ...
- 我的Android第二章
前言 之前有很多人遇到了关于内部类的问题[主要在android的学习之中会大量的使用到],内部类是什么,内部类怎么定义,内部类的分类,内部类的好处,内部类如何访问,这里我们来结合代码简单的理解一下 1 ...
- bzoj3223 文艺平衡树
传送门 :http://www.lydsy.com/JudgeOnline/problem.php?id=3223 splay区间翻转的基础题,然而我还是调了一晚上(蒟蒻的悲哀) #include & ...