简单的js图片滚动轮播代码,简单的js图片滚动轮播代码大全

本文目录一览：

1、JS制作轮播图
2、JS如何实现左右滚动轮播代码详细点
3、简单的HTML+js图片轮播?
4、求一段简单的js图片轮播代码，刚学js，不要太复杂。谢谢！
5、js如何制作图片轮播
6、怎么用JS脚本使多张图片滚动？

JS制作轮播图

轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。

工具/材料

Sublime Text

首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容

然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示

接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript

最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换

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

var datas = [

{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();

}

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

简单的HTML+js图片轮播?

h5代码：

div id=”wrap”

ul id=”list”

li10/li

li9/li

li8/li

li7/li

li6/li

li5/li

li4/li

li3/li

li2/li

li1/li

/ul

/div

css代码：

style type=”text/css”

@-webkit-keyframes move{

0%{left:-500px;}

100%{left:0;}

}

#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;

overflow: hidden;}

#list{position:absolute;left:0;top:0;padding:0;margin:0;

-webkit-animation:5s move infinite linear;width:200%;}

#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;

color:#fff;text-align: center;float:left;font:normal 50px/2.5em ‘微软雅黑’;}

#wrap:hover #list{-webkit-animation-play-state:paused;}

/style

扩展资料：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

求一段简单的js图片轮播代码，刚学js，不要太复杂。谢谢！

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

meta name=”keywords” content=”焦点图” /

meta name=”description” content=”焦点图代码” /

title焦点图/title

script type=”text/javascript” src=””/script

/head

body

!– 代码开始 —

style

.ck-slide ul { margin: 0; padding: 0; list-style-type: none;}

.ck-slide { position: relative; overflow: hidden;}

.ck-slide ul.ck-slide-wrapper { position: absolute; top: 0; left: 0; z-index: 1; margin: 0; padding: 0;}

.ck-slide ul.ck-slide-wrapper li { position: absolute;}

.ck-slide .ck-prev, .ck-slide .ck-next { position: absolute; top: 50%; z-index: 2; width: 35px; height: 70px; margin-top: -35px; border-radius: 3px; opacity: .15; background: red; text-indent: -9999px; background-repeat: no-repeat; transition: opacity .2s linear 0s;}

.ck-slide .ck-prev { left: 5px; background: url(templets/default/images/arrow-left.png) #000 50% no-repeat;}

.ck-slide .ck-next { right: 5px; background: url(templets/default/images/arrow-right.png) #000 50% no-repeat;}

.ck-slidebox { position: absolute; left: 50%; bottom: 0px; z-index: 30; hright:30px;width:100%}

.ck-slidebox ul { height: 30px; padding: 0 4px; background: rgba(0,0,0,0.5); text-align:center}

.ck-slidebox ul li { float: left; height: 30px; margin: 0px 4px;line-height:30px;color:#fff;display:none}

.ck-slidebox ul li em { display: block; width: 100%; height: 30px; cursor: pointer; font-size:14px}

.ck-slidebox ul li.current em {color:#fff }

.ck-slidebox ul li em:hover { }

.ck-slide { width: 600px; height: 400px; margin: 0 auto;}

.ck-slide ul.ck-slide-wrapper { height: 400px;}

.ck-slide-wrapper li {display:none}

.ck-slidebox ul li{display:none}

.current{display:block!important}

/style

div class=”ck-slide”

ul class=”ck-slide-wrapper”

a target=”_blank” href=”” target=”_blank”img id=”slide-img-1″ src=”” class=”slide” alt=”国考明起报名招2.7万人首次仅面向体制外招录” style=’width:600px’//a

/li

a target=”_blank” href=”” target=”_blank”img id=”slide-img-2″ src=”” class=”slide” alt=”中关村“变形记”：从电子卖场到7.2公里的创业大街” style=’width:600px’//a

/li

a target=”_blank” href=”” target=”_blank”img id=”slide-img-3″ src=”” class=”slide” alt=”金星大聊两性话题辣评娱乐圈男星：没我想睡的” style=’width:600px’//a

/li

/ul

a href=”javascript:” class=”ctrl-slide ck-prev”上一张/a a href=”javascript:” class=”ctrl-slide ck-next”下一张/a

div class=”ck-slidebox”

div class=”slideWrap”

ul class=”dot-wrap”

liem国考明起报名招2.7万人首次仅面向体制外招录/em/li

liem中关村“变形记”：从电子卖场到7.2公里的创业大街/em/li

liem金星大聊两性话题辣评娱乐圈男星：没我想睡的/em/li

/ul

/div

!–图片轮播结束–

!– 代码结束 —

script

$(‘.ck-slide’).ckSlide({

autoPlay: true

});

/script

/body

/html

js如何制作图片轮播

工具/材料

Sublime Text

首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示

然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头

接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明

最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能

最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图

怎么用JS脚本使多张图片滚动？

推荐使用marquee实现图片滚动,示例:

marquee

scrolldelay=”100″

direction=”up”

onmouseover=”this.stop()”

onmouseout=”this.start()”img

src=”xxxxxxx”/marquee

其中scrolldelay=”100″

===指滚动延迟时间,单位是毫秒ms,默认为90ms

direction=”up”

===指滚动方向,默认从左往右,可取的值为:up,down,left,right

onmouseover=”this.stop()”

===指鼠标悬停在图片上时,图片静止

onmouseout=”this.start()”

===指鼠标离开图片时,图片运动

希望对您有所帮助

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/286948.html