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. 初始linux系统--ubuntu

    ubuntu操作系统  1. Linux系统组成 Linux内核软件程序用于实现CPU和内存分配进程调度设备驱动等核心操作,以面向硬件为主 外围程序面向用户为主,包括分析用户指令的解释器网络服务程序图 ...

  2. Ubuntu下解决apt update时签名无效问题

    Ubuntu 18.04在执行apt-get update时出现一下报错: W: GPG 错误:http://repo.mysql.com/apt/ubuntu bionic InRelease: 下 ...

  3. Vultr VPS建站攻略 – 一键安装宝塔面板架设LNMP/LAMP Web环境

    我们选择VULTR VPS建站的还是比较多的,其主要原因在于商家的稳定,毕竟我们用来建站选择服务器价格考虑的不是主要的(当然VULTR价格也是比较便宜),最为主要的是因为VULTR商家比较稳定,而且多 ...

  4. Markdown基本语法总结

    一.标题 在想要设置为标题的文字前面加#来表示 一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 注:标准语法一般在#后跟个空格再写文字. 示例: # 这是一级标题 ## 这是二级标题 # ...

  5. 02-url路由分配及模板渲染方式

    本章主要内容 1.url基本概念及格式 2.path和re_path 3.模板路径配置 4.模板渲染方式 1.url基本概念及格式 URL(uniform Resoure Locator)统一资源定位 ...

  6. Servlet+JSP+JDBC设计实现图书系统——管理功能实现

    写在前面,之前由于种种原因博客好久没有更新.最近打算重拾JavaWeb,所以从头开始,先用servlet+jdbc+bootstrap最基础的代码实现一个图书系统.考虑有管理员端+用户端,项目完成后会 ...

  7. java 调用 C# 类库 实战视频, 非常简单, 通过 云寻觅 javacallcsharp 生成器 一步即可!

    java 调用 C# 类库 实战视频, 非常简单, 通过 云寻觅 javacallcsharp 生成器 一步即可! 通过 云寻觅 javacallcsharp 生成器 自动生成java jni类库,  ...

  8. (转)深入剖析Redis主从复制

    一.主从概述 Redis 支持 Master-Slave(主从)模式,Redis Server 可以设置为另一个 Redis Server 的主机(从机),从机定期从主机拿数据.特殊的,一个从机同样可 ...

  9. jni使用javap查看java类方法签名

    在Jni开发中,需要回调给java层数据,因此使用java的方法签名是必不可少的. 快速定位java方法签名的方式: java方法签名由(函数参数列表)返回值组成. cmd运行:javap -s 字节 ...

  10. redis有序集合类型sort set

    redis的数据类型之-有序集合 sort set和set类型一样,也是string类型元素的集合,也没有重复的元素,不同的是sort set每个元素都会关联一个权,通过权值可以有序的获取集合中的元素 ...