使用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 ...
随机推荐
- Android监听返回键、Home键+再按一次返回键退出应用
Android监听返回键需重写onKeyDown()方法 Home键keyCode==KeyEvent.KEYCODE_HOME @Override public boolean onKeyDown( ...
- final发布评论
在刚刚过去的final发布会上,各小组都展示了自己团队两个月来的团队成果.以下是我对各小组的发布 过程和产品展示的评论. 1.金州勇士团队 金州勇士团队的作品是在线考试系统.从产品的角度来说,相比于b ...
- jQuery属性操作
jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...
- 161228、Java IO流读写文件的几个注意点
平时写IO相关代码机会挺少的,但却都知道使用BufferedXXXX来读写效率高,没想到里面还有这么多陷阱,这两天突然被其中一个陷阱折腾一下:读一个文件,然后写到另外一个文件,前后两个文件居然不一样? ...
- oracle迁移postgres之-oracle_fdw
1. 安装oracle_fdw 在编译安装前,需要设置postgres的环境变量,如在.bash_profile中增加: export ORACLE_HOME=/u01/app/oracle expo ...
- PXC(percona xtradb cluster)新加节点避免SST的方法
环境: node1:192.168.0.100 pxc节点 node2:192.168.0.101 新节点 把新加入的节点先建立为node1的从库,可以使用mysqldump或innobackup ...
- 【python】如何在某.py文件中调用其他.py内的函数
假设名为A.py的文件需要调用B.py文件内的C(x,y)函数 假如在同一目录下,则只需 import B if __name__ == "__main__": B.C(x,y) ...
- [课程设计]Scrum 3.2 多鱼点餐系统开发进度（页面优化&下单详细信息页面）
Scrum 3.2 多鱼点餐系统开发进度(页面优化&下单详细信息页面) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选 ...
- 测试机安装fd-server问题记录
今天在239测试机上安装了fd-server来代替apache,汇总下遇到的问题和解决方法. 1. 安装git时使用yum安装,命令 yum install git 2. 启动fd-server之前要 ...
- Popular Cows-POJ2186Tarjan
Time Limit: 2000MS Memory Limit: 65536K Description Every cow's dream is to become the most ...