javascript - 原生 js 实现图片“自动+无缝”滚屏效果

注意

• 本篇博客是对自己练习成果的记录和展示，逻辑并不复杂，但是因为页面是从京东网站扒下来的，内容比较复杂，所以对其他人来说参考的价值不大，当然如果有耐心也是可以理清的。

效果展示

源代码

<div class="box_bd">
		<div class="slider daily_slider">
			<button class="slider_control slider_control_prev">
				<i class="iconfont" clstag="h|keycount|core|album_sl"></i>
			</button>
			<div class="slider_list" style="overflow: hidden;">
				<div id="categorydiv" class="slider_wrapper" style="opacity: 1; width: 1750px; transform: translate3d(0px, 0px, 0px); transition: none">
					<%
						Product cp = null;
						for (int j = 0; j < productsofsamecategory.size(); j++) {
							cp = productsofsamecategory.get(j);
					%>
					<a class="slider_item daily_lk slider_active" href="./productdetail.jsp?proid=<%=cp.getId()%>" target="_blank" clstag="h|keycount|core|album_b0<%=j + 1%>" data-index="<%=j%>" style="float: left; width: 350px;">
						<div class="lazyimg lazyimg_loaded daily_img">
							<img src="./shop/daily_0<%=j + 1%>.webp" data-lazy-src="./shop/daily_0<%=j + 1%>.webp" class="lazyimg_img">
						</div>
						<div class="daily_cover">
							<div class="daily_list">
								<div class="daily_item">
									<div class="lazyimg lazyimg_loaded daily_item_img">
										<img src="./shop/daily_1<%=j + 1%>" data-lazy-src="./shop/daily_1<%=j + 1%>" class="lazyimg_img">
									</div>
								</div>
								<div class="daily_item">
									<div class="lazyimg lazyimg_loaded daily_item_img">
										<img src="./shop/daily_2<%=j + 1%>" data-lazy-src="./shop/daily_2<%=j + 1%>" class="lazyimg_img">
									</div>
								</div>
								<div class="daily_item">
									<div class="lazyimg lazyimg_loaded daily_item_img">
										<img src="./shop/daily_3<%=j + 1%>" data-lazy-src="./shop/daily_3<%=j + 1%>" class="lazyimg_img">
									</div>
								</div>
							</div>
							<h3 class="daily_title">
								<span class="daily_title_txt" title="<%=cp.getName()%>"><%=cp.getName()%></span>
							</h3>
							<div class="daily_subtit" title="<%=cp.getDescr()%>"><%=cp.getDescr()%></div>
							<div class="daily_btn">立即查看</div>
						</div>
					</a>
					<%
						}

						cp = productsofsamecategory.get(0);
					%>

					<!-- the same as the first image -->
					<a class="slider_item daily_lk slider_active" href="./productdetail.jsp?proid=<%=cp.getId()%>" target="_blank" clstag="h|keycount|core|album_b0<%=1%>" data-index="<%=0%>" style="float: left; width: 350px;">
						<div class="lazyimg lazyimg_loaded daily_img">
							<img src="./shop/daily_0<%=1%>.webp" data-lazy-src="./shop/daily_0<%=1%>.webp" class="lazyimg_img">
						</div>
						<div class="daily_cover">
							<div class="daily_list">
								<div class="daily_item">
									<div class="lazyimg lazyimg_loaded daily_item_img">
										<img src="./shop/daily_1<%=1%>" data-lazy-src="./shop/daily_1<%=1%>" class="lazyimg_img">
									</div>
								</div>
								<div class="daily_item">
									<div class="lazyimg lazyimg_loaded daily_item_img">
										<img src="./shop/daily_2<%=1%>" data-lazy-src="./shop/daily_2<%=1%>" class="lazyimg_img">
									</div>
								</div>
								<div class="daily_item">
									<div class="lazyimg lazyimg_loaded daily_item_img">
										<img src="./shop/daily_3<%=1%>" data-lazy-src="./shop/daily_3<%=1%>" class="lazyimg_img">
									</div>
								</div>
							</div>
							<h3 class="daily_title">
								<span class="daily_title_txt" title="<%=cp.getName()%>"><%=cp.getName()%></span>
							</h3>
							<div class="daily_subtit" title="<%=cp.getDescr()%>"><%=cp.getDescr()%></div>
							<div class="daily_btn">立即查看</div>
						</div>
					</a>
				</div>
			</div>
			<button class="slider_control slider_control_next">
				<i class="iconfont" clstag="h|keycount|core|album_sr"></i>
			</button>
			<div id="sliderbtndiv" class="slider_indicators" style="margin-left: -25.5px;">
				<i clstag="h|keycount|core|album_s01" class="slider_indicators_btn slider_indicators_btn_active" onmouseover="switchimages(this, 1)"></i> <i clstag="h|keycount|core|album_s02"
					class="slider_indicators_btn" onmouseover="switchimages(this, 2)"></i> <i clstag="h|keycount|core|album_s03" class="slider_indicators_btn slider_indicators_btn_last"
					onmouseover="switchimages(this, 3)"></i>
			</div>

			<!-- slide images automatically -->
			<script type="text/javascript">
				var imagenode = document.getElementById("categorydiv");
				var sliderbtnnodes = document.getElementById("sliderbtndiv").children;
				var numflag = 1;
			
				var sliderimages = function() {
					if (numflag >= 4) {
						numflag = 1;
						imagenode.style.transition = "none";
						imagenode.style.transform = "translate3d(0px, 0px, 0px)";
						setTimeout(sliderimages, 50);
					} else {
						imagenode.style.transition = "transform, 1s, linear, 1s";
						imagenode.style.transform = "translate3d(" + 350 * (0 - numflag) + "px, 0px, 0px)";
						numflag++;
						if (numflag == 2) {
							sliderbtnnodes[0].className = "slider_indicators_btn";
							sliderbtnnodes[1].className = "slider_indicators_btn slider_indicators_btn_active";
							sliderbtnnodes[2].className = "slider_indicators_btn";
						} else if (numflag == 3) {
							sliderbtnnodes[0].className = "slider_indicators_btn";
							sliderbtnnodes[1].className = "slider_indicators_btn";
							sliderbtnnodes[2].className = "slider_indicators_btn slider_indicators_btn_active";
						} else if (numflag == 4) {
							sliderbtnnodes[0].className = "slider_indicators_btn slider_indicators_btn_active";
							sliderbtnnodes[1].className = "slider_indicators_btn";
							sliderbtnnodes[2].className = "slider_indicators_btn";
						}
						setTimeout(sliderimages, 5000);
					}
				}
			
				setTimeout(sliderimages, 5000);
			</script>
			<script type="text/javascript">
				// switch images by slider button
				function switchimages(thisnode, seq) {
					numflag = seq;
			
					var prevnode = thisnode.parentNode.getElementsByClassName("slider_indicators_btn_active")[0];
					prevnode.className = "slider_indicators_btn";
					thisnode.className = "slider_indicators_btn slider_indicators_btn_active";
			
					var imagenode = document.getElementById("categorydiv");
					imagenode.style.transition = "transform, 1s, linear, 1s";
					imagenode.style.transform = "translate3d(" + 350 * (1 - seq) + "px, 0px, 0px)";
				}
			</script>
		</div>
	</div>