JS实现小图放大轮播页面效果入下（图片为优行商旅页面照片）：

实现效果：
图片自动轮播，鼠标移入停止，移出继续轮播
点击下方小图可以实现切换

步骤一：建立HTML布局，具体如下：

<body>

    <div id="carousel" class="carousel" onmouseover="stop()" onmouseout="again()">

        <ul class="list" id="ulctrl">

            <li class="trans"><span></span></li>

            <li><span></span></li>

            <li><span></span></li>

            <li><span></span></li>

        </ul>

    </div>

</body>

　　其中div为图片轮播区域，li用于放置小图

步骤二：CSS布局

*{

            margin:;

            padding:;

        }

        ul{

            list-style: none;

            height:auto;

            position: absolute;

            top:95%;

            left:32%;

        }

        #carousel{

            width:100%;

            height:400px;

            background-image: url(images/1.jpg);

            background-repeat: no-repeat;

            background-position: center;

            position: relative;

        }

        li{

            float:left;

            margin-right: 20px;

        }

        span{

            display: block;

            width:110px;

            height:41px;

            background-size: 110px 41px;

            border:none;

        }

        li:nth-child(1) span{

            background-image: url(images/1.jpg);

            border:2px solid orange;

        }

        li:nth-child(2) span{

            background-image: url(images/2.jpg);

        }

        li:nth-child(3) span{

            background-image: url(images/3.jpg);

        }

        li:nth-child(4) span{

            background-image: url(images/4.jpg);

        }

　　通过定位使小图显示在下方，此时轮播区域显示的为第一张图片

步骤三：添加JS逻辑（其中该代码注释中的圆点是指轮播图下方小图）

let cnt=1;//计数器

let ulctrl=document.getElementById("ulctrl");//圆点控制器

let lis=ulctrl.children;//圆点们

let linow=lis[0];//初始化当前圆点为第一个

let clock;//声明计时器

var carousel=document.getElementById("carousel");//背景容器

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

    //给圆点绑定函数，点击改变圆点样式和图片

    lis[i].onclick=function (){

        cnt=i+1;

        carousel.style.backgroundImage="url(images/"+cnt+".jpg)";

        for(let li of lis){

             li.children[0].style.border = 'none';

        }

         this.children[0].style.border = '2px solid orange';

    }

}

//改变圆点样式

function ctrl(){

    linow.children[0].style.border = 'none';

    linow=lis[cnt-1];

    linow.children[0].style.border = '2px solid orange';

}

//鼠标覆盖轮播图，停止轮播

function stop(){

    clearInterval(clock);//清除计时器

}

//鼠标离开轮播图，继续轮播

function again(){

    clock=setInterval(this.start, 2000);//创建计时器

}

//轮播函数

function start(){

    if(cnt==4){

        cnt=1;

    }else{

        cnt++;//更新计数器

    }

    carousel.style.backgroundImage="url(images/"+cnt+".jpg)";

    ctrl();//轮播状态下改变圆点样式

    }

(function move(){

    clock=setInterval(this.start, 2000);//创建计时器，2秒执行一次start函数

})();//自执行函数

JS实现小图放大轮播效果的更多相关文章

  1. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  2. 通过jquery js 实现幻灯片切换轮播效果

    观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用 如animate 4-& ...

  3. js插件-图片椭圆轮播效果

    插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" ...

  4. js实现简单的轮播效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  6. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  7. Bootstrap插件之Carousel轮播效果（2015年-05月-21日）

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  8. Jquery实现左右轮播效果

    首先展示下静态布局h5代码,代码非常简单. <div id="slide"> <ul class="pic-list"> <li& ...

  9. js的轮播效果

    图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...

随机推荐

  1. Cocoa对象——根类

    ［转载自:http://mobile.51cto.com/iphone-274229.htm］ Cocoa对象 根类是本文要介绍的内容,仅凭Objective-C语言和运行环境并不足以构造哪怕是最简单 ...

  2. 什么是马拉车算法（Manacher's Algorithm）？

    提出问题 最长回文子串问题:给定一个字符串,求它的最长回文子串长度. 如果一个字符串正着读和反着读是一样的,那它就是回文串.如a.aa.aba.abba等. 暴力解法 简单粗暴:找到字符串的所有子串, ...

  3. 使用hexo+coding搭建免费个人博客

    1.检测node和npm 先检测一下有没有node.js和npm $ node -v //如果有,说明node.js安装成功! $ node -v v8.4.0 //如果有,说明npm安装成功! $n ...

  4. 2018沈阳网络赛 - Ka Chang KD树暴力

    题意:给你一棵树,n个点q次操作,操作1查询x子树深度为d的节点权值和,操作2查询子树x权值和 把每个点按(dfn,depth)的二维关系构造kd树,剩下的只需维护lazy标记即可 #include& ...

  5. php中各种http报错的状态码分析

    HTTP会经常遇见错误,本文主要和大家分享php中各种http报错的状态码,希望能帮助到大家. HTTP 错误 400 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无 ...

  6. Prufer序列与树的计数（坑）

    \(prufer\)序列: 无根树转\(prufer\)序列: 不断找编号最小的叶子节点,删掉并在序列中加入他相连的节点. \(prufer\)转无根树: 找到在目前\(prufer\)序列中未出现且 ...

  7. python3.6.4没有raw_input

    之前是一直在用Python2.7版本,2.7里面raw_input()和input个人认为区别在于raw_input()可以输入字符串和中文,而input()只接受数字,输入字符串就会报错. 现在用的 ...

  8. 关于README的内容

    如何在开发项目的时候写出标准的README文件? 为什么要写这篇博客? 关于README的编写,这个也十分的重要,如果你觉得只是随便写写,那么你就错了:编写这部分也是相当的重要的.工欲善其事,必先利其 ...

  9. 用Python写了一个postgresql函数，感觉很爽

    用Python写了一个postgresql函数,感觉很爽 CREATE LANGUAGE plpythonu; postgresql函数 CREATE OR REPLACE FUNCTION myfu ...

  10. winform FormBordStyle=none 及 wpf FormBordStyle=none 的鼠标点击移动问题

    winform: //bool formMove = false;//窗体是否移动 //Point formPoint;//记录窗体的位置 private void Login_MouseDown(o ...