轮播图

最新推荐文章于 2022-05-12 09:56:57 发布

天空之枫

最新推荐文章于 2022-05-12 09:56:57 发布

阅读量400

点赞数

本文链接：https://blog.csdn.net/sinat_24713805/article/details/53382286

版权

先说一下轮播图的原理：首先先清除所有的padding：0；margin：0；清除边距设置两个div，在最里面放img，img以横向排列，可以用float：left；对里第二个div的宽度设置为所有img的宽度总和，对第一个div的宽度为一个img的宽度，高度为img高度，最重要的是要加overflow：hidden；然后就是对第二个div进行相对于第一个div的定位，设置left来实现在第一个div内的左右移动，这就是基本原理了，当然还有一种是将所有的img叠加在一起，实现多层，然后用js对img进行透明度的变换。

好，先看一段代码，具体介绍：

<!DOCTYPEHTML>
<html>
<head>
<mate charset="utf-8">
<style>
<body>
<div id="slide">
<ul class="slide_img" id="con" style="left:-800px;" >
  <li><a href="javascript:;"><img src="./images/5.jpg"></a></li>//实现无限滚动，防止有空隙
  <li><a href="javascript:;"><img src="./images/1.jpg"></a></li>
  <li><a href="javascript:;"><img src="./images/2.jpg"></a></li>
  <li><a href="javascript:;"><img src="./images/3.jpg"></a></li>
  <li><a href="javascript:;"><img src="./images/4.jpg"></a></li>
  <li><a href="javascript:;"><img src="./images/5.jpg"></a></li>
  <li><a href="javascript:;"><img src="./images/1.jpg"></a></li>//实现无限滚动，防止有空隙
</ul>
    <div class="number" id="number">//多个带颜色的小框
        <a index="1" class="on" href="javascript:;"></a>
        <a index="2" href="javascript:;"></a>
        <a index="3" href="javascript:;"></a>
        <a index="4" href="javascript:;"></a>
        <a index="5" href="javascript:;"></a>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>//向前的标志按钮
    <a href="javascript:;" id="next" class="arrow">></a>//向后的标志按钮
</div>
</body></html>

css的部分

body,ul{
  margin: 0;
 padding: 0;
}
/*清除边距*/
#slide{
   width: 800px;
   height: 450px;
   margin-top:100px;
   margin-left:300px;
   overflow: hidden;
   position: relative;
}
/*对div设置高，宽（即可视区域），为ul设置绝对定位的定位对象*/
.slide_img{
   width: 5600px;
   height: 100%;
   position: absolute;
   top: 0px;
}/*设置总宽，以div为定位点，做绝对定位*/
.slide_img li{
   list-style: none;
   float: left;
}
/*去li的点，向左对齐，形成一行排列*/
.slide_img img{ 
   width: 800px;
   height: 100%;
}
/*设置图片宽高*/
.number{
    width: 100%;
    text-align:center;
    position: absolute;
    left: 0;
    bottom: 80px;
}
.number a{
    display: inline-block;
    width: 20px;
    background-color: #fff;
    height: 6px;
    overflow: hidden;
}
.number a.on{
    background-color:#f60;
}
.arrow { 
  cursor: pointer;
 display: none;
 line-height: 39px;
 text-align: center;
 font-size: 36px;
 font-weight: bold;
 width: 40px;
 height: 40px;
 position: absolute;
 z-index: 2;
 top: 200px;
 background-color:
 RGBA(0,0,0,.3);
 color: #fff;
text-decoration: none;
}
.arrow:hover {
 background-color: RGBA(0,0,0,.7);
  text-decoration: none;
}/*改透明度，去掉下划线*/
  #slide:hover .arrow {
 display: block;
}
/*当鼠标移到图片上显示左右按钮*/
#prev {
 left: 50px;
}
#next {
 right: 50px;
}
/*左右的按钮的位置*/

js行为部分，参考慕课网，对left的操作

var slide=document.getElementById("slide");//获取id为slide对象
var con=document.getElementById("con");//获取id为con的对象
var number=document.getElementById("number").getElementsByTagName("a");//获取id为number下的标签a数组
var prev=document.getElementById("prev");//获取id为prev
var next=document.getElementById("next");//获取id为next
con.style.position="absolute";
var animated=false;//animated对象初始化为false
var timer;
   var index=1;
   function showbutton(){
   	 for(var i=0;i<number.length;i++ ){
              //遍历数组
               if(number[i].className=="on"){
   	 		number[i].className="";
   	 		break;
   	 	}//将有on类的清除为空
   	 }
   	number[index-1].className="on";//对鼠标移上的小框设置on类
   }
  function play(){
      //自动滚动
     timer=setInterval(function(){
  		next.onclick();
  	},3000);
  	}
  	function stop(){
          //清除计时器，停止滚动
           clearInterval(timer);
  	}
  function animate(offset){
          //滚动过程的速度
       animated=true;
  	var newlist=parseInt(con.style.left)+offset;
  	var time=300;
  	var interval=10;
  	var speed=offset/(time/interval);
  	function go(){
  		if((speed<0&&parseInt(con.style.left)>newlist)||(speed>0&&parseInt(con.style.left)<newlist)){
  			con.style.left=parseInt(con.style.left)+speed+"px";
  			setTimeout(go,interval);

  		}else{
  			animated=false;
  			con.style.left=newlist+"px";
  	      if(newlist> -800){
             //当图片向前滚动到顶时，变回最后的图片
            con.style.left= -4000+"px";
     	   }
  	      if(newlist< -4000){
                  //当图片向后滚动到底时，变回第一张
               con.style.left= -800+"px";
  		}
  	}
  	
  	}
  	go();//初始调用
  }
//点击按钮效果
 next.οnclick=function(){  
     if(!animated){
    	if(index==5){
    		index=1;
    	}else{index+=1;}  	
    	showbutton();
		animate(-800);
	}
}
    prev.οnclick=function(){
    	if(!animated){
    	if(index==1){
    		index=5;
    	}else{index-=1;}  
    	showbutton();
	     animate(800);
	    }
}
//当鼠标移到小框时，的效果
 for(var i=0;i<number.length;i++){
	number[i].οnmοuseοver=function(){
		var myIndex=parseInt(this.getAttribute("index"));//获取自定义属性index
		var offset=-800*(myIndex-index);
		if(!animated){
		animate(offset);
	
		index=myIndex;
		showbutton();}
	}
}
 slide.onmouseover = stop;
 slide.onmouseout = play;
play();
 }




</script>

天空之枫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图

先说一下轮播图的原理：首先先清除所有的padding：0；margin：0；清除边距设置两个div，在最里面放img，img以横向排列，可以用float：left；对里第二个div的宽度设置为所有img的宽度总和，对第一个div的宽度为一个img的宽度，高度为img高度，最重要的是要加overflow：hidden；然后就是对第二个div进行相对于第一个div的定位，设置left来实现在第一个di
复制链接

扫一扫