jQuery自适应三屏图片滚动展示特效代码下载


jQuery自适应三屏图片滚动展示特效代码下载
jQuery自适应三屏图片滚动展示特效代码下载以及自适应、三屏图片、滚动展示等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>

3. HTML代码

<div id="my-slide">
	<ul class="slide-list">
		<button type="button" class="slick-top-prev slick-arrow" style=""></button>
		<li attr-id="1" class="img-1 active">
			<img src="images/01.png" alt="">
		</li>
		<li attr-id="2" class="img-2 ">
			<img src="images/02.png" alt="">
		</li>
		<li attr-id="3" class="img-3 ">
			<img src="images/03.png" alt="">
		</li>
		<li attr-id="4" class="img-4">
			<img src="images/04.png" alt="">
		</li>
		<li attr-id="5" class="img-5 ">
			<img src="images/05.png" alt="">
		</li>
		<li attr-id="6" class="img-6">
			<img src="images/06.png" alt="">
		</li>
		<li attr-id="7" class="img-7 ">
			<img src="images/07.png" alt="">
		</li>
		<li attr-id="8" class="img-8 ">
			<img src="images/08.png" alt="">
		</li>
		<li attr-id="9" class="img-9 ">
			<img src="images/09.png" alt="">
		</li>
		<button type="button" class="slick-top-next slick-arrow" style=""></button>
	</ul>
</div>
<script>
	//init slide
	function slide_init(){
		//$("#my-slide>.slide-list").children("li").css("width","calc(100% - 20px - 50%)");
		var slide_length = $("#my-slide>.slide-list").children("li").length;
		var li_width = $("#my-slide>.slide-list").children("li").width();
		//ert(li_width);
		//Calculate position of every li element
		for (var j=1;j<=slide_length;j++){
			$("#my-slide>.slide-list").find(".img-" + j).css("left",li_width/2+li_width*(j-1)+20*j);
			if(j==slide_length){
				$("#my-slide>.slide-list").find(".img-" + j).css("left",-(li_width/2));
			}
		} 
	}
	//click left button to show the previous image
	$(".slick-top-prev").click(function(){
		var obj = $("#my-slide>.slide-list");
		top_slide_left_click(this,obj);
	});
	//click right button to show the previous image
	$(".slick-top-next").click(function(){
		var obj = $("#my-slide>.slide-list");
		top_slide_right_click(this,obj);
	});
	$(function(){
		slide_init();
	});
	//
	$(window).resize(function () {
		slide_init();
	});
</script>

相关推荐

发表评论

相关文章