轮播图,俗称“旋转木马”,前端设计经典的一个案例。
通常电商首页会使用轮播图或者旋转木马。
废话不多说,直接上代码。
主要逻辑:静态界面:中部是图片,左右分别是前进和后退按钮,下面是不同的页码。
功能分析:不操作时,界面会自动向某个防线滚动;点击左右上下按钮会切换,直接点击下面的页码会直接跳到对应界面中。
技术难点:页面切换的动画;点击按钮时默认的滚动暂停;第一个图片和最后一个图片的滚动;下面的页码按钮换成缩略图按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转木马</title>
<style>
/*预设样式*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{
margin:0;
padding:0;
}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
/*内部样式*/
.wrap{
width: 1200px;
margin: 10px auto;
}
.slide{
height: 500px;
position: relative;
}
.slide li{
position: absolute;
left: 200px;
top: 0;
}
.slide li img {
width: 100%;
}
.arrow {
opacity: 0;
}
.prev, .next {
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
background: url() no-repeat;
z-index: 99;
}
.next {
right: 0;
background-image: url();
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="wrap">
<ul>
<li><a href="#"></a><img src="#"></li>
<li><a href="#"></a><img src="#"></li>
<li><a href="#"></a><img src="#"></li>
<li><a href="#"></a><img src="#"></li>
<li><a href="#"></a><img src="#"></li>
</ul>
<div class="arrow">
<a href="#" class="next"></a><a href="#" class="next"></a>
</div>
</div>
</div>
<script>
// 公共JS代码
function show(ele){
ele.style.display = "block";
}
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
function client(){
if(window.innerHeight !== undefined){
return {
"width":window.innerWidth,
"height":window.innerHeight
}
}else if(document.compatMode === "CSS1Compat"){
return {
"width":document.documentElement.clientWidth,
"height":document.documentElement.clientHeight
}
}else {
return {
"width":document.body.clientWidth,
"height":document.body.clientHeight
}
}
}
</script>
<script>
// 旋转木马私有代码
window.onload = function(){
var arr = [
{
width:400,
top:700,
left:50,
opacity:20,
zIndex:2
},
{
width:400,
top:700,
left:50,
opacity:20,
zIndex:2
},
{
width:400,
top:700,
left:50,
opacity:20,
zIndex:2
},
{
width:400,
top:700,
left:50,
opacity:20,
zIndex:2
},
{
width:400,
top:700,
left:50,
opacity:20,
zIndex:2
}
];
// 0获取元素
var slide = document.getElementById('slide');
var LiArr = document.getElementsByTagName('li');
var arrow = slide.children[1];
var arrowChildren = arrow.children;
var flag = true;
// 1.鼠标经过轮播图,左右按钮显示隐藏
slide.onmouseenter = function(){
animate(arrow,{"opacity":100});
}
slide.onmouseleave = function(){
animate(arrow,{"opacity":0});
}
move();
// 2.两侧按钮绑定事件
arrowChildren[0].onclick = function(){
if(flag){
flag = false;
move(true);
}
}
arrowChildren[2].onclick = function(){
if(flag){
flag = false;
move(false);
}
}
// 3.主函数
fucntion move(bool){
if (bool !== undefined) {
if (bool) {
arr.unshift(arr.pop());
} else {
arr.push(arr.shift());
}
}
for(var i = 0; i < LiArr.length;i++){
animate(LiArr[i],arr[i],function(){
flag = true;
});
}
}
}
</script>
</body>
</html>