JS实现简易图片轮播效果的方法
更新时间：2015年03月25日 11:51:07 作者：新凉
这篇文章主要介绍了JS实现简易图片轮播效果的方法,实例分析了javascript操作图片实现轮播特效的技巧,需要的朋友可以参考下
本文实例讲述了JS实现简易图片轮播效果的方法。分享给大家供大家参考。具体如下：
这里使用JS制作简易图片轮播效果：
制作比较粗糙，使用的图片是width：660ppx,height：550px;
效果图如下：
代码部分如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS幻灯代码</title>
<script type="text/javascript">
window.onload = function () {
flag = 0;
obj1 = document.getElementById("slider");
obj2 = document.getElementsByTagName("li");
obj2[0].style.backgroundColor = "#666666";
//默认被选中颜色
time = setInterval("turn();", 5000);
obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 6000);
}
for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 6000);
}
}
//延迟加载图片，演示的时候，使用本地图片
//上线后请改为二级域名提供的图片地址
document.getElementById("second").src = "images/2.png";
//使用图片宽660，高550
document.getElementById("third").src = "images/3.png";
document.getElementById("four").src = "images/4.png";
}
function turn(value) {
if (value != null) {
flag = value - 2;
}
if (flag < obj2.length - 1)
flag++;
else
flag = 0;
obj1.style.top = flag * (-550) + "px";
for (var j = 0; j < obj2.length; j++) {
obj2[j].style.backgroundColor = "#ffffff";
}
obj2[flag].style.backgroundColor = "#666666";
}
</script>
<style type="text/css">
#wrap
{
height: 550px;
width: 660px;
overflow: hidden;
position: relative;
overflow: hidden;
}
#wrap ul
{
list-style: none;
position: absolute;
top: 500px;
left: 450px;
}
#wrap li
{
margin-left:2px;
opacity: .3;
filter: alpha(opacity=30);
text-align: center;
line-height: 30px;
font-size: 20px;
height: 30px;
width: 30px;
background-color: #fff;
float: left;
border-radius:3px;
cursor:pointer;
}
#slider
{
position: absolute;
top: 0px;
left: 0px;
}
#slider img
{
float: left;
border: none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="slider">
<a target="_blank" href="#"><img src="images/1.png" /></a>
<a target="_blank" href="#"><img id="second" /></a>
<a target="_blank" href="#"><img id="third" /></a>
<a target="_blank" href="#"><img id="four" /></a>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要介绍了javascript实现了照片拖拽点击置顶的照片墙代码，效果非常不错，这里推荐给大家，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要为大家详细介绍了微信小程序使用swiper组件实现层叠轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要给大家介绍了关于echarts中tooltip添加点击事件的相关资料,echarts tooltip点击事件是指当用户点击图表中的提示框(tooltip)时触发的事件,需要的朋友可以参考下2023-07-07
微信小程序图片轮播组件gallery slider使用方法详解
这篇文章主要为大家详细介绍了微信小程序图片轮播组件gallery slider的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
今天小编就为大家分享一篇layui字体图标 loading图标静止不旋转的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
下面小编就为大家带来一篇JS常用字符串方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要为大家详细介绍了JavaScript中函数的四种调用方式,文中的示例代码讲解详细,对我们深入掌握JavaScript有一定的帮助,需要的可以参考下2023-10-10
在ES6之前我们都使用单引号或者双引号来包裹字符串,当我们想要在字符串中加入变量时,不能直接写在字符串里,而是需要通过字符串拼接的方式来往字符串中加入变量,这篇文章主要给大家介绍了关于JavaScript模板字符串用法的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了Ionic3 UI组件之autocomplete的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了JavaScript使表单中的内容显示在屏幕上的方法,涉及javascript针对表单元素操作的相关技巧,需要的朋友可以参考下2015-06-06
最新评论