原生js层叠图片轮播展示代码,js图片轮播效果实现代码

本文目录一览：

• 1、js原生代码实现轮播图
• 2、怎么用js的原生写法写出来一个轮播图呢？
• 3、JS如何实现左右滚动轮播代码详细点
• 4、Js图片轮播思路
• 5、用原生JS写的轮播效果，怎么让它有滑动的效果，不是直接切换

js原生代码实现轮播图

!DOCTYPE html

html lang=”en”

head

meta charset=”UTF-8″

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

div id=”box”

ul class=”list”

li class=”current” style=”opacity: 1;”img src=”img/images04/01.jpg” width=”490″ height=”170″/li

li style=”opacity: 0;”img src=”img/images04/02.jpg” width=”490″ height=”170″/li

li style=”opacity: 0;”img src=”img/images04/03.jpg” width=”490″ height=”170″/li

li style=”opacity: 0;”img src=”img/images04/04.jpg” width=”490″ height=”170″/li

li style=”opacity: 0;”img src=”img/images04/05.jpg” width=”490″ height=”170″/li

/ul

ul class=”count”

li class=”current”1/li

li class=””2/li

li class=””3/li

li class=””4/li

li class=””5/li

/ul

/div

script

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;ibtn.length;i++ ){

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

btn[a].className=’current’;

}

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

imgs[i].style.opacity=0;

imgs[a].style.opacity=1;

}

}

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

for(i=0;ibtn.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

怎么用js的原生写法写出来一个轮播图呢？

1：排出一个版，包含上下切换的标识和图片导航，所有图片隐藏，给图片第一张加一个class名，样式设为显示，图片导航的第一个加一个class名，加上背景色；

2：获取节点；

3：给向下切换写一个点击事件，点击图片切换到下一张，注意当图片切换到最后一张的时候会报错，所以必须要判断一下，当图片切换到最后一张的时候在，再次击会切换到第一张；

4：给向上切换写一个点击事件，注意当图片切换到第一张之后会报错，所以必须要判断一下，当图片切换到第一的时候，再次点击会切换到最后张，循环起来；

5：写一个定时器，定时器的播放顺序和向下切换一致，可以封装一个函数方便调用；

6：写鼠标划入事件，清除定时器；

7：写鼠标移出事件，定时器继续运行；

8：图片导航的点击事件

点击事件click

定时器setlnterval（）

if判断

for（）循环

JS如何实现左右滚动轮播代码详细点

var datas = [

{imgSrc:”（图片 ）”},

{imgSrc:”（图片 ）”},

{imgSrc:”（图片 ）”},

{imgSrc:”（图片 ）”},

{imgSrc:”（图片 ）”},

{imgSrc:”（图片 ）”}

];

var banner = document.getElementById(“banner”);

var list = document.getElementById(“list”);

for(var i = 0,len = datas.length;ilen;i++){

var div = document.createElement(“div”);

var li = document.createElement(“li”);

if(i==0){ //默认第一项轮播项显示 对应的控制按钮被选中

div.className = “item active”;

li.className = “active”;

}else{ //其他项隐藏 其他的控制按钮样式不改变

div.className = “item”;

li.className = “”;

}

div.innerHTML = ‘a href=”‘ + datas[i].targetSrc + ‘”‘ +

‘img src=”‘ + datas[i].imgSrc + ‘” /’ +

‘/a’;

li.innerHTML = i + 1;

banner.appendChild(div);

list.appendChild(li);

}

var lunBo = document.getElementById(“lunBo”);

var items = document.querySelectorAll(“#lunBo #banner .item”);

var lis = document.querySelectorAll(“#lunBo #list li”);

var currentIndex = 0;//(控制按钮和轮播项共同的索引)

for(var i = 0,len = lis.length;ilen;i++){

lis[i].index = i;

lis[i].onmouseenter = function(){

currentIndex = this.index;

for(var j = 0;jlen;j++){

lis[j].className = “”;

items[j].className = “item”;

}

this.className = “active”;

items[this.index].className = “item active”;

}

}

var termId; //全局变量

function autoPlay(){

termId = setInterval(function(){

currentIndex++;

if(currentIndex==lis.length){

currentIndex = 0;

}

lis[currentIndex].onmouseenter();

},3000);

}

autoPlay();//打开页面自动轮播

//鼠标进入停止轮播

lunBo.onmouseenter = function(){

clearInterval(termId);

}

//鼠标离开继续轮播

lunBo.onmouseleave = function(){

autoPlay();

}

我这还有其他的，先采纳一下加我，我给你发

Js图片轮播思路

a href=””js图片轮播效果代码/a

首先我们需要引入一张图片，通过更改img标签中src的值，达到图片切换功能。

html代码：img src=”” width=”331″ height=”220″ id=”carousel”

在这我们需要理理自己的思路，一、图片从何而来 二、怎么样使图片轮播，能够动起来

自定义一个数组，将需要的图片存在中间，代码如下：

var arr=new Array();

arr[0]=’1.jpg’;

arr[1]=’2.jpg’;

arr[2]=’3.jpg’;

arr[3]=’4.jpg’;

接着我们需要能够对图片进行操作定义一个函数，

function tImg(){var obj=document.getElementById(‘carousel’);obj.src=”+arr[carIndex];}

准备好以后我们只需要获取数组的下标即可

定义初始化下标：var carIndex=0;

在函数中如果carIndex变量等于数组的字符串长度-1的情况下，赋给carIndex=0的初始数值。不是的情况下carIndex就+或者=1，代码如下：

function tImg(){

var obj=document.getElementById(‘carousel’);

if(carIndex==arr.length-1){

carIndex=0;}

else{

carIndex+=1;}

obj.src=”+arr[carIndex];obj.onmouseover=function(){

}

逻辑关系理清楚后我们下一步就是使他们动起来，我们需要引入setInterval来控制函数的时间，代码如下：

var time=setInterval(tImg,3000);函数3秒执行一次

做到这里我们已经能过使图片进行切换了。

用原生JS写的轮播效果，怎么让它有滑动的效果，不是直接切换

如果是朝左翻页，就把当前页朝左偏移100%的宽度，让下一页同样朝左偏移100%宽度。以下是代码部分：

html head lang=”en” meta charset=”UTF-8″ title/title style .banner{ width:300px; height:250px; position: relative; z-index: 100; background: skyblue; margin:100px auto; overflow:hidden ; } .banner .first{ left:0; } .banner a{ width: 100%; height: 100%; position: absolute; display:block; top:0; left:100%; } .banner a img{ width: 100%; height: 100%; } .banner .pre{ position: absolute; left:0; top:120px; background: gray; width:30px; height:30px; border-radius: 30px; line-height: 30px; text-align: center; opacity: 0.4; z-index: 1000; cursor: pointer; } .banner .next{ position: absolute; right:0; top:120px; background: gray; width:30px; height:30px; border-radius: 30px; line-height: 30px; text-align: center; opacity: 0.4; z-index: 1000; cursor: pointer; } .