html script轮播图,javascript简单轮播图

ゞ浴缸里的玫瑰 2022-10-06 13:57 303阅读 0赞

\*\*轮播图实现原理：

通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。\*\*![bVXlfS?w=800&h=400][bVXlfS_w_800_h_400]

HTML布局和内容：

1.容器container存放子容器，子容器lis的a标签存在图片。

2.子容器tips存放按钮小圆点。

![Image 1][]

CSS样式：

1.注意container的overflow:hidden;只显示窗口的一张图片，把左右两边的都隐藏起来。

2.CSS3:after伪元素清除浮动，利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

3.小圆点无论多少都要居中，CSS3:position & transform: translate(-50%) 实现块元素百分比下居中。

/\* 容器的高 宽 相对定位 超出隐藏\*/

\#container\{

width:800px;

height:400px;

margin: 0 auto;

position:relative;

overflow:hidden;

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* 内容的高 宽 绝对定位 偏移\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

\#lis\{

width: 4000px;

height: 400px;

position:absolute;

left:0;

\#lis a\{

float:left;

/\* 清除img浮动,正常撑开a高与高 \*/

\#lis a:after\{

content:"";

display:block;

clear:both;

/\* 清除IMG之间边距 无缝拼接 \*/

\#list img\{

float:left;

/\*\*\*\*\*\*\* 一排小圆点\*\*\*\*\*\*\*\*\*\*\*\*/

\#tips\{

margin:0;

padding:0;

z-index:999;

position: absolute;

bottom: 0;

left: 50%;

transform: translate(-50%);

list-style:none;

\#tips li\{

width:18px;

height: 18px;

border-radius:50%;

background:\#333;

float:left;

margin-left:5px;

/\* 切换到相应的图片 相应小圆点的颜色 \*/

\#tips .active\{

background:red;

/\*\*\*\* 左右按钮 绝对定位 大小 去下划线\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

\#btn a\{

position:absolute;

top:50%;

margin-top:-100px;

font-size:100px;

text-decoration: none;

\#btn \#next\{

position:absolute;

right:0%;

静态的效果图了！

![bVXlz7?w=803&h=403][bVXlz7_w_803_h_403]

JavaScript部分

1.查找要触发的元素左右箭头！

2.创建事件当点击时改变偏移的值。

3.判断偏移值是否内容(\#lis)的width;

4.设置自动轮播事件，制作定时器timer setInterval()执行多次!

5.设置暂停轮播事件,clearInterval(timer);//移除定时器!

6.鼠标移出onmouseout 移入onmouseover轮播图区域执行自动和暂停轮播事件

7.设置圆点和相应图片同步切换的事件，点击圆点切换图片 有闭包的知识！

var next=document.getElementById("next");//查找一个叫next id;

var up=document.getElementById("up");//查找一个叫up id;

var lis=document.getElementById("lis");//查找一个叫lis id;

var imgCount=lis.getElementsByTagName("img");//查找lis所有图片;

var countMove=imgCount.length\*-800;//定义变量用保存偏移的总值;

var container=document.getElementById("container");//获取整个轮播图区域

var ul=document.getElementById("tips");//查找一个叫tips id;

var list=ul.getElementsByTagName("li");//查找ul全部圆点

var timer;

var index=0;//list下标 从0开始！

console.log(lis.width);

var move=0;//定义变量用保存偏移的值;

//设置next下一张点击事件

next.οnclick=function()\{

move-=800;//每点击一次偏移-800PX; 第一张图后style.left都为负值。

index+=1;

if(move===countMove)\{//如果偏移(move)等于countMove(4000),就move为0(0是第一张)

move=0;

index=0;

lis.style.left=move+"px";//设置向偏移left:move

circle();//切换相对应圆点

//设置up上一张点击事件

up.οnclick=function()\{

index-=1;

if(move===0)\{ //如果偏移(move)等于0,就move为countMove(4000);

move=countMove;

index=list.length-1;

move+=800;

lis.style.left=move+"px";//设置向偏移left:move

circle();//切换相对应圆点

//设置轮播事件

function play()\{

timer=setInterval(function()\{ //内置定时器多次执行

next.onclick();//每1.5秒执行下一张事件！！

\},1500)

play();//加载JS自动轮播！

//设置暂停轮播事件

function stop()\{

clearInterval(timer);//移除定时器

container.οnmοuseοut=play;//当鼠标移出轮播图区域执行自动轮播事件

container.οnmοuseοver=stop;//当鼠标移入轮播图区域执行暂停轮播事件

//设置圆点和图片同步切换的事件

function circle()\{

for(var i=0; list.length>i;i++)\{//for循环语句 循环所有圆点

if(list\[i\].className=="active")\{ //if条件语句 如果其中一个圆点的Class等于active

list\[i\].className=""; //其他圆点就是Class设置为空

list\[index\].className="active";//list下标为index 设置Calss为cative;

for(var i=0; list.length>i;i++)\{ //for循环语句 循环所有圆点

(function(i)\{ //闭包

list\[i\].οnclick=function()\{ //圆点点击事件

lis.style.left=i\*-800+"px";//设置lis偏移的值

index=i;

circle();

\})(i); //传入I

[bVXlfS_w_800_h_400]: https://segmentfault.com/img/bVXlfS?w=800&h=400
[Image 1]: 
[bVXlz7_w_803_h_403]: https://segmentfault.com/img/bVXlz7?w=803&h=403

html script轮播图,javascript简单轮播图

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html轮播图

相关 HTML+CSS+JavaScript制作简单轮播图

相关简单轮播图

相关 html vue轮播图,webpack+Vue实现轮播图

相关轮播图实现html,html、css、js实现轮播图

相关 Html图片轮播遍历,javaScript 简单轮播图实现

相关 html script轮播图,javascript简单轮播图

相关 html图片翻转轮播,JavaScript实现旋转轮播图

相关简单html实现图片轮播,JavaScript实现简易轮播图

相关 html轮播图京东效果,JavaScript仿京东轮播图效果