轮播图

滑动式轮播图:需要实现的是 

             1、定时播动;

             2、每次图片停留几秒再轮播走;

             3、向后滑动时做到尾首连接;

             4、向前滑动时做到首尾连接。

* 滑动式轮播图(无缝连接 最后一张与第一张连接)

* a1.....a6.jpg轮播:6张图轮播我需要再加上两张图做到首<-s>尾无缝连接

* 鼠标点击相应图标滑动

* 用鼠标点击事件辅助操作,每次鼠标事件发生就只滑动一张图片距离.定时启动鼠标事件发生即可实现自动轮播

* 每3000ms让调用计时器让图片移动,移动一个距离就关闭计时器。打到下一个3000ms时......时间不会冲突

* 1.向后移动,每次移动到图片width的距离就关闭计时器,

* 难点是最后一个与第一个的无缝连接:

* 1、在图片后面再加一个ul,让id=adv1里面放两张图片(a1.jpg和a2.jpg)

* 2、当框里是最后一张图片时,准备adv1的移动,

* 3、当adv1中的第二个图片到框内时,让adv里的相应位置与之重叠,并随着移动

* 4、当adv1内的两张图片全移走时,让它在框后面排着准备下次需要时进框来做到尾首无缝连接的视觉

* 在此过程中需要在需要的时候手动改变两组图片的marginLeft

* 向左滑动时首位连接时也是同样思路。

简易效果实现,但是仿佛性能不太好,有些知识还需学习,提高代码功能,增强体验感。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <link rel="stylesheet" href="carouse.css">
    <script src="carouse.js" type="text/javascript"></script>
</head>
<body>

   	<div class="wrap">
        <ul id="adv0" style="margin-left:-1000px">
            <li><img src="images/a5.jpg" alt=""></li>
            <li><img src="images/a6.jpg" alt=""></li>
        </ul>
		<ul id="adv" style="margin-left:0">
				<li><img src="images/a1.jpg" alt=""></li>
				<li><img src="images/a2.jpg" alt=""></li>
				<li><img src="images/a3.jpg" alt=""></li>
				<li><img src="images/a4.jpg" alt=""></li>
				<li><img src="images/a5.jpg" alt=""></li>
				<li><img src="images/a6.jpg" alt=""></li>
		</ul>	
		<ul id='adv1' style="margin-left: 500px">
				<li><img src="images/a1.jpg" alt=""></li>
				<li><img src="images/a2.jpg" alt=""></li>
    	</ul>
		<img src="images/left.png" id="prev" alt="">
        <img src="images/right.png" id="next" alt=""> 
    </div>
</body>
</html>
*{
    margin: 0px;
    padding: 0;
    list-style: none;
}
.wrap{
    width: 500px;
    height: 500px;
    position: relative;
    overflow: hidden;
    margin: auto;
}

#adv{
    width: 3000px;
    position:absolute;
    float: left;
}
li{
    float: left;
}
#adv0{
    width: 1000px;
    position: absolute;
}
#adv1{
    width: 1000px;
    position: absolute;
}
#prev,
#next{
    position: absolute;
    cursor: pointer;
    top: 30%;
    transition: .5s;
    opacity: 0.2;
}
#next:hover,
#prev:hover{
    transform: scale(1.1);
    opacity: 0.7;
}
#prev{
    left: -50px;
}
#next{
    right: -50px;
}

 

