【前端常用功能效果】一次单张或多张图片无缝自动轮播+左右无法切换

平底锅@小灰灰

已于 2024-04-25 14:19:03 修改

阅读量234

点赞数 6

文章标签： css3 javascript 前端

于 2024-04-24 11:16:31 首次发布

本文链接：https://blog.csdn.net/ztff123456/article/details/138153321

版权

一.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title></title>
		<script type="text/javascript" src="jquery-1.11.3.min.js" ></script>
		<script type="text/javascript" src="index.js" ></script>
		<style>
			.qyfcMain {
				width:1010px;
				overflow:hidden;
				padding:10px 0 15px;
				margin:20px auto;
			}
			.qyfcMains {
				width:120%;
				overflow:hidden;
			}
			.qyfcMainPublic {
				position:relative;
				overflow:hidden;
			}
			.qyfcMains li {
				float:left;
				width:240px;
				overflow:hidden;
				margin-left:10px;
			}
			.qyfcMains li em {
				display:block;
				width:100%;
				height:200px;
				overflow:hidden;
			}
			.qyfcMains li em img {
				width:100%;
				height:100%;
			}
			.qyfcMains li b {
				display:block;
				height:30px;
				line-height:30px;
				color:#505050;
				font-size:16px;
				text-align:center;
			}
			.qyfcMains li:hover b {
				color:#045597;
			}
			.prevBtns {
				display:none;
				width:40px;
				height:100%;
				overflow:hidden;
				position:absolute;
				top:0;
				left:0;
				z-index:9;
			}
			.prevBtns i {
				display:block;
				width:18px;
				height:55px;
				overflow:hidden;
				background:url("prev.png") no-repeat;
				z-index:9;
				margin-top:116px;
				margin-left: 10px;
			}
			.nextBtns {
				display:none;
				width:40px;
				height:100%;
				overflow:hidden;
				position:absolute;
				top:0;
				right:0;
				z-index:9;
			}
			.nextBtns i {
				display:block;
				width:18px;
				height:55px;
				overflow:hidden;
				background:url("next.png") no-repeat;
				margin-top:116px;
				margin-left:11px;
			}
			.qyfcMain:hover .prevBtns {
				display:block;
			}
			.qyfcMain:hover .nextBtns {
				display:block;
			}
		</style>
	</head>
	<body>
		<div class="qyfcMain">
			<div class="qyfcMainPublic">
				<a href="javascript:void(0)" class="prevBtns"><i></i></a>
				<a href="javascript:void(0)" class="nextBtns"><i></i></a>
				<ul class="qyfcMains" id="qyfcMain">
					<li><a href="javascript:void(0)"><em><img src="http://192.168.0.247:8080/group1/M00/00/CA/wKgA92Yd0H6EPhYoAAAAAIT7RCc808.jpg" alt=""></em><b>测试3</b></a></li>
					<li><a href="javascript:void(0)"><em><img src="http://192.168.0.247:8080/group1/M00/00/CA/wKgA92Yd0JeEc2XOAAAAAEdirUg546.jpg" alt=""></em><b>测试2</b></a></li>
					<li><a href="javascript:void(0)"><em><img src="http://192.168.0.247:8080/group1/undefined" alt=""></em><b>企业风采展示</b></a></li>
					<li><a href="javascript:void(0)"><em><img src="http://192.168.0.247:8080/group1/M00/00/CA/wKgA92Yd0D-EG59mAAAAAMAk_7o163.png" alt=""></em><b>测试1</b></a></li>
					<li><a href="javascript:void(0)"><em><img src="http://192.168.0.247:8080/group1/M00/00/CA/wKgA92Yd0F6EOP_jAAAAAMAk_7o837.png" alt=""></em><b>测试2</b></a></li>
					<li><a href="javascript:void(0)"><em><img src="http://192.168.0.247:8080/group1/M00/00/CA/wKgA92Yd0F6EOP_jAAAAAMAk_7o837.png" alt=""></em><b>测试2</b></a></li>
					<li><a href="javascript:void(0)"><em><img src="http://192.168.0.247:8080/group1/M00/00/CA/wKgA92Yd0F6EOP_jAAAAAMAk_7o837.png" alt=""></em><b>测试2</b></a></li>
				</ul>
			</div>
		</div>
		<script>
			bannerAnimt(".qyfcMainPublic");
		</script>
	</body>
</html>

二.js封装代码

var setIntervalTime = [];
function Debounce(func,date){ //防抖函数
    var timeout = null;      //定义一个定时器
    return function() {
        date = date || 300;
        var context = this,
            args = arguments;
        if(timeout !== null) clearTimeout(timeout);  //清除这个定时器
        timeout = setTimeout(func.bind(context),date);
    }
}
function bannerAnimt(Obj,Nums){ //活动掠影轮播
	Nums = Nums || 4
    if(setIntervalTime && setIntervalTime.length>0){
        for(var i = 0;i<setIntervalTime.length;i++){
            clearInterval(setIntervalTime[i]);
        }
    }
    var Len = $(Obj).find("ul li").length;
    var Ul = $(Obj).find("ul");
    var Width = $(Obj).find("ul li").eq(0).outerWidth(true);
    var Index = 0;
    if(Len > Nums){
        Ul.width(Width*Len)
        var Timer = null;
        $(Obj).hover(function(){
            clearInterval(Timer)
        },function(){
            setInt()
        })
        setInt()
        $(Obj).find(".prevBtns").on("click",Debounce(prev));
        $(Obj).find(".nextBtns").on("click",Debounce(next));
        function setInt(){
            Timer = setInterval(next,2500);
            setIntervalTime.push(Timer)
        }
        function next(){
            Ul.stop().animate({
                "marginLeft" : -Width
            },500,function(){
                Ul.find("li:first").appendTo(Ul);
                Ul.css("marginLeft","0");
            })
        }
        function prev(){
            Ul.find("li:first").before(Ul.find("li:last"));
            Ul.css({
                "marginLeft" : -Width
            })
            Ul.stop().animate({
                "marginLeft" : 0
            },500,function(){
                Ul.css("marginLeft","0");
            })
        }
    }
}