js图片轮播和点击切换 js点击图片切换图片

编程之家2026-06-26831次浏览

大家好，今天给各位分享js图片轮播和点击切换的一些知识，其中也会对js点击图片切换图片进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

求JS 大神,教教我图片轮播、、好心求解

要实现图片滚动轮播，可以有很多方式，无非是通过调整外围容器的位置（left/top）或者内部图片容器的定位（marin-left/margin-top）来实现的。这里我以前者为例（向左滚动）：

通常的实现方式是：

1)有一个外层容器，同时作为“视口”，这个viewPort有固定的尺寸，超出的部分隐藏，定位方式为“relative”；

2)包含图片的容器（此处称为“画轴”），尺寸很大，可以容纳下要滚动图片的阵列，定位方式为“absolute”；

3)滚动即是调整此画轴的偏移量，此处示例为left；

4)如果图片要看上去是连续滚动（到最后一幅时接着出现第一幅）的，那么可以重复第一幅图像到阵列的最末，然后当画轴滚动到此时，重置偏移量到第一幅。

有了上述DOM结构后，就可以通过JS来控制画轴的偏移量了，如果使用动画，可以参考一些成熟的动画库，示例只提供最基本的线性动画（即匀速移动）。

HTML：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</div>

</body>

</html>CSS：

.viewPort{

width: 168px;

height: 168px;

position: relative;

overflow: hidden;

border: solid 1px#666;

}

.viewPort.scroll{

width: 10000px;

height: 168px;

position: absolute;

left: 0;

list-style: none;

margin: 0;

padding: 0;

}

.viewPort.scroll li{

width: 168px;

height: 168px;

float: left;

}JS：

var scroll= document.getElementById('scroll');//画轴

var scrollLeft= 0;//记录画轴CSS left属性的值

var index= 0;//当前显示的画的序号

//滚动一幅画面，调整画轴scroll的left属性值。

function scrollByOne(){

var timer= setInterval(function(){

if(scrollLeft<=-168* index){

clearInterval(timer);

scrollLeft=-168* index;

//当滚动到最后一幅画面（与第一幅相同）时，重置。

if(index== 5){

scrollLeft= 0;

scroll.style.left='0';

index= 0;

}

} else{

scrollLeft-= 2;

scroll.style.left= scrollLeft+'px';

}

}, 10);

}

//滚动，每隔3秒钟滚动一幅。

setInterval(function(){

++index;

scrollByOne();

}, 3000);代码：

js原生代码实现轮播图

<!DOCTYPE html>

<head>

<title>最简单的轮播广告</title>

<style>

body, div, ul, li{

margin: 0;

padding: 0;

}

ul{

list-style-type: none;

}

body{

background:#000;

text-align: center;

font: 12px/20px Arial;

}

#box{

position: relative;

width: 492px;

height: 172px;

background:#fff;

border-radius: 5px;

border: 8px solid#fff;

margin: 10px auto;

}

#box.list{

position: relative;

width: 490px;

height: 170px;

overflow: hidden;

border: 1px solid#ccc;

}

#box.list li{

position: absolute;

top: 0;

left: 0;

width: 490px;

height: 170px;

opacity: 0;

transition: opacity 0.5s linear

}

#box.list li.current{

opacity: 1;

}

#box.count{

position: absolute;

right: 0;

bottom: 5px;

}

#box.count li{

color:#fff;

float: left;

width: 20px;

height: 20px;

cursor: pointer;

margin-right: 5px;

overflow: hidden;

background:#F90;

opacity: 0.7;

border-radius: 20px;

}

#box.count li.current{

color:#fff;

opacity: 0.7;

font-weight: 700;

background:#f60

}

</style>

</head>

<body>

</ul>

</ul>

</div>

var box=document.getElementById('box');

var uls=document.getElementsByTagName('ul');

var imgs=uls[0].getElementsByTagName('li');

var btn=uls[1].getElementsByTagName('li');

var i=index=0;//中间量，统一声明；

var play=null;

console.log(box,uls,imgs,btn);//获取正确

//图片切换,淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不纠结、简单在css里面

function show(a){//方法定义的是当传入一个下标时，按钮和图片做出对的反应

for(i=0;i<btn.length;i++){

btn[i].className='';//很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。

btn[a].className='current';

}

for(i=0;i<imgs.length;i++){//把图片的效果设置和按钮相同

imgs[i].style.opacity=0;

imgs[a].style.opacity=1;

}

//切换按钮功能，响应对应图片

for(i=0;i<btn.length;i++){

btn[i].index=i;//不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住

btn[i].onmouseover=function(){

show(this.index);

clearInterval(play);//这就是最后那句话追加的功能

}

//自动轮播方法

function autoPlay(){

play=setInterval(function(){//这个paly是为了保存定时器的，变量必须在全局声明不然其他方法调不到或者你可以调用auto.play也许可以但是没时间试了

index++;

index>=imgs.length&&(index=0);//可能有优先级问题，所以用了括号，没时间测试了。

show(index);

},1000)

}

autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了

//div的鼠标移入移出事件

box.onmouseover=function(){

clearInterval(play);

};

box.onmouseout=function(){

autoPlay();

};

//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。貌似我可以直接追加到之前定义事件中。

</script>

</body>

</html>

好了，文章到此结束，希望可以帮助到大家。

蓝拳刷图加点(蓝拳怎么加点)希尔斯布莱德丘陵，旧希尔斯布莱德入口在哪