html图片轮播js代码(javascript图片轮播代码)

http://www.itjxue.com  2023-02-24 20:43  来源:未知  点击次数: 

JS制作轮播图

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

工具/材料

Sublime Text

01

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

02

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

03

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

04

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

简单的HTML+js图片轮播?

h5代码:

div id=“wrap”ul id=“list”li10/lili9/lili8/lili7/lili6/lili5/lili4/lili3/lili2/lili1/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,然后,将五张0px的图片水平连接,形成一张5120px宽、512px高的图片,最后,通过每次向左移动1024px,可以旋转大的合成图像。

参考资料来源:

百度百科-轮播

js如何制作图片轮播

工具/材料

Sublime Text

01

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

02

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

03

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

04

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

05

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

现在流行的js轮播图片原理都有哪些。 原理可以了,发代码不太美观

首先init()函数用于初始化images数组和image的值,本例中主要是利用setSrc()设置图片的src属性值,这样就达到了图片的切换,图片的轮播是使用定时器来时显的!setInterval('play()',500)的意思是每0.5s调用一次play()函数!

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

html

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

titleInsert title here/title

/head

script type="text/javascript"

var timeID;

var image;

var current = 0;

var images = new Array(5);

function init(){

for (var i=1;i=5;i++){

images[i] = new Image(450,550);

images[i].src = "pictures/"+i+".jpg";

}

image = document.images[0];

}

function setSrc(i){

current = i;

//设置图片src的属性,实现图片的切换

image.src = images[i].src;

}

function pre(){

if (current = 0){

alert('已经是第一张了');

}else{

current--;

setSrc(current);

}

}

function next(){

if (current = 5){

alert('已经是最后一张了');

}else{

current++;

setSrc(current);

}

}

function play(){

if (current = 5){

current = 0;

}

setSrc(++current);

}

/script

body onload="init()"

input type="button" value="第一张" onclick="setSrc(1)"

input type="button" value="上一张" onclick="pre()"

input type="button" value="下一张" onclick="next()"

input type="button" value="最后一张" onclick="setSrc(5)"

input type="button" value="幻灯播放" onclick="timeID=setInterval('play()',500)"

input type="button" value="停止播放" onclick="clearInterval(timeID)"

div style="border:1px solid blue;width:450px; height:550px;" id="myPic"

img src="pictures/1.jpg" /

/div

/body

/html

求首页js轮播图代码

!DOCTYPE html

html

head

? meta charset="UTF-8"

? titlequery焦点轮播图/title

? style type="text/css"

? ? ? *{ margin: 0; padding: 0; text-decoration: none;}

? ? ? body { padding: 20px;}

? ? ? #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}

? ? ? #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}

? ? ? #list img { float: left;}

? ? ? #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}

? ? ? #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}

? ? ? #buttons .on { ?background: orangered;}

? ? ? .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; ?position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}

? ? ? .arrow:hover { background-color: RGBA(0,0,0,.7);}

? ? ? #container:hover .arrow { display: block;}

? ? ? #prev { left: 20px;}

? ? ? #next { right: 20px;}

? /style

? script type="text/javascript" src="js/jquery.1.10.2.js"/script

? script type="text/javascript"

