前言: 我之前在学 JavaScript 的时候, 基本上都是看的JavaScript 高级程序设计, 而锻炼 JS 的例子也基本上是书上的小例子, 每章看完了也很容易忘记一些知识点, 缺乏实战的锻炼, 于是就在网上找一些实例做做并且根据例子做一些拓展实例会比单纯的了解理论知识好多了, 于是就有了这个专题文章JavaScript 实例每日一练, 和我一起通过实例深入了解 JavaScript 的 "奥秘" 吧, 本专题文章不定期更新~
JS 实现轮播图片
一, 简单介绍
轮播图片是一组为了向浏览网页的用户展示图片信息的会自动播放的图片. 在许多网站中你都会看到它的身影.
例如:
二, 特点
轮播图片一般具备以下几个特点:
1, 点击左右两边的箭头切换图片
2, 当鼠标移出图片范围, 自动切换下一张图片; 当鼠标移入图片范围, 停止切换下一张图片
3, 切换到某一张图片时, 底部的按钮样式也跟着改变
4, 点击按钮即会切换到相应位置的图片
三, 轮播图片原理
一系列的大小相等的图片平铺, 利用 CSS 布局只显示一张图片, 其余隐藏. 通过计算偏移量利用定时器实现自动播放, 或通过手动点击事件切换图片.
- -index.html
- -main.css
- -main.js
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title > 实现简单的轮播图片 </title>
- <link rel="stylesheet" href="css/main.css" />
- </head>
- <body>
- <div id="container">
- <div id="list" style="left:0px">
- <img src="img/1.png" alt="1"/>
- <img src="img/2.png" alt="2"/>
- <img src="img/3.png" alt="3"/>
- <img src="img/4.png" alt="4"/>
- <img src="img/5.png" alt="5"/>
- </div>
- <div id="buttons">
- <span index="1" class="on"></span>
- <span index="2"></span>
- <span index="3"></span>
- <span index="4"></span>
- <span index="5"></span>
- </div>
- <a href="javascript:;" class="arrow" id="prev"><</a>
- <a href="javascript:;" class="arrow" id="next">></a>
- </div>
- <script src="main.js"></script>
- </body>
- </html>
- *{
- margin: 0;
- padding: 0;
- text-decoration: none;
- }
- #container{
- margin:20px auto;
- width: 600px;/* 此宽度根据图片宽度调整 */
- height: 483px;/* 此高度根据图片高度调整 */
- border: 3px solid #333;
- overflow: hidden; /* 为了将图片隐藏 */
- position: relative;
- }
- #list{
- width: 4200px;/* 图片总宽度 */
- height: 483px;
- position: absolute;
- z-index: 1;
- }
- #list img{
- float: left;
- width: 600px;
- height: 483px;
- }
- #buttons{
- position: absolute;
- height: 10px;
- width: 100px;
- z-index: 2;/* 将 buttons 放在 list 上层 */
- bottom: 20px;
- right: 250px;
- }
- #buttons span {
- cursor: pointer;
- float: left;
- border: 1px solid #fff;
- border-radius: 50%;
- height: 10px;
- width: 10px;
- margin-right: 5px;
- background: #E98352;
- }
- #buttons .on {
- background: #474550;
- }
- .arrow{
- display: none;
- cursor: pointer;
- line-height: 40px;
- text-align: center;
- font-size: 30px;/* 设置箭头的大小 */
- width: 40px;
- height: 40px;
- position: absolute;
- z-index: 2;/* 将 arrow 放在 list 上层 */
- top: 180px;
- color: #fff;
- background:#474550 ;
- }
- .arrow:hover {
- background-color: #E98352;
- }
- #container:hover .arrow {
- display: block;
- }
- #pre {
- left: 20px;
- }
- #next {
- right: 20px;
- }
- window.onload = funtion(){
- var list = document.getElementById("list");
- var prev = document.getElementById("prev");
- var next = document.getElementById("next");
- function animate(offset){
- /* 获取的 style.left, 是相对左边获取距离, 所以第一张图后 style.left 都为负值 */
- /* 且 style.left 获取的是字符串, 需要用 parseInt() 取整转化为数字.*/
- var newLeft = parseInt(list.style.left) +offset;
- list.style.left = newLeft + "px";
- }
- prev.onclick = function(){
- animate(600);
- }
- next.onclick = function(){
- animate(-600);
- }
- }
- if(newLeft<-2400){
- list.style.left = -600 + 'px';
- }
- if(newLeft>0){
- list.style.left = -2400 + 'px';
- }
- var timer;// 设置定时器
- function autoplay(){
- /*setInterval 返回的是定时器的 ID*/
- timer = setInterval(function(){
- next.onclick()
- },3000);
- }
- autoplay();
- var container = document.getElementById('container');
- function stopplay(){
- clearInterval(timer);
- }
- container.onmouseover = stopplay;
- container.onmouseout = autoplay;
- var buttons = document.getElementById('buttons').getElementsByTagName('span');
- var index = 1;
- function showButton(){
- // 清除之前的样式
- for(let i = 0;i<buttons.length;i++){
- if(buttons[i].className == 'on'){
- buttons[i].className = '';
- }
- }
- buttons[index-1].className = 'on';
- }
- prev.onclick = function() {
- index-=1;
- if(index <1){
- index = 5;
- }
- showButton();
- animate(600);
- }
- next.onclick = function() {
- index+=1;
- if(index> 5){
- index = 1;
- }
- showButton();
- animate(-600);
- }
- for(var i = 0;i<buttons.length;i++){
- buttons[i].onclick = function() {
- var clickIndex = parseInt(this.getAttribute('index'));
- var offset = 600*(index - clickIndex);
- animate(offset);
- index = clickIndex;
- showButton();
- }
- }
- function animate(offset) {
- // 获取的是 style.left, 是相对左边获取距离, 所以第一张图后 style.left 都为负值,
- // 且 style.left 获取的是字符串, 需要用 parseInt() 取整转化为数字.
- var newLeft = parseInt(list.style.left) + offset;
- list.style.left = newLeft + 'px';
- /* 只需在这添加一行代码 */
- list.style.transition='300ms ease';
- /* 添加 css 的 transition*/
- if(newLeft <-2400){
- list.style.left = 0 + 'px';
- }
- if(newLeft> 0){
- list.style.left = -2400 + 'px';
- }
- }
来源: http://www.qdfuns.com/article/48075/631703471eadfdadbf28ef71ced2c5e8.html