您的位置：首页 > Web前端 > CSS

前端学习之html+css+js制作旋转轮播图

2019-03-03 20:22 573 查看

网页效果：

当鼠标移入时：左右两个按钮显示

HTML部分的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery1.0.0.1.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" /></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" /></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" /></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" /></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" /></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>
</body>
</html>

css部分的代码：

@charset "UTF-8";
/*初始化  reset*/
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(../images/prev.png) no-repeat;
z-index: 99;

}
.next{
right: 0;
background: url(../images/next.png);
}

JS部分的代码

window.function(){
var json = [
{   //  1
width:400,
top:70,
left:50,
opacity:20,
z:2
},
{  // 2
width:600,
top:120,
left:0,
opacity:80,
z:3
},
{   // 3
width:800,
top:100,
left:200,
opacity:100,
z:4
},
{  // 4
width:600,
top:120,
left:600,
opacity:80,
z:3
},
{   //5
width:400,
top:70,
left:750,
opacity:20,
z:2
}
];

//获取元素
var slide=document.getElementById("slide");
var liArr=slide.getElementsByTagName("li");
var arrow=slide.children[1];
var arrowChildren=arrow.children;

//当鼠标移入slide的div中，透明度变为1
slide.onmouseenter=function(){
animate(arrow,{"opacity":100});
}
//当鼠标离开，透明度变为0
slide.onmouseleave=function(){
animate(arrow,{"opacity":0});
}

//为每个li标签赋值数据
for(var i=0;i<liArr.length;i++){
animate(liArr[i],{
"width":json[i].width,
"top":json[i].top,
"left":json[i].left,
"opacity":json[i].opacity,
"zIndex":json[i].z
});
}

//为左右两个按钮绑定事件
for(var k in arrowChildren){
arrowChildren[k].onclick=function(){
if(this.className==="prev"){
//当前的classname是prev时，为左侧，判定为true
move(true);
}else {
move(false);
}
}
}

function move(bool){
if(bool){
//json.push();//在最后添加
//json.pop();//删除最后一位
//json.unshift();//在最前面添加
//json.shift();//删除第一位

//如果点击的按钮是左按钮，则数据赋值顺序应该是5的数据给1,方向为逆时针，删除5的数据，赋值给1
json.unshift(json.pop());
}else{
//如果点击的按钮是右按钮，则数据赋值顺序应该是1的数据给5,方向为顺时针，删除1的数据，赋值给5
json.push(json.shift());
}
for(var i=0;i<liArr.length;i++){
animate(liArr[i],{
"width":json[i].width,
"top":json[i].top,
"left":json[i].left,
"opacity":json[i].opacity,
"zIndex":json[i].z
});
}

}

}

jQuery封装的代码：

/**
* Created by Lenovo on 2016/9/11.
*/
function show(ele){
ele.style.display = "block";
}

/**
* 获取元素样式兼容写法
* @param ele
* @param attr
* @returns {*}
*/
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[
4000
attr];
}
return ele.currentStyle[attr];
}

//参数变为3个
function animate(ele,json,fn){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;

//遍历属性和值，分别单独处理json
//attr == k(键)    target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
//4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
if(json[k] !== leader){
bool = false;
}
}

console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if(bool){
clearInterval(ele.timer);
//所有程序执行完毕了，现在可以执行回调函数了
//只有传递了回调函数，才能执行
if(fn){
fn();
}
}
},1);
}

//获取屏幕可视区域的宽高
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
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航