本文目录
- html里面如果想要把全屏幻灯片展示图片效果只显示一部分怎么改代码
- 零基础的人怎么用 HTML5 制作幻灯片
- 网上提供的html幻灯片代码如何使用
- HTML中，滚动代码是什么怎么设置
- 新手自学：怎样在html中引入幻灯片网页特效
html里面如果想要把全屏幻灯片展示图片效果只显示一部分怎么改代码
一般幻灯片尺寸上会有三个属性，找到这三个属性，改成你对应的即可。
幻灯片展示区域宽高
幻灯片图片宽高（一般与展示区域相同宽高）
幻灯片轮播效果宽高（比如轮播需要移动多少像素，一般是跟展示区域相同）
如果楼主能提供代码，我想我会直接的帮助到你。
零基础的人怎么用 HTML5 制作幻灯片
html5可以使用代码实现的简单幻灯片，并且能用鼠标滚轮滚动进行换页。
具体代码如下：
《!doctype html》
《html》
《head》
《title》《/title》
《style》
#slides{
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
overflow:hidden;
}
.slide{
position:absolute;
height:600px;
width:800px;
opacity:0.7;
background-color:rgba(0, 128, 196, 0.5) !important;
background-color:#ccc;
border-radius:10px;
left:50%;
top:50%;
margin-top:-300px;
box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
transition:all 0.25s ease-in-out 0s;
}
.current{
opacity:1;
margin-left:-400px;
}
.future{
margin-left:450px;
transform: skew(-3deg) scale(0.8);
-webkit-transform: skew(-3deg) scale(0.8);
}
.post{
margin-left:-1250px;
transform: skew(3deg) scale(0.8);
-webkit-transform: skew(3deg) scale(0.8);
}
.far-future{
margin-left:1200px;
transition:none;
}
《/style》
《/head》
《body》
《div id=“slides“》
《div class=“slide current“》1《/div》
《div class=“slide future“》2《/div》
《div class=“slide far-future“》3《/div》
《div class=“slide far-future“》4《/div》
《div class=“slide far-future“》5《/div》
《div class=“slide far-future“》6《/div》
《div class=“slide far-future“》7《/div》
《/div》
《script》 !function(){ var slides = document.getElementById(“slides“).childNodes;
var l = slides.length; function fslide(e){ var event = e || window.event;
//console.log(event.wheelDelta +“ “+ event.detail); for(var i=0;i《l;i++)
{ if(slides[i].className==“slide current“)
{ var current_slide = slides[i]; break;
}
}
//var current_slide = document.getElementsByClassName(“current“);
// getElementsByClassName只有火狐，谷歌等浏览器的较新版本支持
if
((event.wheelDelta 《 0 /*ie,谷歌等浏览器*/ || event.detail 》 0 /*firefox*/) && nextel(current_slide)){
if(prevel(current_slide)){ prevel(current_slide).className=“slide far-future“; }
current_slide.className=“slide post“; nextel(current_slide).className=“slide current“;
if(nextel(nextel(current_slide)))
{
nextel(nextel(current_slide)).className=“slide future“; }
}
else if((event.wheelDelta 》 0 || event.detail 《 0) && prevel(current_slide)){
if(nextel(current_slide)){ nextel(current_slide).className=“slide far-future“; }
current_slide.className=“slide future“; prevel(current_slide).className=“slide current“;
if(prevel(prevel(current_slide))){ prevel(prevel(current_slide)).className=“slide post“
}
}
}
document.onmousewheel = fslide;
// ie,谷歌等浏览器 if(document.addEventListener)
{ document.addEventListener(“DOMMouseScroll“,fslide,false);
// firefox } }(); function prevel(el){ if(el.previousSibling == null)
return null; return el.previousSibling.nodeType == 1 ? el.previousSibling : prevel(el.previousSibling);
}
function nextel(el){ if(el.nextSibling == null)
return null; return el.nextSibling.nodeType == 1 ? el.nextSibling : nextel(el.nextSibling);
} 《/script》
《/body》
《/html》
-html幻灯片效果代码
网上提供的html幻灯片代码如何使用
开发者必用：F12或者安装bug查件！
去懒人图库等一些站长用的工具里找到幻灯片的图片，
使用方法：
使用方法：
1、在head区域引入样式表文件lrtk.css，js/pe.kenburns/themes/default/skin.min.css
2、在head区域引入jquery-1.5.2.min.js和js/pe.kenburns/jquery.pixelentity.kenburnsslider.min.js
3、初始化
《script》
jQuery(function($){
$(“.peKenBurns“).peKenburnsSlider({externalFont:true})
})
《/script》
4、在你的网页中加入《!-- 代码 开始 --》《!-- 代码 结束 --》注释区域代码即可
HTML中，滚动代码是什么怎么设置
《marquee scrollAmount=2 width=300》滚动字幕《/marquee》
各参数详解：
��a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。
��b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。
��c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。
��d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
��e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)
-html幻灯片效果代码
新手自学：怎样在html中引入幻灯片网页特效
这种开放性的网上都有免费代码。这是我随便找的一种幻灯片代码。你自己打开后修改一下就好了。
百度：幻灯片代码。能找到一大堆。。
