图片轮播

最新推荐文章于 2023-11-13 19:55:29 发布

闪闪趴蚊

最新推荐文章于 2023-11-13 19:55:29 发布

阅读量722

点赞数

文章标签：简易图片轮播

本文链接：https://blog.csdn.net/while_own/article/details/50732066

版权

滑动轮播

<!DOCTYPE html>  
<html>  
<head>  
	<title></title>  
	<style type="text/css">  
		*{  
			margin:0;  
			padding:0;  
		}  
		#box{  
			position: relative;  
			overflow: hidden;  
			margin:0 auto;  
		}  
		button{  
			position: absolute;  
			display: inline-block;  
			width: 50px;  
			height: 70px;  
			color: #fff;  
			font-size: 40px;  
			padding-bottom: 10px;  
			cursor: pointer;  
			border: 1px solid rgba(54,54,54,0.4);  
		}  
		button:focus{  
			outline: none;  
		}  
		.arrow_left{  
			top: 200px;  
			padding-left: 2px;  
			background-color: rgba(54,54,54,0.4);  
		}  
		.arrow_right{  
			top: 200px;  
			right: 0;  
			padding-right: 2px;  
			background-color: rgba(54,54,54,0.4);  
		}  
		ul{  
			position: absolute;  
			bottom: 10px;  
			left: 300px;  
			list-style: none;  
		}  
		li{  
			float: left;  
			color: #fff;  
			width: 20px;  
			height: 20px;  
			text-align: center;  
			line-height: 20px;  
			margin-left: 10px;  
			background-color: #000;  
			border-radius: 10px;  
			cursor: pointer;  
		}
		.pic{
			overflow: hidden;
		}  
		img{  
			float:left;  
		}  
		li.red{  
			background-color: red;  
		}  
	</style>  
</head>  
<body>  
	<div id="box">
		<div class="panel"> 
			<div class="icon_arrow">  
				<button class="arrow_left"><</button>  
				<button class="arrow_right">></button>  
				<ul class="circle">  
					<li class="red">1</li>  
					<li>2</li>  
					<li>3</li>  
					<li>4</li>  
				</ul>  
			</div>  
			<div class="pic">  
				<img src="4.jpg" name="4">  
				<img src="1.jpg" name="1">  
				<img src="2.jpg" name="2">  
				<img src="3.jpg" name="3">  
				<img src="4.jpg" name="4">  
				<img src="1.jpg" name="1">
			</div> 
		</div>       
	</div>  
	<script src="jquery-1.11.3.js"></script>  
	<script type="text/javascript">
    function test(num,width,height,time){//图片总数，相框长度，相框宽度,轮播间隔
    	var pic = $('.pic');
    	var current = getNumber();
    	function carousel(num,width,height,time){
			//设置轮播相框的大小
			$('#box').css({'width':width,'height':height});
			pic.css({'width':width*(num+2),'height':height,'margin-left':-width});
			//自动轮播
			var tip = setInterval(function(){
				$('.arrow_right').trigger('click');
			}, time);


			$('.panel').mouseenter(function(){
				clearInterval(tip);

			})
			$('.panel').mouseleave(function(){
				tip = setInterval(function(){
					$('.arrow_right').trigger('click');
				}, time);
			})
		}
		function getNumber(){
			var current = 0;
			var moveLeft = function(){
				current--;
				return getnum();
			}
			var moveRight = function(){
				current++;
				return getnum();
			}
			var getnum = function(){
				var num = (current%4+4)%4+1;
				return num;
			}
			var setnum = function(num){
				current = num;
			}
			var getCurrent =  function(){
				return current;
			}
			return {moveL:moveLeft,moveR:moveRight,setnum:setnum,getnum:getnum,getCurrent:getCurrent};
		}

		//鼠标点击右箭头
		$('.arrow_right').on('click',function(){
			PreventContinuousClick(this);
			pic.css('transition','margin-left 1s linear');
			var moveNum = current.moveR();
			circleAuto(moveNum);
			if(moveNum == 1){
				pic.css({'transition':'none','margin-left':0});
			}
			setTimeout(function(){
				$('.pic').css({'transition':'margin-left 1s linear','margin-left':-width * moveNum});
			},0);
		});


		//鼠标点击左箭头
		$('.arrow_left').on('click',function(){
			PreventContinuousClick(this);
			var moveNum = current.moveL();
			circleAuto(moveNum);
			if(moveNum == 4){
				pic.css({'margin-left':-width*5,'transition':'none'});
			}
			setTimeout(function(){
				pic.css({'transition':'margin-left 1s linear','marginLeft':-width * moveNum});
			},0);

		});


		//防止连续点击,每隔1S点击一次  
		function PreventContinuousClick(target){
			target.disabled=true;  
			setTimeout(function(){  
				target.disabled=false;  
			},1000);  
		}


		//点击小圆点跳转并注红功能  
		function circleRun(){
			$('.circle').on('click','li',function(){
				$('.circle').find('li').removeClass('red');
				$(this).addClass('red');
				var oldNum = current.getCurrent();
				var Newnum = parseInt($(this).html())-1;
				current.setnum(Newnum);
				if(oldNum>Newnum){
					pic.css({'transition':'margin-left 1s linear','marginLeft':-width * (Newnum+1)});
				}else if(oldNum<Newnum){
					pic.css({'transition':'margin-left 1s linear','marginLeft':-width *  (Newnum+1)});
				}               
			})
		}


		//小圆点自动跟随
		function circleAuto(value){
			var children = $('.circle').find('li');
			children.removeClass('red');
			for(var i =0;i<num;i++){
				if($(children[i]).html()==value){
					$(children[i]).addClass('red');
					return;
				}
			}
		}
		carousel(num,width,height,time);
		circleRun();
	}


	test(4,450,497,3000); 
	</script>  
</body>  
</html>

渐显渐隐轮播

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #d1{
            position: relative;
            width: 167px;
            height: 220px;
            border:1px solid red;
            margin-left: 100px;
        }
        li{
            position: absolute;
            opacity: 0;
            transition: opacity 0.3s linear;
        }
        .show{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="d1">
        <ul>
            <li id="li_1" class="show">
                <img src="1.jpg" height="220" width="167" alt="">
            </li>
            <li id="li_2">
                <img src="2.jpg" height="220" width="167" alt="">
            </li>
            <li id="li_3">
                <img src="3.jpg" height="220" width="167" alt="">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    var count=1;
    function changePic(num){//该案例只有3张图片，需要根据实际图片写入参数
        var countCur=count+1;
        var liHide=document.getElementById("li_"+count);//找到当前需要隐藏的图片
        if(count==num){
            countCur=1;
        }
        var liShow=document.getElementById("li_"+countCur);//找到当前需要显示的图片
        liHide.style.opacity=0;
        liShow.style.opacity=1;
        if(count==num){
            count=1;
        }else{
            count++;
        }
    }
    setInterval("changePic(3)",600);//因为函数句柄不能带参数，所以写成字符串你的形式可以使达到效果，或者写一个返回值是一个函数
    </script>
</body>
</html>