Javascript实现图片轮换功能方式一
关注重工黑大帅，学习不迷路
先看效果：
图片素材下载（后面两种图片轮换素材也是这个）：
链接：
https://pan.baidu.com/s/1EnQkPvp80sqtD0IbANj9sA
提取码：
m7t3
public.css:
/* CSS Document */
*{margin: 0;padding: 0;
}
ul,li,ol{list-style: none;
}
a{text-decoration: none;
}
img{border: 0;
}
.clears{clear: both;height: 0;line-height: 0;overflow: hidden;font-size: 0;
}body{font-family: Arial,Verdana,"Microsoft Yahei","simsun";font-size: 14px;
}
style.css:
/* CSS Document */
.picshow{width: 700px;height: 450px;margin-left: auto;margin-right: auto;
}
.bigimg{width: 700px;height: 400px;overflow: hidden; /*把超出的图片隐藏*/
}
.imgUl{transition: all 0.5s;
}
.imgUl>li{width: 700px;height: 400px;overflow: hidden; /*内容超出隐藏，防止空隙*/
}.control{width: 700px;height: 50px;background: #eee;text-align: right;
}
.control a{width: 30px;height: 30px;background: #666;display: inline-block;margin-top:10px;margin-left: 5px;margin-right: 5px;border-radius: 30px;color: #fff;
}
.control .current{background: #f30;
}
pic.js:
// JavaScript Document
var ctrl = document.getElementById("ctrl");
var imgUl = document.getElementById("imgUl");
// var a = ctrl.children;
var a = ctrl.getElementsByTagName("a");for(var i = 0 ; i <= a.length-1 ; i++){// 【关键】标签存储当前的索引值a[i].onmouseover = function(){// console.info("OK");// 把所有的标签，都变成普通样子。allElements();this.className = "current"; // 突出当前标签var index = this.getAttribute("index");imgUl.style.marginTop = -400*index + "px"; }
}// 操作所有标签复原。
function allElements(){for(var k=0 ; k <= a.length-1 ; k++){a[k].className = ""; // 去掉类，复原}
}
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/style.css">
</head><body>
<!-- 图片轮播 -->
<div class="picshow"><!-- 大图 --><div class="bigimg"><ul class="imgUl" id="imgUl"><li><a href="#"><img src="images/pic1.jpg" alt=""></a></li><li><a href="#"><img src="images/pic2.jpg" alt=""></a></li><li><a href="#"><img src="images/pic3.jpg" alt=""></a></li><li><a href="#"><img src="images/pic4.jpg" alt=""></a></li><li><a href="#"><img src="images/pic5.jpg" alt=""></a></li></ul></div><!-- 大图 end --><!-- 控制块 --><div class="control" id="ctrl"><a href="javascript:void(0)" index="0" class="current"></a><a href="javascript:void(0)" index="1"></a><a href="javascript:void(0)" index="2"></a><a href="javascript:void(0)" index="3"></a><a href="javascript:void(0)" index="4"></a></div><!-- 控制块 end -->
</div>
<!-- 图片轮播 end -->
<script src="js/pic.js"></script>
</body>
</html>
您的点赞和关注是我学习的强大动力之一
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！