您正在使用IPV4(44.192.247.184)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       悟空收录网      

【腾讯云】云服务器等爆品抢先购,低至4.2元/月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2023年 元宵节 4
2023年 情人节 13
2024年 元 旦 334
2024年 春 节 374
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
JS实现图片轮播跑马灯
内容摘要: 一、HTML布局divclass='wrapper'divid='container'!--图片展示区域盒子--ulid='imglist'!--将所有图片并列展示盒子--liimgsrc='./img/banner.jpg'alt='暂无图片'/liliimgsrc='./img/banner0.jpg'alt='暂无图片'/liliimgsrc='./i......
一、HTML布局

<divclass="wrapper">

<divid="container"><!--图片展示区域盒子-->

<ulid="imglist"><!--将所有图片并列展示盒子-->

<li>

<imgsrc="./img/banner.jpg"alt="暂无图片">

</li>

<li>

<imgsrc="./img/banner0.jpg"alt="暂无图片">

</li>

<li>

<imgsrc="./img/banner.jpg"alt="暂无图片">

</li>

<li>

<imgsrc="./img/banner0.jpg"alt="暂无图片">

</li>

</ul>

<ulid="point">

<liclass="selected"></li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

</div>

二、CSS样式

.wrapper{

position:relative;

overflow:hidden;

width:100%;

height:870px;

}

#container{

width:1920px;

height:870px;

position:absolute;

top:50%;

left:50%;

overflow:hidden;

transform:translate(-50%,-50%);

-webkit-transform:translate(-50%,-50%);

-moz-transform:translate(-50%,-50%);

-ms-transform:translate(-50%,-50%);

-o-transform:translate(-50%,-50%);

background-color:#aa201c;

}

#imglist{

width:7680px;

height:870px;

list-style-type:none;

position:absolute;

top:0;

left:0;

z-index:1;

}

#imglist>li{

width:1920px;

height:870px;

float:left;

overflow:hidden;

}

#point{

list-style-type:none;

position:absolute;

bottom:5px;

left:50%;

/*right:0;*/

/*margin:auto;*/

width:100%;

height:29px;

line-height:29px;

z-index:10;

}

#point>.selected{

background-color:#aa201c;

}

#point>li{

width:16px;

height:16px;

float:left;

background-color:#c5c8ce;

border-radius:100%;

margin-right:10px;

-webkit-border-radius:100%;

}

三、JS代码

varwrap=document.getElementById("container");

varinner=document.getElementById("imglist");

varspanList=document.getElementById("point").getElementsByTagName("li");

varleft=document.getElementById("left");

varright=document.getElementById("right");

varclickFlag=true;//设置左右切换标记位防止连续按

vartime//主要用来设置自动滑动的计时器

varindex=0;//记录每次滑动图片的下标

varDistance=wrap.offsetWidth;//获取展示区的宽度,即每张图片的宽度

//定义图片滑动的函数

functionAutoGo(){

varstart=inner.offsetLeft;//获取移动块当前的left的开始坐标

varend=index*Distance*(-1);//获取移动块移动结束的坐标。

//计算公式即当移动到第三张图片时,图片下标为2乘以图片的宽度就是块的left值。

varchange=end-start;//偏移量

vartimer;//用计时器为图片添加动画效果

vart=0;

varmaxT=30;

clear();//先把按钮状态清除,再让对应按钮改变状态

if(index==spanList.length){

spanList[0].className="selected";

}else{

spanList[index].className="selected";

}

clearInterval(timer);//开启计时器前先把之前的清

timer=setInterval(function(){

t++;

if(t>=maxT){//当图片到达终点停止计时器

clearInterval(timer);

clickFlag=true;//当图片到达终点才能切换

}

inner.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动

if(index==spanList.length&&t>=maxT){

inner.style.left=0;

index=0;

//当图片到最后一张时把它瞬间切换回第一张,由于都同一张图片不会影响效果

}

},17);

}

//编写图片向右滑动的函数

functionforward(){

index++;

//当图片下标到最后一张把小标换0

if(index>spanList.length){

index=0;

}

AutoGo();

}

//编写图片向左滑动函数

functionbackward(){

index--;

//当图片下标到第一张让它返回到倒数第二张,

//left值要变到最后一张才不影响过渡效果

if(index<0){

index=spanList.length-1;

inner.style.left=(index+1)*Distance*(-1)+"px";

}

AutoGo();

}

//开启图片自动向右滑动的计时器

time=setInterval(forward,3000);

//设置鼠标悬停动画停止

wrap.onmouseover=function(){

clearInterval(time);

}

wrap.onmouseout=function(){

time=setInterval(forward,3000);

}

//遍历每个按钮让其切换到对应图片

for(vari=0;i<spanList.length;i++){

spanList[i].onclick=function(){

index=this.innerText-1;

AutoGo();

}

}

//清除页面所有按钮状态颜色

functionclear(){

for(vari=0;i<spanList.length;i++){

spanList[i].className="";

}

}

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:jquery点击实现升序降序图标切换 下一篇:js实现数字拼图
发布日期:2022/10/18
手机扫二维码直达本页
发布时间:14:55:33
点  击:21
录  入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2023