热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:基于原生js的图片轮播效果简单实现

篇首语:本文由编程笔记#小编为大家整理,主要介绍了基于原生js的图片轮播效果简单实现相关的知识,希望对你有一定的参考价值。

篇首语:本文由编程笔记#小编为大家整理,主要介绍了基于原生js的图片轮播效果简单实现相关的知识,希望对你有一定的参考价值。




通过原生js实现简单的图片轮播效果,思想简单,容易理解


基本效果如下:

实现了三张图片自动轮播+按键点击切换的效果。

 


基本思想:

图片轮播的效果和老式电影院的胶片放映形式很相似,在老式的电影院放映中,使用长长的胶片记录影片,胶片上是按顺序排列的一系列图片,通过快速通过放映机放映口,使这些图片产生一个连贯的切换效果,形成了动态的影片。所以,这里图片轮播的形式也可以采用这种方式来形成动画效果。

形式如下图:

黑框即我们的最外层的容器,充当放映机的存在;绿框就是胶片,上面搭载着很多的图片;粉框内即我们要轮播的图片)

从上图出发,我们要做到图片轮播,那么只需要完成以下部分即可。

1.设置一个最外层的容器,这个容器就是我们要展示图片的区域,如上面的黑框部分,用overflow:hidden将超出显示区域的内容全部隐藏掉

2.在最外层容器内设置一个胶片容器,用来将要展示的图片按从左到右的顺序排放,比如使用ul,将其宽度设成最外层容器宽度*N(图片数量),并且设置绝对定位position:absolute,因为我们要通过控制left属性来移动整个胶片实现图片切换的效果。

3.在胶片容器里面使用li来存放要展示的图片,使用float:left让所有图片在胶片容器里面从左到有排列

4.使用js修改left值控制胶片容器向左或向右移动,通过循环定时器进行连续小幅度修改left以达到动画的连贯效果。

 


以下为代码实现,可以作为参考:

html部分


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/style.css">
head>
<body>

<div id="container">

<ul id="content">
<li class="list"><img src="img/1.jpg" alt="">li>
<li class="list"><img src="img/2.jpg" alt="">li>
<li class="list"><img src="img/3.png" alt="">li>
ul>
div>
<button id="moveLeft">点我切换button>
<script src="js/main.js">script>
body>
html>

 

css部分


/*初始化*/
*
{
padding
:0;
margin
:0;
}
/*作为放映机存在的最外层容器,固定宽高,通过overflow隐藏超出其区域的内容*/
#container
{
width
:560px;
height
:300px;
overflow
: hidden;
position
: relative;
}
/*这个容器充当胶卷设成绝对定位用来存放多个图片,图片排在一行里面*/
#content
{
list-style
: none;
width
:2000px;
position
: absolute;
left
:0;
right
:0;
}
/*这是每张图片的设置,图片大小和最外层的放映机一样,并通过float让其排在同一行里面*/
.list
{
width
:560px;
float
: left;
}
/*这是按钮*/
#moveLeft
{
width
:100px;
}

 

JS部分


//使用自执行函数隔离作用域
var Slider=(function () {
//记录left的值
var moveLeft=0;
// 初始化,绑定轮播事件和点击事件
function init(){
var cOntent=document.getElementById(\'content\');
var button1=document.getElementById(\'moveLeft\');
//此处为自动轮播
setInterval(animate,5000,content,20);
//此处为绑定按钮进行点击切换轮播
button1.addEventListener(\'click\',function (e) {
setTimeout(animate,
100,content,20);
});
}
//通过定时器实现轮播的动画效果
function animate(content,speed) {
if(moveLeft===0){
var timer1=setInterval(function () {
moveLeft
-=speed;
if(moveLeft>-560) {
content.style.left
=moveLeft+\'px\';
}
else if(Math.abs(moveLeft+560)<speed){
content.style.left
=-560+\'px\';
clearInterval(timer1);
}
else{
clearInterval(timer1);
}
},
10);
}
else if(moveLeft===-560){
var timer2=setInterval(function () {
if(moveLeft>-1120) {
moveLeft
-= speed;
content.style.left
=moveLeft+\'px\';
}
else if(Math.abs(moveLeft+1120)<speed){
content.style.left
=-1120+\'px\';
clearInterval(timer2);
}
else{
clearInterval(timer2);
}
},
10);
}
else if(moveLeft===-1120){
var timer3=setInterval(function () {
if(moveLeft<0){
moveLeft
+=2*speed;
content.style.left
=moveLeft+\'px\';
}
else if(Math.abs(moveLeft)<2*speed){
content.style.left
=0+\'px\';
clearInterval(timer3);
}
else{
clearInterval(timer3);
}
},
10);
}
}
return{
init:init,
animate:animate
}
})();
Slider.init();

 



推荐阅读
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • UNP 第9章:主机名与地址转换
    本章探讨了用于在主机名和数值地址之间进行转换的函数,如gethostbyname和gethostbyaddr。此外,还介绍了getservbyname和getservbyport函数,用于在服务器名和端口号之间进行转换。 ... [详细]
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • 使用Vultr云服务器和Namesilo域名搭建个人网站
    本文详细介绍了如何通过Vultr云服务器和Namesilo域名搭建一个功能齐全的个人网站,包括购买、配置服务器以及绑定域名的具体步骤。文章还提供了详细的命令行操作指南,帮助读者顺利完成建站过程。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 从 .NET 转 Java 的自学之路:IO 流基础篇
    本文详细介绍了 Java 中的 IO 流,包括字节流和字符流的基本概念及其操作方式。探讨了如何处理不同类型的文件数据,并结合编码机制确保字符数据的正确读写。同时,文中还涵盖了装饰设计模式的应用,以及多种常见的 IO 操作实例。 ... [详细]
  • 本文详细探讨了VxWorks操作系统中双向链表和环形缓冲区的实现原理及使用方法,通过具体示例代码加深理解。 ... [详细]
  • 本教程涵盖OpenGL基础操作及直线光栅化技术,包括点的绘制、简单图形绘制、直线绘制以及DDA和中点画线算法。通过逐步实践,帮助读者掌握OpenGL的基本使用方法。 ... [详细]
  • 深入了解 Windows 窗体中的 SplitContainer 控件
    SplitContainer 控件是 Windows 窗体中的一种复合控件,由两个可调整大小的面板和一个可移动的拆分条组成。本文将详细介绍其功能、属性以及如何通过编程方式创建复杂的用户界面。 ... [详细]
  • 实体映射最强工具类:MapStruct真香 ... [详细]
  • 本文介绍如何在 Android 中通过代码模拟用户的点击和滑动操作,包括参数说明、事件生成及处理逻辑。详细解析了视图(View)对象、坐标偏移量以及不同类型的滑动方式。 ... [详细]
  • 本文介绍如何使用Objective-C结合dispatch库进行并发编程,以提高素数计数任务的效率。通过对比纯C代码与引入并发机制后的代码,展示dispatch库的强大功能。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
author-avatar
喵屎柔_
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有