HTML+JS+CSS实现幻灯片效果（附代码）

示例一

效果展示：（每一个屏幕都是一个div，屏幕里想放的内容，放到对应div里即可，各个屏幕互相不受影响）

对应的html代码：

<!doctype html>
<html><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div class="big-box" id="bigBox"><div class="item item1"><h1>屏幕1</h1></div><div class="item item2"><h1>屏幕2</h1></div><div class="item item3"><h1>屏幕3</h1></div><div class="item item4"><h1>屏幕4</h1></div><div class="item item5"><h1>屏幕5</h1></div></div><ul class="controls"><li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script src="behavior.js"></script></body>
</html>

对应的js代码：

 思路：第一步：当页面加载完后，获取所要操作的节对象第二步：为document添加一个滚轮滚动事件第三步：滚轮滚动切换获取当前浏览器可视区域的高度var viewHeight = document.body.clientHeight滚轮切换的目的：就是更改bigBox的top值top:最大0top:最小 viewHeight*-4从上到下或从下到上：最多走4次(5个页面) 每一次走viewHeight控制的关键点：索引 定一个索引 2滚轮↓索引+1滚轮↑索引-1bigBox.style.top = -索引*viewHeihgt
*/
var bigBox = document.getElementById("bigBox");//获取bigBox节点对象
var lis = document.querySelectorAll(".controls li");//获取所有的li节点对象
var viewHeight = document.body.clientHeight;//获取当前页面高度
var flag = true;//设置开关
var index = 0;//设置索引
//封装事件,兼容浏览器
function on(obj,eventType,fn){if(obj.addEventListener){obj.addEventListener(eventType, fn);}else{obj.attachEvent("on" + eventType, fn);}
}
//鼠标滚动事件处理函数
function handler(e){var _e = window.event || e;if(flag){flag = false;if(_e.wheelDelta==120 || _e.detail==-3){//如果鼠标滚轮向上滚动，detail为火狐判断条件index--;if(index<0){index = 0;}}else{//向下滚动index++;if(index>lis.length-1){//如果索引大于页面数，就是滚到最后一张页面时，再滚动鼠标页面不再滚动index = lis.length-1;}}bigBox.style.top = -index*viewHeight + "px";//bigBox整体上移index个页面for(var i=0; i<lis.length; i++){lis[i].className = "";//重置全部li的类}lis[index].className = "active";//设置当前li的类名setTimeout(function(){//页面滚动间隔一秒，防止滚动太快flag = true;//重新开启开关},1000);}
}
on(document,"mousewheel",handler);//滚轮滚动事件
on(document,"DOMMouseScroll",handler);//滚轮滚动事件，适配火狐浏览器
//数字标签点击处理
for(var i=0; i<lis.length; i++){lis[i].tag = i;lis[i].onclick = function(){for(var j=0; j<lis.length; j++){lis[j].className = "";}lis[this.tag].className = "active";bigBox.style.top = -this.tag*viewHeight + "px";}
}

对应的css代码：

*{margin:0; padding:0;}
html,body{width:100%;height:100%;overflow:hidden;
}
.big-box {width:100%;height:500%;text-align:center;position:absolute;
}
.big-box .item{height:20%;
}
.big-box .item1 {background-color:red;
}
.big-box .item2 {background-color:blue;
}
.big-box .item3 {background-color:purple;
}
.big-box .item4 {background-color:gold;
}
.big-box .item5 {background-color:pink;
}
.controls {list-style:none;position:absolute;top:20%;right:20px;
}
.controls li {width:50px;height:50px;font:bold 22px/50px "宋体";text-align:center;background-color:#000;color:#fff;cursor:pointer;
}
.controls li+li {margin-top:5px;
}
.controls li.active {background-color:#fff;color:red;
}

示例二

效果展示：（每一个屏幕都是一个div，屏幕里想放的内容，放到对应div里即可，各个屏幕互相不受影响）

对应的html代码：

<p>点击各个选项切换内容:</p><div id="London" class="tabcontent"><h3>London</h3><p>London is the capital city of England.</p>
</div><div id="Paris" class="tabcontent"><h3>Paris</h3><p>Paris is the capital of France.</p>
</div><div id="Tokyo" class="tabcontent"><h3>Tokyo</h3><p>Tokyo is the capital of Japan.</p>
</div><div id="Oslo" class="tabcontent"><h3>Oslo</h3><p>Oslo is the capital of Norway.</p>
</div><button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>

对应的js代码：

function openCity(cityName,elmnt,color) {var i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tabcontent");for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";}tablinks = document.getElementsByClassName("tablink");for (i = 0; i < tablinks.length; i++) {tablinks[i].style.backgroundColor = "";}document.getElementById(cityName).style.display = "block";elmnt.style.backgroundColor = color;}
// 触发 id="defaultOpen" click 事件
document.getElementById("defaultOpen").click();

对应的css代码：

body {font-family: "Lato", sans-serif;}.tablink {background-color: #555;color: white;float: left;border: none;outline: none;cursor: pointer;padding: 14px 16px;font-size: 17px;width: 25%;
}.tablink:hover {background-color: #777;
}/* Style the tab content */
.tabcontent {color: white;display: none;padding: 50px;text-align: center;
}#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}

HTML+JS+CSS实现幻灯片效果（附代码）相关推荐

很不错的JS+CSS滑动门_网页代码站(www.webdm.cn)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JS+CSS防FLASH效果竖向可折叠的滑动菜单
代码简介:很不错的效果,类似动画慢慢的折叠. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
JS实现图片幻灯片效果
代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> &l ...
js导航css,js+css实现导航效果实例
本文实例讲述了js+css实现导航效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 程序代码如下: CSS+JS实现兼容性很好的无限级下拉菜单 *{ margin:0; padding:0; ...
Js+CSS淡入式效果图片幻灯切换效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JS+CSS竖向折叠滑动菜单代码
代码简介: 折叠菜单,竖向展开,点击时缓慢展开,展开后可以作为菜单的栏目介绍等,还算不错. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
js图片轮播效果实现代码
这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下首先给大家看一看js图片轮播效果,如下图 ...
html图片自动切换的幻灯片效果的,jQuery实现可自动切换的幻灯片效果插件代码...
jQuery实现可自动切换的幻灯片效果插件代码 1. 用户快速划过按钮时不触发鼠标事件; 2. 鼠标划入当前图片按钮时不闪烁; 3. 简化并优化代码. 使用方法就不详述了, 请参见源码及相关注释 $. ...
CSS实现幻灯片效果
使用css代码实现一个简单又粗糙的幻灯片效果话不多说,直接上我粗糙的代码了! 1.通过position定位+animation动画实现 <!DOCTYPE html> <html ...
php实现打字效果,JS实现的打字机效果示例代码
这篇文章主要介绍了JS实现的打字机效果,结合完整实例形式分析了javascript定时触发自定义函数模拟打字输出效果的相关实现技巧,需要的朋友可以参考下本文实例讲述了JS实现的打字机效果.分享给大家 ...

HTML+JS+CSS实现幻灯片效果（附代码）

示例一

示例二

HTML+JS+CSS实现幻灯片效果（附代码）相关推荐

最新文章

热门文章