图片轮播–学习记录

图片轮播–学习记录

吴阳 No Comment
JS

来源慕课网:http://www.imooc.com/video/661

一、HTML部分

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="css/work.css">
 <script type="text/javascript" src="js/work.js"></script>
</head>
<body>
 <div class="content"> 
 <div class="img_box" id="img_box" style="left:-600px;">
 <img src="img/03.jpg" alt="图片3"><!-- 3号图附属图 -->
 <img src="img/01.jpg" alt="图片1">
 <img src="img/02.jpg" alt="图片2">
 <img src="img/03.jpg" alt="图片3">
 <img src="img/01.jpg" alt="图片1"><!-- 1号图附属图 -->
 </div>
 <a class="left_btn" id="prev">&lt;</a>
 <a class="right_btn" id="next">&gt;</a>
 <div class="img_dot" id="img_dot">
 <span index="1" class="on"></span><!-- 第一个小圆点默认亮起 -->
 <span index="2" ></span>
 <span index="3" ></span>
 </div>
 </div>
</body>
</html>

1、障眼法:图片的首尾利用附属图,避免函数的复杂性。

2、关键:利用绝对定位DIV,进行偏移,来实现轮播效果。style=”left:-600px;”。

二、CSS

*{ 
 margin: 0; 
 padding: 0; 
 text-decoration: none;
}
.content{
 width: 600px;
 height: 364px;
 border: 2px solid #000;
 position: relative;
 margin-left: 30px;
 margin-top: 50px; 
 position: relative;
 overflow: hidden;
 moz-user-select: -moz-none; 
 -moz-user-select: none; 
 -o-user-select: none; 
 -khtml-user-select: none; /* you could also put this in a class */ 
 -webkit-user-select: none;/* and add the CSS class here instead */ 
 -ms-user-select: none; 
 user-select: none;/**禁止选中文字*/ 
}
.img_box{
 width: 3000px;
 height: 364px;
 position: absolute;
 left: 0px;
 top: 0px;
 clear: both;
 z-index:1;
}
.img_box img{
 width: 600px;
 height: 364px;
 float: left;
 display: block;
}
.content a{
 color: #FFF;
 text-decoration: none;
 position: absolute;
 font-size: 40px;
 display: none;
 width: 45px;
 text-align: center;
 height: 45px;
 line-height: 45px;
 background-color: rgba(0,0,0,0.3);
 top: 165px;
 cursor: pointer;
 z-index:999;
}
.content:hover .left_btn,.content:hover .right_btn{
 display: block;/*鼠标经过.content时显示按钮*/
}
.content .left_btn{
 left: 30px;
}
.content .right_btn{
 left: 520px;
}
.content .left_btn:hover,.content .right_btn:hover{
 background-color: rgba(0,0,0,0.5);
}
.content .img_dot{
 width: 150px;
 height: 20px;
 position: absolute;
 left: 260px;
 bottom: 20px;
 z-index: 999;
}
.content .img_dot span{
 color: #FFF;
 width: 12px;
 height: 12px;
 margin: 3px;
 display: inline-block;
 background-color: rgba(0,0,0,0.7);
 border-radius: 50%;
 cursor: pointer;
 border: 1px solid #FFF;
}
.content .img_dot span:hover,.content .img_dot .on{
 background-color: #99FF00; 
}

1、背景透明:background-color: rgba(0,0,0,0.3);

2、小技巧:鼠标经过显示按钮。

.content:hover .left_btn,.content:hover .right_btn{
 display: block;/*鼠标经过.content时显示按钮*/
}

3、禁止选中文字

(1)<body onselectstart=”return false”> 也可以在DIV中使用

(2)在容器中加入该CSS

 moz-user-select: -moz-none; 
 -moz-user-select: none; 
 -o-user-select: none; 
 -khtml-user-select: none; /* you could also put this in a class */ 
 -webkit-user-select: none;/* and add the CSS class here instead */ 
 -ms-user-select: none; 
 user-select: none;/**禁止选中文字*/

三、JS

window.onload = function(){
 var prev = document.getElementById("prev");
 var next = document.getElementById("next");
 var img_box = document.getElementById("img_box");
 var buttons = document.getElementById('img_dot').getElementsByTagName('span');
 var index = 1;//为按钮赋一个初始值
 
 function showButton(){//小圆点高亮
 for(var i=0;i<buttons.length;i++){
 if(buttons[i].className=="on"){
 buttons[i].className="";
 break;
 }
 }
 buttons[index - 1].className = 'on';//第一个小圆点亮起来
 }
function animat(offset){//箭头切换的封装函数
 var newleft = parseInt(img_box.style.left)+ offset;//newleft是一个新left数值
 img_box.style.left = newleft +"px";
 if(newleft>=0){//当出现最后一张图的附属图时,将left值定为-1800px(真正的3号图)
 img_box.style.left = -1800 + "px" ;
 }
 if(newleft<=-2400){//当出现第一张图的附属图时,将left值定为-600px(真正的1号图)
 img_box.style.left = -600 + "px" ;
 }
 //debugger;
 }
prev.onclick = function(){//点击左箭头
 animat(600);
 index -= 1;//自减1
 if(index<1){//当index小于1(相当于说点到第一张图,没有上一张图了),应将index设为1
 index=3;
 }
 showButton();
 }
next.onclick = function(){//点击右箭头
 animat(-600);
 index += 1;//自加1
 if(index>3){//当index大于3(相当于说点到第三张图,再往下点没图了),应将index设为1
 index=1;
 }
 showButton();
 }
for (var i=0;i<buttons.length;i++) {//小按钮点击效果(小按钮在数组内,需要通过遍历数组才能用)
 buttons[i].onclick = function(){
 if(this.className=="on"){
 return;
 } 
 var myindex = parseInt(this.getAttribute("index"));//getAttribute方法获取自定义元素的属性,然后转换成整数
 var offset = - 600 *(myindex - index);//偏移量
 animat(offset);
 index = myindex;
 showButton();
 //debugger;
 }
 };
}

1、自减1和自加1:index -=1; index +=1;

2、获取自定义元素的属性:getAttribute

3、实现步骤

(1)箭头效果:偏移固定数值实现。

(2)小圆点的跟随高亮:获取当前小圆点。

(3)小圆点的切换效果:也是计算偏移量。

 

要发表评论,您必须先登录