两种轮播的模板

用户6654770821342
153 阅读2分钟

1.淡入淡出轮播

css部分

* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		img {
			width: 100%;
			vertical-align: bottom;
			opacity: 0;
		}
		
		.carousel {
			position: relative;
		}
		
		.carousel>.carousel_img>img {
			position: absolute;
			top: 0;
			left: 0;
			transition: 1s;
		}
		
		.carousel>button {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: rgba(0, 0, 0, .5);
			border: 1px solid purple;
			color: #fff;
			font-size: 26px;
			cursor: pointer;
			position: absolute;
			top: 50%;
			margin-top: -25px;
		}
		
		.carousel>button:nth-of-type(1) {
			left: 50px;
		}
		
		.carousel>button:nth-of-type(2) {
			right: 50px;
		}
		
		.carousel>button:hover {
			background: rgba(0, 0, 0, .7);
		}
		
		.carousel>button:active {
			background: rgba(0, 0, 0, 1);
		}
		
		.carousel>ul {
			position: absolute;
			bottom: 50px;
			left: 50%;
			width: 500px;
			text-align: center;
			margin-left: -250px;
		}
		
		.carousel>ul>li {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #fff;
			display: inline-block;
			cursor: pointer;
		}
		
		img.active {
			opacity: 1;
		}
		
		.carousel>ul>li.active {
			background: purple;
		}

html部分

<div id="car" class="carousel">
		<div class="carousel_img">
			<img class="active" src="img/1.jpg" />
			<img src="img/2.jpg" />
			<img src="img/3.jpg" />
		</div>
		<img src="img/3.jpg" />
		<button><</button>
		<button>></button>
		<ul>
			<li dy="0" class="active"></li>
			<li dy="1"></li>
			<li dy="2"></li>
		</ul>
	</div>

js部分

<script>
        //获取要操作的元素
    var btns=document.getElementsByTagName("button");//（TagName拿到的是一个集合）
    var imgs=document.getElementsByTagName("img");
    var j=0;//设置计数器（关键）
    var lis=document.getElementsByTagName("li");
    
    for(var i=0;i<btns.length;i++){//遍历，拿到每一个button
        btns[i].onclick=function(){
            if(this.innerText==">"){//判断button
                j++;//每点击一次j便加1
                j==lis.length&&(j=0);
                for(var i=0;i<lis.length;i++){//遍历，为的是拿到img和lis的下标
                    //每点击一次便清空样式
                    lis[i].className="";
                    imgs[i].className="";
                        }
                 //点击一次，清空后，添加样式
                lis[j].className="active";
                imgs[j].className="active";
                    }else if(this.innerText=="<"){
                        j--;
                        j==-1&&(j=lis.length-1);
                        for(var i=0;i<lis.length;i++){
                            lis[i].className="";
                            imgs[i].className="";
                                }
                        
                        lisp[j].className="active";
                        imgsp[j].className="active";
                        }
                            }
                                }
              
       for(var i in lis){
           lis[i].onclick=function(){
               for(var i=0;i<lis.length;i++){
                   lis[i].className="";
                   imgs[i].className="";
                       }
               var j=this.setAttribute("dy");
               lis[j].className="active";
               imgs[j].className="active";
                   }
                       }
      timer=setInterval(function(){//定时器，
                 j++;
                j==lis.length&&(j=0);
                for(var i=0;i<lis.length;i++){
                    lis[i].className="";
                    imgs[i].className="";
                        }
                 
                lis[j].className="active";
                imgs[j].className="active";
      
          },1000)
          car.onmouseover=function(){
              clearInterval(timer);
                  }
           car.onmouseout=function(){
              timer=setInterval(function(){
                  j++;
                  j==lis.length&&(j=0);
                  for(var i=0;i<lis.length;i++){
                    lis[i].className="";
                    imgs[i].className="";
                        }
                 
                lis[j].className="active";
                imgs[j].className="active";
                      },1000)     
                   
                   }

滚动轮播

css部分

* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		img {
			width: 100%;
			vertical-align: bottom;
		}
		
		.carousel {
			position: relative;
			overflow: hidden;
		}
		.carousel>.carousel_img{
			width: 300%;
			overflow: hidden;
			transition: 1s;
		}
		.carousel>.carousel_img>img {
			float: left;
			width: 33.33%;
		}
		
		.carousel>button {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: rgba(0, 0, 0, .5);
			border: 1px solid purple;
			color: #fff;
			font-size: 26px;
			cursor: pointer;
			position: absolute;
			top: 50%;
			margin-top: -25px;
		}
		
		.carousel>button:nth-of-type(1) {
			left: 50px;
		}
		
		.carousel>button:nth-of-type(2) {
			right: 50px;
		}
		
		.carousel>button:hover {
			background: rgba(0, 0, 0, .7);
		}
		
		.carousel>button:active {
			background: rgba(0, 0, 0, 1);
		}
		
		.carousel>ul {
			position: absolute;
			bottom: 50px;
			left: 50%;
			width: 500px;
			text-align: center;
			margin-left: -250px;
		}
		
		.carousel>ul>li {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #fff;
			display: inline-block;
			cursor: pointer;
		}
		
		.carousel>ul>li.active {
			background: purple;
		}

html部分

<div id="car" class="carousel">
		<div class="carousel_img">
			<img class="active" src="img/1.jpg" />
			<img src="img/2.jpg" />
			<img src="img/3.jpg" />
		</div>

		<button><</button>
		<button>></button>
		<ul>
			<li dy="0" class="active"></li>
			<li dy="1" ></li>
			<li dy="2" ></li>
		</ul>
	</div>

js部分

var btns=document.getElementsByTagName("button");
var lis=document.getElementsByTagName("li");
var carousel_img=document.querySelector("carousel_img");
var j=0;
for(var i=0;i<btns.length;i++){
    btns[i].onclick=function(){
        if(this.innerText==">"){
            j++;
            j==lis.length&&(j=0);
            for(var i=0;i<lis.length;i++){
                lis[i].className="";
                
                    }
            car_img.style.marginLeft=j*-100+"%";
            lis[j].className="active";
                }
       if(this.innerText=="<"){
           j--;
           j==-1&&(j=lis.length-1);
           for(var i=0;i<lis.length;i++){
                lis[i].className="";
                
                    }
           car_img.style.marginLeft=j*-100+"%";
       lis[j].className="active";
               }
                   }
                       }
     for(var i in lis){
	lis[i].onclick=function(){
	j=this.getAttribute("dy");
	for(var i=0;i<lis.length;i++){
                lis[i].className="";
			}
	car_img.style.marginLeft=j*-100+"%";
	lis[j].className="active";
                }
	}
avatar
文章
阅读
粉丝