杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

简介: 杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

 

JavaScript案例之跑马灯左右无缝连接

效果图:

思路:

   1.先做界面

       1.1 制作一个大盒子,进行存放整个图片及按钮区域

       1.2 制作两个按钮和中间区域盒子

       1.3 中间区域盒子中使用无序列表进行排放图片,并且每个图片可以作为一个链接进行点击

   2..CSS

       2.1 清除全局的外边距和内边距

       2.2 去除无序列表的黑点

       2.3 去除存放图片区域的边界线

       2.4 确定大盒子的宽高和位置【宽、高、上下空出50像素,水平居中、绝对定位】

       2.5 左、按钮的样式【块级显示、宽、高、背景图片及平铺位置、绝对定位、上、左】

       2.6 左按钮悬浮后样式【背景图片及平铺位置

   2.7 右、按钮的样式【块级显示、宽、高、背景图片及平铺位置、绝对定位、上、左】

       2.8 按钮悬浮后样式【背景图片及平铺位置】

       2.9 中间盒子定位

       2.10 中间盒子悬浮效果

   3..JavaScript

       3.1根据不同的标签名称去获取不同的元素          

     ...{尚未写完,稍后补上}

参考代码:

Html代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript案例之跑马灯左右无缝连接</title>
</head>
<body>
<div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn_left"></a>
    <a href="javascript:void(0);" class="btn_right"></a>
    <div class="wrap">
        <ul>
            <li><a href="http://teach.javabs.cn/"><img src="img/1.jpg" alt="杨校老师在线课堂开课了" /></a></li>
            <li><a href="http://teach.javabs.cn/"><img src="img/2.jpg" alt="杨校老师在线课堂开课了"/></a></li>
            <li><a href="http://teach.javabs.cn/"><img src="img/3.jpg" alt="杨校老师在线课堂开课了"/></a></li>
            <li><a href="http://teach.javabs.cn/"><img src="img/4.jpg" alt="杨校老师在线课堂开课了"/></a></li>
        </ul>
    </div>
</div>
</body>
</html>

 CSS代码

* {
  padding: 0;
  margin: 0;
}
 
li {
  list-style: none;
}
 
img {
  border: 0;
}
 
.roll {
  width: 880px;
  height: 108px;
  margin: 50px auto 0;
  position: relative;
}
 
.btn_left {
  display: block;
  width: 68px;
  height: 68px;
  background: url(img/btn.jpg) no-repeat -70px -69px;
  position: absolute;
  top: 20px;
  left: 1px;
  z-index: 1;
}
 
.btn_left:hover {
  background: url(img/btn.jpg) no-repeat -70px 0;
}
 
.btn_right {
  display: block;
  width: 68px;
  height: 68px;
  background: url(img/btn.jpg) no-repeat 1px -69px;
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 1;
}
 
.btn_right:hover {
  background: url(img/btn.jpg) no-repeat 1px 0;
}
 
.roll .wrap {
  width: 728px;
  height: 108px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
 
.roll ul {
  position: absolute;
  top: 0;
  left: 0;
}
 
.roll li {
  float: left;
  width: 182px;
  height: 108px;
  text-align: center;
}
 
.roll li a:hover {
  position: relative;
  top: 2px;
}
 
.control {
  border-bottom: 1px solid #ccc;
  background: #eee;
  text-align: center;
  padding: 20px 0;
}

JavaScript代码

window.onload = function() {
  var oDiv = document.getElementById('roll');
  var oUl = oDiv.getElementsByTagName('ul')[0];
  var aLi = oUl.getElementsByTagName('li');
  var oBtn = oDiv.getElementsByTagName('a'); //获取按钮
 
  oUl.innerHTML += oUl.innerHTML;
  oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
 
  var speed = -5;
  var time = null;
  time = setInterval(function() {
    oUl.style.left = oUl.offsetLeft + speed + 'px';
    //alert(oUl.offsetWidth)//-728
    //alert(oUl.offsetLeft)//-5
    if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
      oUl.style.left = 0 + 'px';
    } else if(oUl.offsetLeft > 0) {
      oUl.style.left = -oUl.offsetWidth / 2 + 'px';
    }
  }, 30);
  oBtn[0].onmouseover = function() {
    speed = -5;
  };
  oBtn[1].onmouseover = function() {
    speed = 5;
  };
  oUl.onmouseover = function() {
    clearInterval(time);
  }
  oUl.onmouseout = function() {
    time = setInterval(function() {
      oUl.style.left = oUl.offsetLeft + speed + 'px';
      if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
        oUl.style.left = 0 + 'px';
      } else if(oUl.offsetLeft > 0) {
        oUl.style.left = -oUl.offsetWidth / 2 + 'px';
      };
    }, 30);
  }
 
};

图片素材分享:

       


分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。

目录
相关文章
|
7天前
|
JavaScript 关系型数据库 API
Nest.js 实战 (二):如何使用 Prisma 和连接 PostgreSQL 数据库
这篇文章介绍了什么是Prisma以及如何在Node.js和TypeScript后端应用中使用它。Prisma是一个开源的下一代ORM,包含PrismaClient、PrismaMigrate、PrismaStudio等部分。文章详细叙述了安装PrismaCLI和依赖包、初始化Prisma、连接数据库、定义Prisma模型、创建Prisma模块的过程,并对比了Prisma和Sequelize在Nest.js中的使用体验,认为Prisma更加便捷高效,没有繁琐的配置。
Nest.js 实战 (二):如何使用 Prisma 和连接 PostgreSQL 数据库
若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
|
17天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
17天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
13 0
|
18天前
|
JavaScript
js 滚动鼠标滑轮放大缩小图片
js 滚动鼠标滑轮放大缩小图片
10 0
|
18天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
30 0
|
18天前
|
数据采集 JSON JavaScript
JS逆向-反反爬案例
破解爬虫JS加密反爬, 逆向JS解析
|
20天前
|
JavaScript 前端开发 API
JS案例:在浏览器实现自定义菜单
JS案例:在浏览器实现自定义菜单
15 0
|
20天前
|
JavaScript 前端开发 API
JS案例:前端Iframe及Worker通信解决思路
JS案例:前端Iframe及Worker通信解决思路
18 0
|
20天前
|
JavaScript 算法 中间件
JS案例:接口加解密与防重放
JS案例:接口加解密与防重放
11 0