轮播图的实现

阳光穿透心脏的1/2处 2022-04-02 13:52 197阅读 0赞

# 简单轮播图实现（H5+CS3+JS&JQuery） #

## 最终效果图如下： ##

每2000毫秒自动轮播，鼠标划入显示左右按钮；进行手动点击按钮左右切换。划出隐藏按钮并继续进行自动播放。  
![在这里插入图片描述][2018122620581646.gif]

**\*\*\*下面将贴出我的实现代码：\*\*\***

--------------------

# 首先引入jquery #

# 页面Html #

## css样式： ##

#container{ 
        border:solid;
        width:500px;
        height:320px;
        margin:0 auto;
        position:relative;
        overflow: hidden;
      }
      #div1{ 
        width:4200px;
        height:300px;
        position:absolute;
      }
      img{ 
        float:left;
        width:500px;
        height:300px;
        z-index: 2;
      }
      #buttons{ //圆点导航框
       position:absolute;
       z-index: 1;
       width: 130px;
       height: 20px;
       left:370px;
       margin-left:-187.5px;
       margin-top:298px;
     }
     #buttons span{ //圆点样式
      position: relative;
      border: 1px solid rgba(0, 0, 0, 0.2);
      width: 5px;
      height: 5px;
      top:8px;
      left:35px;
      margin-left: 5px;
      border-radius: 50%;
      float: left;
      background-color:rgba(0,0,0,0.1);
    }
    #buttons .actived{ //选中时样式
      border: 1px solid rgba(205,133,63,1);
      background-color: rgba(205,133,63,1);
    }
    #left-right{ 
      display: none;
      position: relative;
      top:143px;
      width: 500px;
      height: 50px;
    }
    #left,#right{ //左右按钮样式
      width: 50px;
      height: 50px;
      text-align: center;
      font-size: 30px;
      border-radius: 50%;
      background-color:rgba(0, 0, 0, 0.1);
    }
    #left{ 
      float:left;
    }
    #right{ 
      float:right;
    }

## 实现效果的js代码 ##

var timer;
        //Dom元素加载完成后执行的代码
        $(document).ready(function() { 
        	$("#container").mouseover(function(event){ 
            clearInterval(timer);//清除计时器
            setlr();
        }).mouseout(function(event) { 
        	$("#left-right").css("display","none");
        	play();
        });
        $("#left-right").click(function(event) { 
        	setlr();
        });
        play();
    });
        //图片变换；
        function animate(offset) { 
        	var div = document.querySelector("#div1");
        	var newleft = parseInt(div.style.left) + offset;
        	if (newleft < -2000) { 
        		div.style.left = -500 + "px";
        	} else if (newleft > -500) { 
        		div.style.left = -2000 + "px";
        	} else { 
        		div.style.left = newleft + "px";
        	}
        	changespan(parseInt(div.style.left));
        };
        //监听圆点状态；
        function changespan(le){ 
        	$("span").attr("class","");
        	switch(le){ 
        		case -2000:
        		$("[index='1']").attr("class","actived");
        		break;
        		case -1500:
        		$("[index='2']").attr("class","actived");
        		break;
        		case -1000:
        		$("[index='3']").attr("class","actived");
        		break;
        		case -500:
        		$("[index='4']").attr("class","actived");
        		break;
        	} ;
        };
        //监听按钮显示与隐藏；
        function setlr(){ 
        	var div = document.querySelector("#div1");
        	$("#left-right").css("display","block");
        	if(parseInt(div.style.left) ==-2000 || (parseInt(div.style.left) + 1500)==-500){ 
        		$("#left").css("display","none");
        		$("#right").css({ "display":"block","cursor":"pointer"});
        	}else if(parseInt(div.style.left)==-500 || (parseInt(div.style.left) + -1500)==-2000 ){ 
        		$("#left").css({ "display":"block","cursor":"pointer"});
        		$("#right").css("display","none");
        	}else{ 
        		$("#left").css({ "display":"block","cursor":"pointer"});
        		$("#right").css({ "display":"block","cursor":"pointer"});
        	}
        }
        function play(){ 
        	timer=setInterval("animate(500)", 2000);
        }
        //左箭头点击时，触发事件；
        function pre(){ 
        	animate(-500);
        }
        //右箭头点击时，触发事件;
        function af(){ 
        	animate(500);
        }

希望能帮到大家，谢谢！！

[2018122620581646.gif]: /images/20220402/824a63572f8f43b19cba680defb87082.png