首页 > 资讯 > 前端开发 > node.js >这么用原生js自动轮播展示产品图片

374

分享到

这么用原生js自动轮播展示产品图片

2024-04-02 19:04:59 374人浏览独家记忆

摘要

今天小编给大家分享一下这么用原生js自动轮播展示产品图片的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来

今天小编给大家分享一下这么用原生js自动轮播展示产品图片的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>原生js自动轮播展示产品图片</title>

</head>

<body>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

{

var oPic=document.getElementById('user_pic');

var oPrev=getByClass(oPic,'prev')[0];

var oNext=getByClass(oPic,'next')[0];

var aLi=oPic.getElementsByTagName('li');

var arr=[];

for(var i=0;i<aLi.length;i++)

{

var oImg=aLi[i].getElementsByTagName('img')[0];

arr.push([parseInt(getStyle(aLi[i],'left')),parseInt(getStyle(aLi[i],'top')),

getStyle(aLi[i],'zIndex'),oImg.width,parseFloat(getStyle(aLi[i],'opacity')*100)]);

}

oPrev.onclick=function moveTP()

{

arr.push(arr[0]);

arr.shift();

for(var i=0;i<aLi.length;i++)

{

var oImg=aLi[i].getElementsByTagName('img')[0];

aLi[i].style.zIndex=arr[i][2];

startMove(aLi[i],{left:arr[i][0],top:arr[i][1],opacity:arr[i][4]});

startMove(oImg,{width:arr[i][3]});

}

oNext.onclick=function moveTN()

{

arr.unshift(arr[arr.length-1]);

arr.pop();

for(var i=0;i<aLi.length;i++)

{

var oImg=aLi[i].getElementsByTagName('img')[0];

aLi[i].style.zIndex=arr[i][2];

startMove(aLi[i],{left:arr[i][0],top:arr[i][1],opacity:arr[i][4]});

startMove(oImg,{width:arr[i][3]});

}

var moveTime = setInterval (function(){

oNext.click();

},1000);

$('#user_pic').hover(function(){

;;

clearInterval(moveTime);

},function(){

moveTime=setInterval(function(){

oNext.click();

},1000);

});

function getStyle(obj,name)

{

if(obj.currentStyle){ return obj.currentStyle[name]; }

else{ return getComputedStyle(obj,false)[name]; }

}

function getByClass(oParent,sClass)

{

var aResult=[];

var aEle=oParent.getElementsByTagName('*');

for(var i=0;i<aEle.length;i++)

{

if(aEle[i].className==sClass)

{

aResult.push(aEle[i]);

}

return aResult;

}

function getStyle(obj,name)

{

if(obj.currentStyle)

{

return obj.currentStyle[name];

}

else

{

return getComputedStyle(obj,false)[name];

}

function startMove(obj,JSON,fnEnd)

{

clearInterval(obj.timer);

obj.timer=setInterval(function()

{

var bStop=true;

for(var attr in json)

{

var cur=0;

if(attr=='opacity')

{

cur=Math.round(parseFloat(getStyle(obj,attr))*100);

}

else

{

cur=parseInt(getStyle(obj,attr));

}

var speed=(json[attr]-cur)/6;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(cur!=json[attr]) bStop=false;

if(attr=='opacity')

{

obj.style.filter='alpha(opacity:'+(cur+speed)+')';

obj.style.opacity=(cur+speed)/100;

}

else

{

obj.style[attr]=cur+speed+'px';

}

if(bStop)

{

clearInterval(obj.timer);

if(fnEnd) fnEnd();

}

},30)

}

arcSlip();

</script>

</body>

</html>

以上就是“这么用原生js自动轮播展示产品图片”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网node.js频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 这么用原生js自动轮播展示产品图片

本文链接: https://www.lsjlt.com/news/93669.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

这么用原生js自动轮播展示产品图片

今天小编给大家分享一下这么用原生js自动轮播展示产品图片的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来...

99+

2024-04-02
vue.js中怎么使用原生js实现移动端的轮播图

这篇文章主要介绍“vue.js中怎么使用原生js实现移动端的轮播图”，在日常操作中，相信很多人在vue.js中怎么使用原生js实现移动端的轮播图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue.js中怎么...

99+

2023-06-30
vue.js项目使用原生js实现移动端的轮播图

目录前言一、了解原生js移动端的事件二、轮播图实战第一部分：template模板第一部分解读：第二部分：script标签内代码第二部分解读：第三部分：css样式部分三、效果图结束语前...

99+

2024-04-02
原生Js 实现的简单无缝滚动轮播图的示例代码

简单无缝滚动轮播图存在很多漏洞，就是后期增加图片时会很不方便，需要改动的地方也很多，耦合性也很强，只适用于一部分程序，所以我们可以通过改动图片结构和计算...

99+

2024-04-02
怎么用原生JS实现简单的轮播图效果

本篇内容主要讲解“怎么用原生JS实现简单的轮播图效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用原生JS实现简单的轮播图效果”吧!实现效果：功能需求：鼠标经过轮播图模块，左右按钮显示，离...

99+

2023-07-02
Android使用ViewFlipper实现图片上下自动轮播的示例代码

本文主要介绍了Android使用ViewFlipper实现图片上下自动轮播的示例代码，分享给大家，具体如下：先看效果： 1.xml代码： ...

99+

2024-04-02