1 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         #box {

             position: relative;

             width: 1000px;

             height: 358px;

             margin: 100px auto;

         }

         #left {

             background-image: url("images/shutter_prevBtn.png");

             display: inline-block;

             z-index: 5;

             width: 50px;

             height: 50px;

             position: absolute;

             left: 0;

             top: 50%;

             margin-top: -25px;

         }

         #left:hover {

             background-position: 0 -48px;

         }

         #right {

             background-image: url("images/shutter_prevBtn.png");

             display: inline-block;

             z-index: 5;

             width: 50px;

             height: 50px;

             position: absolute;

             right: 0;

             transform: rotate(180deg);

             top: 50%;

             margin-top: -25px;

         }

         #right:hover {

             background-position: 0 -48px;

         }

         #box1 {

             width: 200px;

             position: absolute;

             bottom: 0px;

             right: 50%;

             margin-right: -100px;

             display: flex;

             justify-content: space-between;

         }

         span {

             display: inline-block;

             width: 20px;

             height: 20px;

             background: white;

             border-radius: 50%;

         }

     </style>

 </head>

 <body>

     <div id="box">

         <img src="data:images/shutter_1.jpg" alt="">

         <i id="left"></i>

         <i id="right"></i>

         <div id="box1">

             <span></span>

             <span></span>

             <span></span>

             <span></span>

         </div>

     </div>

     <script>

         let a = 0, timer;

         let img = document.querySelector("img");

         let span = document.querySelectorAll("span");

         let arr = ['images/shutter_1.jpg', 'images/shutter_2.jpg', 'images/shutter_3.jpg', 'images/shutter_4.jpg'];

         function off(num) {//如果a==i那就改变它的颜色，其它不等于那么就 变成白色；

             for (let i = 0; i < span.length; i++) {

                 if (i == num) {

                     span[i].style["background"] = "red";

                 } else {

                     span[i].style["background"] = "white";

                 }

             }

         }

         function off1() {//间隔性函数封装

             timer = setInterval(function () {

                 off(a);//调用函数

                 a++;

                 if (a > arr.length - 1) {//如果a大于了数组的下标减1，那么就进入循环恢复a==0；

                     a = 0;

                 }

                 img.src = arr[a];

             }, 1000);

         }

         function left1() {//调用左边按钮封装函数

             left.onmouseover = function () {

                 clearInterval(timer);

                 left.onclick = function () {

                     off(a);

                     a--;

                     if (a < 0) {

                         a = arr.length - 1;

                     }

                     img.src = arr[a];

                 }

             }

             left.onmouseout = function () {

                 off1();

             }

         }

         function right1() {//调用右边按钮封装函数

             right.onmouseover = function () {

                 clearInterval(timer);

                 right.onclick = function () {

                     off(a);

                     a++;

                     if (a >= arr.length) {

                         a = 0;

                     }

                     img.src = arr[a];

                 }

             }

             right.onmouseout = function () {

                 off1();

             }

         }

         function span1() {//调用span圆点封装函数

             for (let i = 0; i < span.length; i++) {

                 span[i].onmouseover = function () {

                     clearInterval(timer);

                     a = i;

                     img.src = arr[a];

                     off(a);

                 }

                 span[i].onmouseout = function () {

                     off1();

                 }

             }

         }

         off1();//这调用封装函数来实现间隔性

         left1();//调用左边按钮封装函数

         right1();//调用右边按钮封装函数

         span1();//调用span圆点封装函数

     </script>

 </body>

 </html>

 　　

javascript编写的一个完整全方位轮播图效果的更多相关文章

  1. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  2. 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...

  3. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  4. JS---案例：完整的轮播图---重点！

    案例:完整的轮播图 思路: 分5部分做 1. 获取所有要用的元素 2. 做小按钮,点击移动图标部分 3. 做右边焦点按钮,点击移动图片,小按钮颜色一起跟着变 (克隆了第一图到第六图,用索引liObj. ...

  5. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  6. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  7. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  8. 小程序实践（二）：swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  9. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

随机推荐

  1. PHP计算近1年的所有月份

    $z = date('Y-m'); $a = date('Y-m', strtotime('-12 months')); $begin = new DateTime($a); $end = new D ...

  2. Django基础之Model操作

    一.数据库操作 1.创建model表 基本结构: #coding:Utf8 from django.db import models class userinfo(models.Model): #如果 ...

  3. 学习笔记：如何阻止Web应用存储敏感数据

    在某些情况下,自定义Web应用会保存敏感(专有)数据到用户的缓存文件夹中.如果不重新架构该应用,使用Sysinternals SDelete的注销脚本是否可以确保数据完全被删除且没有任何可恢复残留呢? ...

  4. 上传通用化 VHD 并使用它在 Azure 中创建新 VM

    本主题逐步讲解如何使用 PowerShell 将通用化 VM 的 VHD 上传到 Azure.从该 VHD 创建映像,然后从该映像创建新 VM. 可以上传从本地虚拟化工具或其他云导出的 VHD. 对新 ...

  5. java笔记--局部内部类认识与理解

    java内部类 内部类应用最多的场景是在编写GUI程序时,将大量的事件监听处理放在了内部类中进行 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XH ...

  6. matplotlib点线 坐标刻度 3D图绘制(六)

    plot语句中支持除X,Y以外的参数,以字符串形式存在,来控制颜色.线型.点型等要素,语法形式为: plt.plot(X, Y, 'format', ...) 1 点和线的样式 颜色 参数color或 ...

  7. 消除 Xcode7 中 directory not found for option 'xxxx' 警告

    消除 Xcode7 中 directory not found for option 'xxxx' 警告 升级Xcode7之后,你会遇到一些警告信息,诸如以下一条: ld: warning: dire ...

  8. Java实例---简单的超市管理系统

    代码分析 Customer.java package test; public class Customer { private String name; private int customerTy ...

  9. December 17th 2016 Week 51st Saturday

    Great minds have purpose, others only have wishes. 杰出的人有着目标,其他人只拥有愿望. Are you clear about the differ ...

  10. 荣禄[róng lù]

    荣禄[róng lù] 百科名片 荣禄 荣禄(1836年4月6日-1903年4月11日)清末大臣,晚清政治家.字仲华,号略园,瓜尔佳氏,满洲正白旗人,出身于世代军官家庭,以荫生晋工部员外郎,后任内务府 ...