js自动轮播图代码（JS如何实现左右滚动轮播代码详细点）

本文目录

• JS如何实现左右滚动轮播代码详细点
• js原生代码实现轮播图
• 如何通过jS修改图片路径来定时更换图片{轮播特效}

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;i《len;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;i《len;i++){
lis[i].index = i;
lis[i].onmouseenter = function(){
currentIndex = this.index;
for(var j = 0;j《len;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原生代码实现轮播图

《!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.getElementsByTagName(’li’);
var btn=uls.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》

如何通过jS修改图片路径来定时更换图片{轮播特效}

用js来修改图片路径实现轮播是不太可取的一种办法，通常的做法是：
把需要轮播的图片全部罗列出来，用js控制轮流显示第几张图片，
EX：
html代码：
《div id=“lunbo“》
《div id=“img1“ class=“img“》《img src=“**“》《/div》
《div id=“img2“ class=“img“》《img src=“**“》《/div》
《div id=“img3“ class=“img“》《img src=“**“》《/div》
《/div》
css代码：
#lunbo{width:100%;height:300px;position:relative;zoom:1;overflow:hidden}
#lunbo div{width:100%;height:100%;position:absolute;left:0;top:0;display:none}
#lunbo div:first-child{display:block}
img{width:100%;height:100%;border:0;display:block}
js代码：
《script type=“text/javascript“》
var t=0;
setInterval(function(){
t++;
if(t》2)t=0;
document.querySelector(“.img“).style.display=“none“;

document.querySelector(“#img“+t.toString()).style.display=“block“;
},5000);
《/script》