Js实现京东大的轮播图及相关动画效果

最新推荐文章于 2022-01-13 21:56:18 发布

置顶 Toleranty

最新推荐文章于 2022-01-13 21:56:18 发布

阅读量1.8k

点赞数 1

分类专栏： js 文章标签： javascript 京东动画

本文链接：https://blog.csdn.net/Toleranty/article/details/52254323

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="../css/test.css">
</head>
<body>
<div id="content">
<ul id="list">
<li style="display:block;"><img src="../img/1.jpg" alt=""></li>
<li><img id="obj" src="../img/2.jpg" alt=""></li>
<li><img id="obj" src="../img/3.jpg" alt=""></li>
<li><img id="obj" src="../img/4.jpg" alt=""></li>
<li><img id="obj" src="../img/5.jpg" alt=""></li>
<li><img id="obj" src="../img/6.jpg" alt=""></li>
</ul>

<div id="big1">
<div id="small"><</div>
</div>
<div id="big2" >
<div id="small" style="float:right">></div>
</div>
<ul id="slider">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
<script type="text/javascript">
var list = document.getElementById('list');
var lis = list.getElementsByTagName('li');
var big = document.getElementById("big");
var content = document.getElementById("content");
var slider = document.getElementById("slider");
var lrp = slider.getElementsByTagName('li');
var index = 0;
//隐藏显示
content.onmouseover = function(){
big1.style.display = "block";
big2.style.display = "block";
}
content.onmouseout = function(){
big1.style.display = "none";
big2.style.display = "none";
}
//点击切换
big1.onclick = function(){
index++;
if(index==lis.length-1){
index=0;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = "none";

}
lis[index].style.display="block";

}
big2.onclick = function(){
index--;
if(index<0){
index=lis.length-1;
}
for (var i = lis.length-1; i >= 0; i--) {
lis[i].style.display = "none";

}
lis[index].style.display="block";

}

//123456
for (var i = 0; i < lrp.length; i++) {
lrp[i].onmouseover = function(){
index++;
if(index==lrp.length-1){
index=0;
}
for (var i = 0; i < lrp.length; i++) {
lis[i].style.display = "none";
}
lis[index].style.display = "block";
}
}

// 实现图片的自动切换效果
//时间间隔单位毫秒
var timeInterval=2000;

setInterval(changeImg,timeInterval);
function changeImg()
{
// var obj=document.getElementById("obj");

if (index==lis.length-1)
{
index=0;
}
else
{
console.log(index);
index++;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = "none";

}
lis[index].style.display = "block";
console.log(index);
// obj.src=arr[index];
}
</script>

</html>

其余样式大家可以下载了文件自己去看哦~都是小编刚刚敲出来的代码还热乎呢嘿嘿

博主每次都会把学到的小知识跟大家分享哦假如有什么缺点，还是希望朋友们多多提出方便我提升哦嘿嘿！蟹蟹大家啦~喜欢的点个赞哦可以互相关注哈哈哈明天见