使用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 ...
随机推荐
- paper122：多尺度与多分辨率的关系
本文转自:http://blog.csdn.net/chgm_456d/article/details/8100513 我一直对于 多尺度与多分辨率没有一个准确的概念.后来看了一些文章,其中xiaow ...
- URL请求工具
工作中有个需求,定期请求多个URL.“定期”采用计划任务实现,请求URL,虽说start url可以实现,但不灵活.自己制作了个专门请求URL的工具,并记录请求结果. 控制台程序代码: class P ...
- XEN的启动信息输出到“Platform timer is 14.318MHz HPET”就暂停接收的解决办法
使用Serial Over Lan(SOL)来双机调试 XEN,在 XEN 启动时,引导信息输出到以下这一句时,就不再发送调试信息了: ...(XEN) Intel machine check rep ...
- web应用安全防御100技 好书再次阅读， 变的只是表象，被概念迷惑的时候还是静下心来回顾本质
如何进行web应用安全防御,是每个web安全从业者都会被问到的问题,非常不好回答,容易过于肤浅或流于理论,要阐明清楚,答案就是一本书的长度.而本文要介绍一本能很好回答这个问题的优秀书籍——<we ...
- PowerShell 连接SQL
因为对SQL操作比较多,但有些操作其实都是重复性的,只是参数不太一样了,例如silo id, server name 等.希望可以通过powershell脚本提高效率. 尝试如下 1. 使用Power ...
- Android 监听返回键、HOME键
拦截返回键,HOME键,继承BaseActivity即可 import android.app.Activity; import android.content.BroadcastReceiver; ...
- 7.Git的版本退回
现在,你已经学会了修改文件,然后把修改提交到Git版本库,现在,再练习一次,修改readme.txt文件如下: Git is a distributed version control system. ...
- Asp.net mvc 添加Jquery UI
1.使用NuGet下载jquery ui Install-Package jQuery.UI.Combined 2.下载多语言文件: development-bundle/i18n目录下是jquery ...
- git 常用命令及解析 由浅入深
笔者用的是windows系统,不过并没有什么影响. Git 分布式版本控制系统. 为了让初学git的人明白git是干什么的,有什么意义 笔者觉得先来介绍git作为版本控制器是怎么运作的会让大家对后边 ...
- 在SpringMVC框架下实现文件的 上传和 下载
在eclipse中的javaEE环境下:导入必要的架包 web.xml的配置文件: <?xml version="1.0" encoding="UTF-8" ...