1.JavaScript中的轮播图
一：点击方式：
步骤：
1）获取所有img对象；
2）遍历这些对象的同时设置自定义属性index，以及给每个对象添加点击事件；
3）在点击事件方法中，通过当前对象求出index，把index当作imgs[ ] 的下标，求出src；
4）设置背景；
<body>
<ul class="baidu">
<li><img src="10.jpg" alt="" /></li>
<li><img src="11.jpg" alt="" /></li>
<li><img src="12.jpg" alt="" /></li>
<li><img src="13.jpg" alt="" /></li>
</ul>
<script type="text/javascript">
//获取所有img对象
var lis = document.getElementsByTagName("img");
//遍历对象们，分别设置点击事件
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
console.log(this.src);
//console.log(i)
//单机哪张图片就换哪张做背景
document.body.style.background="url("+this.src+")"
}
}
</script>
</body>
二：自动轮播方式：
步骤：
1）获取所有img对象；
2）设置自增变量index=0；
3）遍历这些img对象，分别设置自定义属性；
4）设置定时器，每隔1秒回调一次方法，同时令index自增；如果index=图片的数量，则令index为0，否则根据index设置背景（imgs[index].src）;
//设置自动轮播
<script>
/*
* 一：通过"."的方式设置自定义属性
*/
//获取所有图片对象，并设置自定义属性index
var imgs = document.querySelectorAll("img");
var index = 0;
for(var i=0;i<imgs.length;i++){
imgs[i].index = i;
}
//定义定时器
var timer = setInterval(function(){
if(index==imgs.length)
index = 0;
//轮播到哪张图是根据自增变量index来确定
document.body.style.background = "url("+imgs[index].src+")"
index++;
},1000);
</script>
三：悬停方式：
步骤：
1）获取所有图片的对象；
2）遍历循环img对象，设置自定义属性index，以及添加悬停事件；
3）在每个img对象的悬停事件中，根据当前对象求出src，并设置为背景；
<body>
<!--1.要求，鼠标移动到哪张图片，该图片就设为背景-->
<ul class="baidu">
<li><img src="10.jpg" alt="" /></li>
<li><img src="11.jpg" alt="" /></li>
<li><img src="12.jpg" alt="" /></li>
<li><img src="13.jpg" alt="" /></li>
</ul>
<script type="text/javascript">
//获取所有图片对象，并添加自定义属性index
var imgs = document.querySelectorAll("img");//返回一个数组
//给每个img对象添加index
for(var i=0;i<imgs.length;i++){
//1：通过”.”方式设置自定义属性
//imgs[i].index = i;
//2: 通过setAttribute方法获取
imgs[i].setAttribute("index",i);
//给img设置悬停事件
imgs[i].onmouseover = function(){
//将该图片设置为背景
//document.body.style.background="url("+this.src+")"; 通过“.”获取
//通过getAttribute()获取
document.body.style.background="url("+imgs[this.getAttribute("index")].src+")";
}
}
</script>
</body>
四：悬停加轮播方式：
<body>
<ul class="baidu">
<li><img src="10.jpg" alt="" /></li>
<li><img src="11.jpg" alt="" /></li>
<li><img src="12.jpg" alt="" /></li>
<li><img src="13.jpg" alt="" /></li>
</ul>
<script>
//设置鼠标悬停换肤
var index = 0;
var j = 0;
var imgs = document.getElementsByTagName("img"); //返回一个数组
for(var i = 0; i < imgs.length; i++) {
//给每个img添加index属性
// . 设置自定义属性
imgs[i].index = i;
//set方法设置
imgs[i].setAttribute("index",i);
//给每个img添加鼠标悬停事件
imgs[i].onmouseover = function() {
clearInterval(timer); //
document.body.style.background = "url(" + imgs[this.getAttribute("index")].src + ")"
j = this.index;
}
imgs[i].onmouseout = function() {
index = j + 1;
timer = setInterval(function() {
if(index == imgs.length) {
index = 0;
} else {
document.body.style.backgroundImage = 'url(' + imgs[index].src + ')';
index++;
}
}, 1000);
}
}
//设置自动轮播
var timer = setInterval(function() {
if(index == imgs.length) {
index = 0;
} else {
document.body.style.backgroundImage = 'url(' + imgs[index].src + ')';
index++;
}
}, 1000);
</script>
</body>
版权声明：本文为baidu_41850098原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。