? ? ? $(function () {

? ? ? ? ? var container = $('#container');

? ? ? ? ? var list = $('#list');

? ? ? ? ? var buttons = $('#buttons span');

? ? ? ? ? var prev = $('#prev');

? ? ? ? ? var next = $('#next');

? ? ? ? ? var index = 1;

? ? ? ? ? var len = 5;

? ? ? ? ? var interval = 3000;

? ? ? ? ? var timer;

? ? ? ? ? function animate (offset) {

? ? ? ? ? ? ? var left = parseInt(list.css('left')) + offset;

? ? ? ? ? ? ? if (offset0) {

? ? ? ? ? ? ? ? ? offset = '+=' + offset;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? else {

? ? ? ? ? ? ? ? ? offset = '-=' + Math.abs(offset);

? ? ? ? ? ? ? }

? ? ? ? ? ? ? list.animate({'left': offset}, 300, function () {

? ? ? ? ? ? ? ? ? if(left -200){

? ? ? ? ? ? ? ? ? ? ? list.css('left', -600 * len);

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? if(left (-600 * len)) {

? ? ? ? ? ? ? ? ? ? ? list.css('left', -600);

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? });

? ? ? ? ? }

? ? ? ? ? function showButton() {

? ? ? ? ? ? ? buttons.eq(index-1).addClass('on').siblings().removeClass('on');

? ? ? ? ? }

? ? ? ? ? function play() {

? ? ? ? ? ? ? timer = setTimeout(function () {

? ? ? ? ? ? ? ? ? next.trigger('click');

? ? ? ? ? ? ? ? ? play();

? ? ? ? ? ? ? }, interval);

? ? ? ? ? }

? ? ? ? ? function stop() {

? ? ? ? ? ? ? clearTimeout(timer);

? ? ? ? ? }

? ? ? ? ? next.bind('click', function () {

? ? ? ? ? ? ? if (list.is(':animated')) {

? ? ? ? ? ? ? ? ? return;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? if (index == 5) {

? ? ? ? ? ? ? ? ? index = 1;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? else {

? ? ? ? ? ? ? ? ? index += 1;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? animate(-600);

? ? ? ? ? ? ? showButton();

? ? ? ? ? });

? ? ? ? ? prev.bind('click', function () {

? ? ? ? ? ? ? if (list.is(':animated')) {

? ? ? ? ? ? ? ? ? return;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? if (index == 1) {

? ? ? ? ? ? ? ? ? index = 5;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? else {

? ? ? ? ? ? ? ? ? index -= 1;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? animate(600);

? ? ? ? ? ? ? showButton();

? ? ? ? ? });

? ? ? ? ? buttons.each(function () {

? ? ? ? ? ? ? ?$(this).bind('click', function () {

? ? ? ? ? ? ? ? ? ?if (list.is(':animated') || $(this).attr('class')=='on') {

? ? ? ? ? ? ? ? ? ? ? ?return;

? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?var myIndex = parseInt($(this).attr('index'));

? ? ? ? ? ? ? ? ? ?var offset = -600 * (myIndex - index);

? ? ? ? ? ? ? ? ? ?animate(offset);

? ? ? ? ? ? ? ? ? ?index = myIndex;

? ? ? ? ? ? ? ? ? ?showButton();

? ? ? ? ? ? ? ?})

? ? ? ? ? });

? ? ? ? ? container.hover(stop, play); //鼠标移入停止轮播

? ? ? ? ? play();

? ? ? });

? /script

/head

body

div id="container"

? div id="list" style="left: -600px;"

? ? ? img src="img/5.jpg" alt="1"/

? ? ? img src="img/1.jpg" alt="1"/

? ? ? img src="img/2.jpg" alt="2"/

? ? ? img src="img/3.jpg" alt="3"/

? ? ? img src="img/4.jpg" alt="4"/

? ? ? img src="img/5.jpg" alt="5"/

? ? ? img src="img/1.jpg" alt="5"/

? /div

? div id="buttons"

? ? ? span index="1" class="on"/span

? ? ? span index="2"/span

? ? ? span index="3"/span

? ? ? span index="4"/span

? ? ? span index="5"/span

? /div

? a href="javascript:;" id="prev" class="arrow"lt;/a

? a href="javascript:;" id="next" class="arrow"gt;/a

/div

/body

/html

可以直接复制用,记得引入JQ库!

js实现轮播代码怎么写?

!DOCTYPE html

html

head

meta charset="UTF-"

title最简单的轮播广告/title

style

body, div, ul, li {

margin: ;

padding: ;

}

ul {

list-style-type: none;

}

body {

background: #;

text-align: center;

font: px/px Arial;

}

#box {

position: relative;

width: px;

height: px;

background: #fff;

border-radius: px;

border: px solid #fff;

margin: px auto;

}

#box .list {

position: relative;

width: px;

height: px;

overflow: hidden;

border: px solid #ccc;

}

#box .list li {

position: absolute;

top: ;

left: ;

width: px;

height: px;

opacity: ;

transition: opacity .s linear

}

#box .list li.current {

opacity: ;

}

#box .count {

position: absolute;

right: ;

bottom: px;

}

#box .count li {

color: #fff;

float: left;

width: px;

height: px;

cursor: pointer;

margin-right: px;

overflow: hidden;

background: #F;

opacity: .;

border-radius: px;

}

#box .count li.current {

color: #fff;

opacity: .;

font-weight: ;

background: #f

}

/style

/head

body

div id="box"

ul

li style="opacity: ;"img src="img/images/.jpg" width="" height=""/li

li style="opacity: ;"img src="img/images/.jpg" width="" height=""/li

li style="opacity: ;"img src="img/images/.jpg" width="" height=""/li

li style="opacity: ;"img src="img/images/.jpg" width="" height=""/li

li style="opacity: ;"img src="img/images/.jpg" width="" height=""/li

/ul

ul

li/li

li class=""/li

li class=""/li

li class=""/li

li class=""/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=; //中间量,统一声明;

var play=null;

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

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

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

for(i=;ibtn.length;i++ ){

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

btn[a].className='current';

}

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

imgs[i].style.opacity=;

imgs[a].style.opacity=;

}

}

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

for(i=;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=);//可能有优先级问题,所以用了括号,没时间测试了。

show(index);

},)

}

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

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

box.onmouseover=function(){

clearInterval(play);

};

box.onmouseout=function(){

autoPlay();

};

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

/script

/body

/html

(责任编辑:IT教学网)

更多

推荐编程综合文章