js图片自动轮播代码分享(js图片轮播)
1、利用图片width显示位置来播放图片，技术：.offsetWidth 、aBtn[i].index = i 、setInterval() 、oUl[0].style.left = 、onclick()
2、利用数组放入图片经行轮播，技术：setInterval()。没有onclick()
图片轮播12js.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>images slide</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
img {
border: 0;
}
a {
text-decoration: none;
}
#slide {
width: 800px;
height: 400px;
box-shadow: 0px 0px 5px #c1c1c1;
margin: 20px auto;
position: relative;
overflow: hidden;
}
#slide ul {
position: absolute;
left: 0px;
top: 0px;
height: 400px;
width: 11930px;
}
#slide ul li {
width: 800px;
height: 400px;
overflow: hidden;
float: left;
}
#slide .ico {
width: 800px;
height: 20px;
overflow: hidden;
text-align: center;
position: absolute;
left: 0px;
bottom: 10px;
z-index: 1;
}
#slide .ico a {
display: inline-block;
width: 10px;
height:10px;
background: url(out.png) no-repeat 0px 0px;
margin: 0px 5px;
}
#slide .ico .active {
background: url(out1.png) no-repeat 0px 0px;
}
#btnLeft {
width: 60px;
height: 400px;
left: 0px;
top: 0px;
background: url() no-repeat 0px 0px;
position: absolute;
z-index: 2;
}
#btnLeft :hover {
background: url() no-repeat 0px 0px;
}
#btnRight {
width: 60px;
height: 400px;
right: 0px;
top: 0px;
background: url() no-repeat 0px 0px;
position: absolute;
z-index: 2;
}
#btnRight :hover {
background: url() no-repeat 0px 0px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oIco = document.getElementById("ico");
var aBtn = oIco.getElementsByTagName("a");
var oSlide = document.getElementById("slide");
var oUl = oSlide.getElementsByTagName("ul");
var aLi = oUl[0].getElementsByTagName("li");
var oBtnLeft = document.getElementById("btnLeft");
var oBtnRight = document.getElementById("btnRight");
var baseWidth = aLi[0].offsetWidth;
//alert(baseWidth);
oUl[0].style.width = baseWidth * aLi.length + "px";
var iNow = 0;
for(var i=0;i<aBtn.length;i++) {
aBtn[i].index = i;
aBtn[i].onclick = function() {
//alert(this.index);
//alert(oUl[0].style.left);
move(this.index);
//aIco[this.index].className = "active";
}
}
oBtnLeft.onclick = function() {
iNow ++;
//document.title = iNow;
move(iNow);
}
oBtnRight.onclick = function() {
iNow --;
document.title = iNow;
move(iNow);
}
var curIndex = 0;
var timeInterval = 1000;
setInterval(change,timeInterval);
function change() {
if(curIndex == aBtn.length) {
curIndex =0;
} else {
move(curIndex);
curIndex += 1;
}
}
function move(index) {
//document.title = index;
if(index>aLi.length-1) {
index = 0;
iNow = index;
}
if(index<0) {
index = aLi.length - 1;
iNow = index;
}
for(var n=0;n<aBtn.length;n++) {
aBtn[n].className = "";
}
aBtn[index].className = "active";
oUl[0].style.left = -index * baseWidth + "px";
//buffer(oUl[0],{
// left: -index * baseWidth
// },8)
}
}
</script>
</head>
<body>
<div id="slide">
<a id="btnLeft" href="javascript:void(0);" ></a>
<a id="btnRight" href="javascript:void(0);" ></a>
<!--when change next image:style="left: -(n-1)*800px;"-->
<ul>
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
<li><img src="5.jpg" alt="" /></li>
<li><img src="6.jpg" alt="" /></li>
</ul>
<div id="ico" class="ico">
<a class="active" href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
</div>
</div>
</body>
</html>
图片自动播放.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>images</title>
<script type="text/javascript">
var curIndex = 0;
var timeInterval = 1000;
var arr = new Array();
arr[0] = "1.jpg";
arr[1] = "2.jpg";
arr[2] = "3.jpg";
arr[3] = "4.jpg";
arr[4] = "5.jpg";
arr[5] = "6.jpg";
arr[6] = "7.jpg";
setInterval(changeImg,timeInterval);
function changeImg() {
var obj = document.getElementById("obj");
if (curIndex == arr.length-1) {
curIndex = 0;
} else {
curIndex += 1;
}
obj.src = arr[curIndex];
}
</script>
<!-- <script language="javascript">
setInterval(test,1000);
var array = new Array();
var index = 0;
var array = new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg");
function test() {
var myimg=document.getElementById("imgs");
if(index==array.length-1)
{ index=0; }else{ index++; }
myimg.src=array[index];
}
</script> -->
</head>
<body>
<img id = "obj" src = "1.jpg" border = 0 />
</body>
</html>
相关文章
B/S开发中常用javaScript技术与代码...2007-03-03
这篇文章主要介绍了JavaScript 限制文本框不可输入英文单双引号的方法的相关资料,需要的朋友可以参考下2016-12-12
JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧，这篇文章主要介绍了JS中Json数据的处理和解析JSON数据的方法详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要为大家介绍了Javascript实现动态时钟效果，非常详细的注释代码，文具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
本文主要介绍了json数据处理及数据绑定的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
很多人在使用AJAX调用别人站点内容的时候,JS会提示"没有权限"错误，这是XMLHTTP组件的限制-安全起见2008-08-08
很多情况下我们需要去掉重复的内容，一般我们都是将很多内容放到一个数组里面，然后再去重复，这里简单为大家整理一下2016-12-12
有关script注入想必大家也有所了解，在本文将为大家介绍下如何屏蔽script注入，下面有个不错的示例大家可以感受下2013-11-11
对于经常用js的朋友，有时候一段脚本并不是两个浏览器都兼容的，下面一些对ie和firefox都兼容的一些代码，大家可以学习下。2008-10-10
这篇文章主要介绍了在 javascript 中快速获取数组指定位置的元素,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
最新评论