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

<!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">&lt;</div>
</div>
<div id="big2" >
<div id="small" style="float:right">&gt;</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>


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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值