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. python-requests库的使用之爬取贴吧内容并保存在本地

    以面向对象的程序设计方式,编写爬虫代码爬去‘李毅吧’所有页面的内容,也可以通过改变对象的参数来爬取其它贴吧页面的内容. 所用到的库为:requests 涉及知识点:python面向对象编程,字符串操作 ...

  2. gitLab创建自己的私有库

    一.创建私有库的流程简介 创建一个项目,留着后面的流程3制作私有库 在可以创建私有库的地方创建一个code repository, code repository是代码仓库,我们把代码上传到这个仓库. ...

  3. 【转载】Java 9 新特性——模块化

    来自 <http://www.jianshu.com/p/053a5ca89bbb#> 前言 年,我们将迎来 Java 语言的 22 岁生日,22岁,对于一个人而言,正是开始大展鸿图的年纪 ...

  4. C#-WebForm-JS知识:基础部分、BOM部分、DOM部分、JS事件

    一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...

  5. 使用sqlyog将sql server 迁移到mysql

    使用软件工具sqlyog(64位) sqlyog 迁移步骤 1.使用sqlyog连接目标数据库 连接目标数据库 2.选择目标数据库(需要先把表结构建好,从SQL Server同步表结构也可以使用工具, ...

  6. Flask-mail 发邮件慢(即使异步)

    Flask-mail 发邮件慢(即使异步) 一开始,按照狗书上的代码异步发邮件,但是发现原本响应只需要150ms的页面加了邮件发送就变成了5s响应(这怕不是假异步) 狗书的异步发邮件代码: def s ...

  7. Linux网络编程案例分析

    本代码来自于博主:辉夜星辰 本篇主要对运行代码中出现的问题进行分析,代码本身的内容后续展开讨论. 服务器端代码 /* Linux网络编程之TCP编程,服务器端读数据 socket函数之后,返回值ser ...

  8. IP地址转换为Int

    1.转换类 import com.google.common.base.Strings; import java.security.InvalidParameterException; import ...

  9. Kali/Ubuntu无法和物理机之间复制粘贴解决办法

    Vmware安装Linux,传统的vmtools已经被抛弃,当前建议使用Open-VM-tools 安装Open-VM-tools//Kali,Ubuntu: sudo apt install Ope ...

  10. Git学习系列之Git基本操作推送项目(图文详解)

    前面博客 Git学习系列之Git基本操作提交项目(图文详解) 如果完成到一定程度,那么可以推送到远端在线仓库. 推送之前,请确保你已经设置了全局的 user.name 和 user.email, 如果 ...