JS简单实现仿网页图片轮播_html网页设计轮播资源-CSDN下载

共13个文件

jpg：5个

xml：4个

png：2个

需积分: 49 49 浏览量 2017-10-30 17:00:41 上传评论 3 收藏 625KB ZIP 举报

在网页设计中，图片轮播是一种常见的展示方式，它能够以动态的形式展示多张图片，增强用户体验。本文将深入探讨如何使用JavaScript实现一个简单的图片轮播功能，这将包括自动切换、手动切换以及下标指示器的实现。我们需要准备HTML结构。一个基本的图片轮播组件通常包含一个容器元素，用于存放所有图片，以及一组下标按钮，用来让用户手动切换图片。例如： ```html <div class="slider"> <div class="slider-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2">  </div> <ul class="dots"> <li class="dot active"></li> <li class="dot"></li>  </ul> </div> ``` 接下来，我们使用CSS对轮播组件进行样式设置，确保图片可以正确显示并隐藏非当前显示的图片： ```css .slider-container { position: relative; width: 100%; height: 300px; /* 自定义高度 */ overflow: hidden; } .slider-container img { position: absolute; width: 100%; height: 100%; object-fit: cover; } .dot { cursor: pointer; } ``` 现在，我们可以编写JavaScript代码来实现轮播功能。我们需要获取DOM元素，然后设置初始状态（如当前显示的图片索引），并设置定时器实现自动切换： ```javascript const sliderContainer = document.querySelector('.slider-container'); const images = sliderContainer.querySelectorAll('img'); const dots = document.querySelectorAll('.dots .dot'); let currentIndex = 0; // 设置初始活动图片和下标 images[currentIndex].classList.add('active'); dots[currentIndex].classList.add('active'); // 自动切换图片 function autoSwitch() { if (currentIndex === images.length - 1) { currentIndex = 0; } else { currentIndex++; } switchImage(); } // 切换图片并更新下标 function switchImage() { images.forEach(img => img.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); images[currentIndex].classList.add('active'); dots[currentIndex].classList.add('active'); } // 每隔一段时间自动切换 setInterval(autoSwitch, 3000); // 3秒切换一次 ``` 为了实现手动切换，我们需要监听每个下标按钮的点击事件，并在点击时调用`switchImage`函数，同时更新当前索引： ```javascript dots.forEach((dot, index) => { dot.addEventListener('click', () => { currentIndex = index; switchImage(); }); }); ``` 至此，我们已经创建了一个基本的JavaScript图片轮播组件，具备自动切换和手动切换的功能。你可以根据实际需求调整切换时间、添加过渡效果，或者优化交互体验，如添加左右箭头控制切换，增加触摸滑动支持等。 JavaScript在实现网页动态效果方面具有强大的能力，通过学习和实践，我们可以轻松创建出各种丰富的用户界面。这个简单的图片轮播教程只是一个起点，帮助你理解如何运用JavaScript来操控DOM元素和实现动态效果。在实际项目中，还可以结合其他技术，如CSS动画和框架（如React或Vue.js）来进一步提升轮播组件的性能和可维护性。

资源推荐

资源详情

资源评论

收起资源包目录

JavaScript之简单实现图片轮播.zip （13个子文件）

JavaScript之简单实现图片轮播

img

icon-goleft-null.png 5KB

yys_banner2.jpg 143KB

yys_banner5.jpg 109KB

yys_banner4.jpg 122KB

yys_banner3.jpg 117KB

go-right.png 5KB

yys_banner1.jpg 120KB

.idea

misc.xml 216B

modules.xml 308B

dictionaries

ASUS.xml 85B

workspace.xml 14KB

inspectionProfiles

JavaScript平时作业练习.iml 458B

阴阳师.html 4KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #banner{ width: 720px; height: 600px; margin: 0 auto; } #middle{ width: 720px; height: 64px; position: relative; top: -280px; left: 0px; visibility: hidden; } #middle .left{ width: 70px; height: 64px; float: left; background:url("img/icon-goleft-null.png") no-repeat; } #middle .right{ width: 70px; height: 64px; float: right; background:url("img/go-right.png") no-repeat; } ul{ list-style: none; } li{ width: 16px; height: 16px; border-radius: 8px; background: #ffffff; color: #000; margin-left: 8px; text-align: center; line-height: 16px; float: left; position: relative; top: -120px; left: 250px; cursor: pointer; } .active{ background: red; color: white; } </style> <script> </script> </head> <body> <div id="banner"> <img src="" alt=""> <div id="middle"> <span class="left"></span> <span class="right"></span> </div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script> var oImg = document.getElementsByTagName('img')[0]; var oDiv = document.getElementById('banner'); var oDiv2 = document.getElementById('middle'); var oPrev = document.getElementsByTagName('span')[0]; var oNext = document.getElementsByTagName('span')[1]; var aLi =document.getElementsByTagName('li'); var arr = ['img/yys_banner1.jpg','img/yys_banner2.jpg','img/yys_banner3.jpg','img/yys_banner4.jpg','img/yys_banner5.jpg']; oImg.src = arr[0]; var num = 0; var timer = null; function fnTab() { oImg.src=arr[num]; for( var i=0; i<aLi.length; i++ ){ aLi[i].className = ''; } aLi[num].className = 'active'; } fnTab(); timer = setInterval(function () { go(); }, 1000); for( var i=0; i<aLi.length; i++ ){ aLi[i].index = i; // 索引值 aLi[i].onclick = function (){ num = this.index; fnTab(); }; } oDiv.onmouseover = function () { oDiv2.style.visibility = 'visible'; clearInterval(timer); }; oDiv.onmouseout = function () { oDiv2.style.visibility = 'hidden'; timer = setInterval(function () { go(); }, 1000); }; oPrev.onclick = function () { for( var i=0; i<aLi.length; i++ ){ aLi[i].className = ''; } aLi[num].className = 'active'; oImg.src=arr[num]; num--; if (num===-1){ num=arr.length-1; } }; oNext.onclick = function () { go(); }; function go() { for( var i=0; i<aLi.length; i++ ){ aLi[i].className = ''; } num++; if (num==arr.length){ num=0; } oImg.src=arr[num]; aLi[num].className = 'active'; } </script> </body> </html>

评论收藏

内容反馈