js点击轮播或者自动轮播图代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gbk">
<title>js点击轮播或者自动轮播</title>
<style>
#d{position: relative;top: -30px;}
label{margin: -5px;}
.one{width: 10px;height: 10px;border: 1px solid black; background-color: red;}
</style>

function init(){
//1.默认进来自动播放轮播图
switchImgs();

//2. 当鼠标移入移出不同的label切换不同的图片.
var img = document.getElementById("img");
var labels =document.getElementsByTagName("label");//拿到所有的label标签对象

for(var i=0;i<labels.length;i++){//给每个label标签注册一个hover事件
labels[i].οnmοuseοver=function(){
clearTimeout(t);//停止动画
var b= this.innerText*1;//拿到标签上的数字
img.src="data:images/photo_0"+b+".jpg";//显示对应的图片
clearStyle();//清除label上的样式
this.className="one";//让当前的label的样式变化
}

labels[i].οnmοuseοut=function(){//鼠标移出动画开始,动画从当前的图片开始动画
n=this.innerText*1;//获取当前label上的数字并转换成整型
switchImgs();
}
}

}

//默认动画,图片轮播,每个1秒切换
function switchImgs(){
n++;
if(n==7){n=1;}//到达末尾的时候跳转到第一张
var img = document.getElementById("img");
img.src="data:images/photo_0"+n+".jpg";
clearStyle();//当图片到第二张的时候,要把label1的样式清除,
document.getElementById("i"+n).className="one";
t=setTimeout("switchImgs()",1000);
}

//清除label的所有的样式
function clearStyle(){
var labels= document.getElementsByTagName("label");
for(var i=0;i<labels.length;i++){
labels[i].className="";//让label表的classname置为空
}
}

</script>
</head>
<body οnlοad="init()">
<div align="center">
<img src="data:images/photo_01.jpg" width="400" height="500" id="img">
<div id="d">
<label id="i1"> 1 </label>
<label id="i2"> 2 </label>
<label id="i3"> 3 </label>
<label id="i4"> 4 </label>
<label id="i5"> 5 </label>
<label id="i6"> 6 </label>
</div>
</div>
</body>

</html>

//自动轮播图代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gbk">
<title>自动轮播图</title>
<style>
#div1{
width: 192px;
height: 120px;
border: 1px solid gray;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#div1 img{
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
<img src="meinv.jpng" alt="" width="192"/>
<img src="44.jpg" alt="" width="192"/>
<img src="video.png" alt="" width="192"/>
<img src="data:images/4.jpg" alt="" width="192"/>
</div>
<div id="div2">

</div>
<script>
//获取页面元素
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var imgs = div1.getElementsByTagName('img');
//初始化页面图片的位置
window.οnlοad=function(){
for(var i=0; i<imgs.length; i++){
imgs[i].style.left = i*192 +'px'
}
};
//轮播移动的函数
function imgMove(){
var b1 = false;
for(var i = 0; i < imgs.length; i++) {
imgs[i].style.left = imgs[i].offsetLeft-1 + 'px';
if(imgs[i].offsetLeft==0){
b1=true;
if(i==0)
imgs[imgs.length-1].style='576px';
else
imgs[i-1].style.left='576px'
}
}
if(!b1)
setTimeout(imgMove,20);
else
setTimeout(imgMove,2000);
}
setTimeout(imgMove,3000);
</script>
</body>
</html>

js点击轮播或者自动轮播图代码相关推荐

Html+CSS+JS轮播图：手动轮播，自动轮播
演示效果轮播图代码: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
html列表自动轮播,jquery: 自动轮播（hover）
html: css: /* 首页自动轮播 */ .home-show { position: relative; width: 100%; height: 330px; background-colo ...
js轮播图(手动轮播＋自动轮播)
效果图一.先获取一下需要用到的元素 var leftbtn=document.querySelector('.leftbtn'); //左按钮var rightbtn=document.queryS ...
swiper横向轮播——阶梯式滚动轮播
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏 ...
js轮播图（自动轮播箭头轮播序号轮播）
图片路径用自己的就好 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
定时器轮播图---（功能：自动轮播，左右箭头点击切换，点击圆点跳转图片）
定时器轮播图几个部分: 封装重复函数左右箭头点击切换效果自动轮播-定时器控制(模拟左箭头点击效果以显示出自动轮播的效果).鼠标移入停止,移出继续效果点击圆点跳转相应页面(解决了点击后不继续轮播 ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
5讲项目实战js第二区域轮播器及选项卡
#5讲项目实战js第二区域轮播器及选项卡 <!--整站建设步骤如下: 1.构建一个宽度100% 高度149px 这样一个长方形,为了保证浏览器的兼容,我们加了*{margin:0px;pa ...
java图片轮播_java制作广告图片自动轮播控件
首页图片的轮播 /** * 广告图片自动轮播控件 * */ public class ImageCycleView extends LinearLayout { /** * 上下文 */ privat ...

js点击轮播或者自动轮播图代码

js点击轮播或者自动轮播图代码相关推荐

最新文章

热门文章