window.onload=function(){
    var next=document.getElementById('next');
    var ul=document.getElementById('adv');
    var liList=document.getElementById('adv').getElementsByTagName('li');
    var ul2=document.getElementById('adv1');
    var ul0=document.getElementById('adv0');
    var ml=parseInt(ul.style.marginLeft);
    var n=0;	var cnt=-1;
    var key=true;
    next.onclick=function(){
        clearInterval(autoPlay);
        if(n==liList.length-1){//最后一张	
            cnt++;

          if(key==true){
            // key=false;
            var secondt=setInterval(function(){
            
                    ml=parseInt(ul.style.marginLeft);//每次进入都需要获取此时的位置
                    if(cnt==1){
                        ul.style.marginLeft='-500px';//显示第二张图 在之后随之移动
                    }
                    var ml2=parseInt(ul2.style.marginLeft);
                    if(ml2==-cnt*500&&(cnt==0||cnt==1)){
                        clearTimeout(secondt);
                        key=ture;
                    }
                    else if(ml2==-cnt*500&&cnt==2){						
                        ul2.style.marginLeft='500px';					
                        n=2;cnt=-1;
                        clearInterval(secondt);
                        key=true;
                    }
                    else{
                        ul.style.marginLeft=ml-20+'px';
                        ul2.style.marginLeft=ml2-20+'px';
                    }  
                    },20)  
                }

        }
        else{
            n++;
            var t=setInterval(function(){
                var ml=parseInt(ul.style.marginLeft);
                if(ml==-(n*500)){//每走完一个图片就停止
                    clearInterval(t);
                }else{
                    ul.style.marginLeft=ml-20+'px';//否则继续往后播放
                }
            },20);
        }
    }
    var num=2;
    prev.onclick=function(){
        clearInterval(autoPlay);
    if(n==0){  
        num--; 
     if(key==true){
        //  key=false;
        var timePre=setInterval(function(){ 
            var pml=parseInt(ul0.style.marginLeft);
            ml=parseInt(ul.style.marginLeft);
            if(num==0){
                ul.style.marginLeft='-2000px';
            }
            if(pml==-500*num&&(num==1||num==0)){
                clearInterval(timePre);
                key=true;
            }
            else if(pml==-500*num&&cnt==-1){
                ul0.style.marginLeft='-1000px';
                    n=3;num=2;
                    clearInterval(timePre);
                    key=true;
            }
            else{
                ul0.style.marginLeft=pml+20+'px';
                ul.style.marginLeft=ml+20+'px';
            }
            },20)  
    }
       
    }
    else{
        n--;
        var t=setInterval(function(){
            var ml=parseInt(ul.style.marginLeft);
            if(ml==-n*500){
                    clearInterval(t);							
            }
            else{
                ul.style.marginLeft=ml+20+'px';
            }
        },20);
    }
}
var autoPlay=setInterval(function(){
    next.onclick();
},3000)
}

闪式轮播

 在要显示的图片上加上class属性,此属性有显示图片的功能,比较简单 详见代码

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		li{
			list-style:none;
		}
		#adv{
			margin: 110px auto;
			width: 500px;
			position:relative;
			border: 1px solid black;
		}
		#adv li{
			display: none;
		}
		#adv .show{
			display: block;
		}
		#prev,
		#next{
			position: absolute;
			cursor: pointer;
			top: 30%;
			transition: .5s;
			opacity: 0.2;
		}
		#next:hover,
		#prev:hover{
			transform: scale(1.1);
			opacity: 0.7;
		}
		#prev{
			left: -50px;
		}
		#next{
			right: -50px;
		}
	
	</style>
	<script>
		window.onload=function(){
			var next=document.getElementById('next');
			var liList=document.getElementsByTagName('li');
			var n=0;//当前第几张
			next.onclick=function(){
				for(var i=0;i<liList.length;i++){
					liList[i].className='';
				}
				n++;
				if(n==liList.length){
					n=0;
				}
			  liList[n].className='show';
			}
			prev.onclick=function(){
				for(i=0;i<liList.length;i++){
					liList[i].className='';
				}				
				n--;
				if(n<0){
					n=liList.length-1;
				}
				liList[n].className='show';
			}
		}
	</script>
</head>
<body>
	<ul id="adv">
		<li class="show"><img src="a1.jpg" alt=""></li>
		<li><img src="a2.jpg" alt=""></li>
		<li><img src="a3.jpg" alt=""></li>
		<li><img src="a4.jpg" alt=""></li>
		<li><img src="a5.jpg" alt=""></li>
		<li><img src="a6.jpg" alt=""></li>
		<img src="left.png" id="prev" alt="">
		<img src="right.png" id="next" alt="">
	</ul>
</body>

</html> 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现轮播图图片切换背景根据图片颜色渐变的效果,可以使用CSS和JavaScript来实现。下面是一种实现方式的示例代码: HTML部分: ```html <div class="slideshow"> <div class="slide"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Image 3"> </div> </div> ``` CSS部分: ```css .slideshow { position: relative; } .slide { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } .slideshow img { width: 100%; height: auto; } .slideshow::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0)); z-index: -1; } ``` JavaScript部分: ```javascript const slides = document.querySelectorAll('.slide'); let currentIndex = 0; function changeSlide() { slides[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % slides.length; slides[currentIndex].classList.add('active'); } setInterval(changeSlide, 3000); ``` 上述代码中,通过CSS设置了轮播图容器的样式以及背景渐变效果。JavaScript部分实现了切换轮播图的逻辑,并使用setInterval函数定时调用changeSlide函数来切换图片。每次切换图片时,会为当前显示的图片添加active类,从而使其显示出来。 你可以根据实际需要修改CSS样式和JavaScript代码,来适应你的项目需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值