JavaScript DOM操作实现网站滚动图特效
来源：互联网 发布：算法新解 pdf 编辑：程序博客网 时间：2024/05/21 15:48
代码如下：
1. index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滚动效果图</title> <script type="text/javascript" src="js/banner.js"></script> <style type="text/css"> #banner { width: 790px; height: 340px; margin: auto; overflow: hidden; } </style> <script type="text/javascript"> window.onload = function () { //滚动的图片数组,数组存储的是图片的路径 var imgs = []; imgs[0] = "img/banner1.jpg"; imgs[1] = "img/banner2.jpg"; imgs[2] = "img/banner3.jpg"; imgs[3] = "img/banner4.jpg"; imgs[4] = "img/banner5.jpg";// 调用方法，第一个参数为滚动块的容器ID，第二个为图片数组，第三个为滚动方式 banner("banner", imgs, "opacity");// banner("banner", imgs, "top");// banner("banner", imgs, "bottom");// banner("banner", imgs, "left");// banner("banner", imgs, "right"); } </script></head><body><div id="banner"></div></body></html>2.banner.js
var container;//整体容器var indicator;//滚动条容器var lastIndex = 0;//上一次图片位置var currentIndex = 0;//当前图片位置var types;//滚动方式 left,right,bottom,top,opacityvar interval;//得到计时器引用function banner(containerId, imgs, type) { window.types = type; container = document.getElementById(containerId); container.style.position = "relative"; var clientWidth = container.clientWidth; var clientHeight = container.clientHeight;//当鼠标放在大容器的时显示左右两边的按钮，移出时隐藏 container.addEventListener("mouseover", containerMouseover); container.addEventListener("mouseout", containerMouseout); //加载图片到div中（每一张图片创建一个块） for (var i = 0; i < imgs.length; i++) { var div = document.createElement("div"); div.style.width = clientWidth + "px"; div.style.height = clientHeight + "px"; div.style.backgroundImage = "url('" + imgs[i] + "')"; div.style.backgroundRepeat = "no-repeat"; div.style.position = "absolute"; if (i !== 0) { div.style.display = "none"; } container.appendChild(div); } //创建滚动条容器 indicator = document.createElement("div"); indicator.style.width = "180px"; indicator.style.height = "30px"; indicator.style.backgroundColor = "rgba(14,26,52,0.25)"; indicator.style.borderRadius = "15px" indicator.style.position = "absolute"; indicator.style.left = "310px"; indicator.style.bottom = "30px"; indicator.style.paddingLeft = "6px"; indicator.style.paddingRight = "6px"; //添加小点 for (var i = 0; i < imgs.length; i++) { var pointer = document.createElement("div"); // 为每个点添加鼠标移上去和移出事件 pointer.id = i; pointer.addEventListener("mouseover", mouseoverPointer); pointer.addEventListener("mouseout", mouseoutPointer); pointer.style.display = "inline-block"; pointer.style.width = "20px"; pointer.style.height = "20px"; pointer.style.borderRadius = "10px"; pointer.style.margin = "5px"; pointer.style.marginLeft = "10px"; if (i == 0) { pointer.style.backgroundColor = "red"; } else { pointer.style.backgroundColor = "#fff"; } indicator.appendChild(pointer); } container.appendChild(indicator); //创建存放箭头的容器 var leftRightButtonContainer = document.createElement("div"); leftRightButtonContainer.style.width = clientWidth + "px"; leftRightButtonContainer.style.height = "50px"; leftRightButtonContainer.style.position = "absolute"; leftRightButtonContainer.style.top = "150px"; leftRightButtonContainer.style.fontSize = "30px"; leftRightButtonContainer.style.display = "none"; //创建左右两个箭头 var leftButton = document.createElement("div"); leftButton.style.width = "25px"; leftButton.style.height = "50px"; leftButton.style.backgroundColor = "rgba(43,43,43,0.8)"; leftButton.style.position = "absolute"; leftButton.style.fontSize = "30px"; leftButton.style.color = "#fff"; leftButton.innerHTML = "<"; var rightButton = document.createElement("div"); rightButton.style.width = "25px"; rightButton.style.height = "50px"; rightButton.style.position = "absolute"; rightButton.style.backgroundColor = "rgba(43,43,43,0.8)"; rightButton.style.right = "0px"; rightButton.style.fontSize = "30px"; rightButton.style.color = "#fff"; rightButton.innerHTML = ">"; // 为左右按钮添加移上去和移出事件，和点击事件 leftButton.addEventListener("mouseover", leftMouseover); rightButton.addEventListener("mouseover", rightMouseover); leftButton.addEventListener("click", leftClick); rightButton.addEventListener("click", rightClick); leftRightButtonContainer.appendChild(leftButton); leftRightButtonContainer.appendChild(rightButton); container.appendChild(leftRightButtonContainer);// 图片每隔4秒切换一张 interval = setInterval(function () { currentIndex = (currentIndex + 1) % (container.children.length - 2); changeImage(); }, 4000);}// 根据不同的滚动形式选择不同的滚动方法function changeImage() { var forward = container.children[lastIndex]; var back = container.children[currentIndex]; //调用选中小点的方法，切换一张图片对应的小点选中 changeIndicator(currentIndex); switch (types) { case "left": srollLeft(forward, back); break; case "right": srollRight(forward, back); break; case "top": srollTop(forward, back); break; case "bottom": srollBottom(forward, back); break; case "opacity": srollOpacity(forward, back); break; default: srollOpacity(forward, back); break; } lastIndex = currentIndex;}//鼠标移动到左边的箭头function leftMouseover(event) { var target = event.target; target.style.cursor = "pointer";}//鼠标移动到右边的箭头function rightMouseover(event) { var target = event.target; target.style.cursor = "pointer";}//点击左侧按钮function leftClick() { currentIndex = (currentIndex - 1) % (container.children.length - 2); if (currentIndex == -1) { currentIndex = container.children.length - 3; } changeImage();}//点击右侧按钮function rightClick() { currentIndex = (currentIndex + 1) % (container.children.length - 2); changeImage();}// 鼠标移上去小点上面function mouseoverPointer(event) { clearInterval(interval); var target = event.target; if (target.id != currentIndex) { currentIndex = target.id; changeImage(); }}// 鼠标移出小点function mouseoutPointer() { interval = setInterval(function () { currentIndex = (currentIndex + 1) % (container.children.length - 2); changeImage(); }, 4000);}//鼠标移上去大容器上面function containerMouseover() { container.lastElementChild.style.display = "block";}//鼠标移开大容器function containerMouseout() { container.lastElementChild.style.display = "none";}//渐变function srollOpacity(forward, back) { back.style.display = "block"; back.style.opacity = 0; forward.style.display = "block"; forward.style.opacity = 1; var op = 1; var intervalClear = setInterval(function () { op -= 0.05;//改变透明度 back.style.opacity = 1 - op; forward.style.opacity = op; if (op <= 0) { window.clearInterval(intervalClear); forward.style.display = "none"; } }, 10);}//向上滚动function srollTop(forward, back) { back.style.display = "block"; back.style.top = back.clientHeight + "px"; forward.style.display = "block"; forward.style.top = 0; forward.style.opacity = 1; back.style.opacity = 0; var i = back.clientHeight; var intervalClear = setInterval(function () { i -= 10; back.style.top = i + "px";//改变透明度 forward.style.opacity = i / back.clientHeight; back.style.opacity = 1 - i / back.clientHeight; forward.style.top = (i - back.clientHeight) / 2 + "px"; if (i <= 0) { window.clearInterval(intervalClear); forward.style.display = "none"; } }, 4);}//向下滚动function srollBottom(forward, back) { back.style.display = "block"; back.style.top = -back.clientHeight + "px"; forward.style.display = "block"; forward.style.top = 0; forward.style.opacity = 1; back.style.opacity = 0; var i = back.clientHeight; var intervalClear = setInterval(function () { i -= 10; back.style.top = -i + "px";//改变透明度 forward.style.opacity = i / back.clientHeight; back.style.opacity = 1 - i / back.clientHeight; forward.style.top = (back.clientHeight - i ) / 2 + "px"; if (i <= 0) { window.clearInterval(intervalClear); forward.style.display = "none"; } }, 4);}//向左滚动function srollLeft(forward, back) { back.style.display = "block"; back.style.left = back.clientWidth + "px"; forward.style.display = "block"; forward.style.left = 0; forward.style.opacity = 1; back.style.opacity = 0; var i = back.clientWidth; var intervalClear = setInterval(function () { i -= 10; back.style.left = i + "px";//改变透明度 forward.style.opacity = i / back.clientWidth; back.style.opacity = 1 - i / back.clientWidth; forward.style.left = (i - back.clientWidth) / 2 + "px"; if (i <= 0) { window.clearInterval(intervalClear); forward.style.display = "none"; } }, 4);}//向右滚动function srollRight(forward, back) { back.style.display = "block"; back.style.left = -back.clientWidth + "px"; forward.style.display = "block"; forward.style.left = 0; forward.style.opacity = 1; back.style.opacity = 0; var i = back.clientWidth; var intervalClear = setInterval(function () { i -= 10; back.style.left = -i + "px";//改变透明度 forward.style.opacity = i / back.clientWidth; back.style.opacity = 1 - i / back.clientWidth; forward.style.left = (back.clientWidth - i) / 2 + "px"; if (i <= 0) { window.clearInterval(intervalClear); forward.style.display = "none"; } }, 4);}//选中点function changeIndicator(index) { var children = indicator.children; for (var i = 0; i < children.length; i++) { if (i == index) { children[i].style.backgroundColor = "red"; } else { children[i].style.backgroundColor = "#fff"; } }}效果图：
阅读全文
0 0
- JavaScript DOM操作实现网站滚动图特效
- 使用javascript实现滚动特效
- javascript网页特效——DOM操作
- 用JavaScript实现上下文字滚动特效
- JavaScript实现垂直向上无缝滚动特效
- 图片滚动特效实现方法的分析(JavaScript)
- [DOM]javascript DOM操作
- javascript dom特效滑动门
- javascript特效，信息滚动效果
- javascript特效，信息滚动效果
- JavaScript特效：间隔滚动图片
- JavaScript特效：纵向不间断滚动
- JavaScript特效：横向不间断滚动
- JavaScript特效—滚动公告
- JavaScript特效的实现
- JavaScript时钟特效实现
- JavaScript特效实例014-页面自动滚动
- javascript中间凸显滚动圆圈特效demo
- 2017-9-19考试总结
- java数据库编程--事务处理
- 第三周-4 顺序表应用（1）
- 汉诺塔问题 Python实现
- 求职经历面试之宇都
- JavaScript DOM操作实现网站滚动图特效
- [python]NLTK简明教程
- 数据结构第二周项目-程序的多文件组织
- OpenCV
- javaEE基础
- STM32单片机学习笔记——SysTick系统定时器
- Python实现红黑树
- mybatis简单的增删改查————3
- 洛谷 P2341 [HAOI2006]受欢迎的牛
