fgd-简单的响应式滚动幻灯片插件制作（单击距离滚动）

最新推荐文章于 2024-06-09 09:31:48 发布

fuguoda

最新推荐文章于 2024-06-09 09:31:48 发布

阅读量230

点赞数

分类专栏： web前端插件文章标签：轮播图幻灯片

本文链接：https://blog.csdn.net/qq_40976560/article/details/93542895

版权

web前端同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

插件

7 篇文章 0 订阅

订阅专栏

可以直接复制代码使用

 <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*,body{
    				margin: 0;
    				padding: 0;
    				box-sizing: border-box;
    			}
    			ul{
    				list-style: none;
    				list-style: -moz-none;
    			    transform: translate3d(0px, 0px, 0px);
    			    transition-timing-function: ease;
    			}
    			
    			.fgd-banner{
    				width: 100%;
    				margin: auto;
    				overflow: hidden;
    				position: relative;
    			}
    			.fgd-slides{
    				position: relative;
    				white-space: nowrap;
    				width: 200%;
    			}
    			.fgd-slides li{
    				text-align: center;
    				width: 380px;
    				height: 200px;
    				display: inline-block;
    				color: white;
    				position: relative;
    			}
    			.fgd-slides li img{
    				width: 100%;
    				height: 100%;
    			}
    			.fgd-slides li h3{
    				width: 100%;
    				color: white;
    				background: rgba(0,0,0,0.5);
    				position: absolute;
    				bottom: 10px;
    			}
    			.fgd-pre,.fgd-next{
    				position: absolute;
    				top: 50%;
    				width: 50px;
    				height: 40px;
    				line-height: 40px;
    				font-size: 28px;
    				background: rgba(0,0,0,0.6);
    				margin-top: -20px;
    				color: white;
    				cursor: pointer;
    				text-align: center;
    			}
    			.fgd-pre{
    				left: 5px;
    			}
    			.fgd-next{
    				right: 0px;
    			}
    			
    			@media screen and (min-width:992px) {
    				.fgd-slides li{
    					width: 12.5%;
    				}
    			}
    			@media screen and (max-width: 992px) and (min-width: 768px){
    			    .fgd-slides li{
    					width: 16.5%;
    				}
    			}
    			@media screen and (max-width: 768px) {
    			    .fgd-slides li{
    					width: 25%;
    				}
    			}
    		</style>
    	</head>
    	<body>
    		<div class="fgd-banner">
    			<ul class="fgd-slides">
    				<li>
    					<img src="body_background1.png"/>
    					<h3>欢迎使用fgd制作的幻灯片插件1</h3>
    				</li>
    				<li>
    					<img src="body_background1.png"/>
    					<h3>欢迎使用fgd制作的幻灯片插件2</h3>
    				</li>
    				<li>
    					<img src="body_background1.png"/>
    					<h3>欢迎使用fgd制作的幻灯片插件3</h3>
    				</li>
    				<li>
    					<img src="body_background1.png"/>
    					<h3>欢迎使用fgd制作的幻灯片插件4</h3>
    				</li>
    				<li>
    					<img src="body_background1.png"/>
    					<h3>欢迎使用fgd制作的幻灯片插件5</h3>
    				</li>
    				<li>
    					<img src="body_background1.png"/>
    					<h3>欢迎使用fgd制作的幻灯片插件6</h3>
    				</li>
    				<li>
    					<img src="body_background1.png"/>
    					<h3>欢迎使用fgd制作的幻灯片插件7</h3>
    				</li>
    				<li>
    					<img src="body_background1.png"/>
    					<h3>欢迎使用fgd制作的幻灯片插件8</h3>
    				</li>
    			</ul>
    			<div class="fgd-pre">&lt;</div>
    			<div class="fgd-next">&gt;</div>
    		</div>
    			
    		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			
    			var liWidth=$(".fgd-slides li").width();
    			var ulWidth=$(".fgd-slides").width();
    			var liLen=$(".fgd-slides li").length;
    			var ul=$(".fgd-slides");
    			var num=0;
    			console.log($(".fgd-slides li"))
    			//利用if语句进行响应式判断
    			if(this.innerWidth<768){liLen=liLen/2+2}
    			else if(this.innerWidth>768 && this.innerWidth<992){liLen=liLen/2+1}
    			else if(this.innerWidth>992){liLen=liLen/2}
    			$(".fgd-pre").click(function(){
    				num++;
    				if(num>0){num=-liLen}
    				console.log(num)
    				li=liWidth*num+5*num
    				ul.animate({
    					left : li+'px'
    				})
    			})
    			$(".fgd-next").click(function(){
    				num--;
    				if(-num>liLen){num=0}
    				console.log(num)
    				li=liWidth*num+5*num
    				ul.animate({
    					left : li+'px'
    				})
    			})
    		</script>
    	</body>
    </html>

效果图：
在这里插入图片描述

fuguoda

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fgd-简单的响应式滚动幻灯片插件制作（单击距离滚动）

可以直接复制代码使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *,body{ mar...
复制链接

扫一扫