html部分源码

设置4个图片div

<body><div class="nivoSlider" style="height: 200px;width: 780px; οnmοuseοver="stop()" οnmοuseοut="start()"><div class="slide"><img src="./static/xinjiang/banner.jpg" s></div><div class="slide"><img src="./static/xinjiang/carousel1.jpeg" s></div><div class="slide"><img src="./static/xinjiang/carousel2.jpeg" s></div><div class="slide"><img src="./static/xinjiang/carousel3.jpeg" s></div></div>
</body>

css部分源码

记得将高度和宽度调好

.nivoSlider {   /*轮换图片的大小*/position: relative;width: 780px;height: 200px;overflow: hidden;margin: 0 auto;
}.nivoSlider .slide{width: 780px;height: 200px;position: absolute;
}

javascript部分源码

<!-- 为整个页面添加onload加载完成事件，当浏览器打开并加载完并自动执行事件中的代码块 -->
<!-- 当页面加载完全，四个div（图片）应该并列在一起。 -->
<script type="text/javascript">onload = function () {var arr = document.getElementsByClassName("slide");for (var i = 0; i < arr.length; i++) {arr[i].style.left = i * 780 + "px";}}function LeftMove() {var arr = document.getElementsByClassName("slide");//获取三个子divconsole.log('进来了');for (var i = 0; i < arr.length; i++) {var left = parseFloat(arr[i].style.left);left -= 2;     //让图片左移2个pxconsole.log("left减后：%s", left);var width = 780;//图片的宽度if (left <= -width) {left = (arr.length - 1) * width;//当图片完全走出显示框，拼接到末尾，因为拼接起来总长度就是(arr.length) * width 但还有一张在显示，所以就减一clearInterval(moveId); //然后停止循环}arr[i].style.left = left + "px";}}moveId = setInterval(LeftMove, 10);//设置一个10毫秒定时器，并给自己取名, 此时已经能移动function divInterval() {moveId = setInterval(LeftMove, 10);//设置一个10毫秒定时器}timeId = setInterval(divInterval, 5000);//设置一个5秒的定时器。也就是5秒重启一次图片的轮换.要算好之前滑动消耗的时间.function stop() {clearInterval(timeId);//鼠标停留关闭B定时器clearInterval(moveId);}function start() {moveId = setInterval(LeftMove, 10);//设置一个10毫秒定时器clearInterval(timeId);//重新打开一个定时前，先关闭之前定时器。timeId = setInterval(divInterval, 5000);//重启一个定时器}// 当浏览器窗口切出或页面切换到其他页面一段时间再回来时，// 轮播效果会有短暂加速（随切出时间加长而加长）。// 主要是因为虽然窗口切出去了，定时器依然在执行，但页面却没有将效果显示，// 所以切回来后会将之前的效果显示出来而加速轮播图。所以添加页面焦点事件：//页面失去焦点定时器停止onblur = function () {stop();}//页面获取焦点时重启定时器onfocus = function () {start();}</script></script>

给html页面图片制造滚动效果（详细注释）相关推荐

页面实现文字滚动效果(跑马灯)
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用ma ...
html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
1.概述循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点主要应用setTimeout()方法实现图片的循环滚动效果.se ...
html图片倾斜滚动效果
下载地址一下html图片倾斜滚动效果,滚动页面,图片倾斜滚动切换的动画特效,精简易用,适用于任意类型的网站,firefox浏览器不能显示. dd:
3.8 JS 制作无间断图片循环滚动效果
制作无间断图片循环滚动效果要求图片高度,高度自行设定,要求显示n张图片(n=你的学号末位+6),例如:你的学号末位是3,那么你需要显示3+6共9张图片,9张图片循环滚动 index.html < ...
水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果 ...
html无缝滚动原理,JavaScript实现图片无缝滚动效果
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
无需编程，我教你打造H5页面图片轮播效果
图片轮播是手机App和手机网页上常见的功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.现在,H5页面和App上也可以加入图片轮播功能了,希望这个图片轮播效果能够给你 ...
html5 图片横向滑动效果,JS实现图片横向滚动效果示例代码
图片横向滚动代码 .box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; } .b ...
java图片滚动特效_js图片各种滚动效果
向上下左右不间断无缝滚动图片的效果(兼容火狐和IE) var speeds=30; var colee2s=document.getElementById("colee2s"); ...

给html页面图片制造滚动效果（详细注释）

给html页面图片制造滚动效果

html部分源码

css部分源码

javascript部分源码

给html页面图片制造滚动效果（详细注释）相关推荐

最新文章

热门文章