js轮播图标代码,js自动轮播图代码

本文目录一览：

1、js实现轮播代码怎么写？
2、JS制作轮播图
3、简单的HTML+js图片轮播?
4、JS轮播弹窗代码
5、求首页js轮播图代码
6、图片自动播放轮播JQ，js代码。

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"

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

/ul

li/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

JS制作轮播图

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

工具/材料

Sublime Text

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

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

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

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

简单的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轮播弹窗代码

//时间控制的广告代码

var cookie = {

ad0:30,//时间控制第一个广告30分钟轮播

ad1:60,//时间控制第二个广告60分钟轮播

ad_num : 2,

get_cookie : function(Name){var search = Name + "="; var returnvalue = "";if (document.cookie.length 0) {offset = document.cookie.indexOf(search);if (offset != -1) {offset += search.length;end = document.cookie.indexOf(";", offset);if (end == -1)end = document.cookie.length;returnvalue=unescape(document.cookie.substring(offset, end));}}return returnvalue;},

init : function(){

for(var i=0; icookie.ad_num; i++){

if(cookie.get_cookie('ppad_cookie_'+i)){

continue;

}else{

var Then = new Date();current_time = eval('cookie.ad'+i);Then.setTime(Then.getTime() + current_time*60*1000);document.cookie='ppad_cookie_'+i+'=1;expires='+ Then.toGMTString()+';path=/;';

switch(i){

case 0:

广告代码一 break;

case 1:

广告代码二 break;

}

break;

}

cookie.init();

//直接就放JS文件里面

求首页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库！

图片自动播放轮播JQ，js代码。

//轮播器

var crs_num=1

function interval(){

carousel=setInterval(function(){

num2=crs_num*-800

$('.crs_img').animate({

attr:'x',

target:num2,

time:50,

speed:10,

})

$('.crs_words p').html($('.crs_img img').getnum(crs_num).attr('alt'))

$('#carousel li').css('color','#999')

$('#carousel li').getnum(crs_num).css('color','#333')

crs_num++;

if(crs_num==3)crs_num=0;

},3000)

}

interval();

$('#carousel li').hover(function(){

var num=$(this).childNum()*-800

clearInterval(carousel)

$('.crs_img').animate({

attr:'x',

target:num,

time:50,

speed:5,

})

$('.crs_words p').html($('.crs_img img').getnum($(this).childNum()).attr('alt'))

$('#carousel li').css('color','#999')

$(this).css('color','#333')

},function(){

interval()

})

animate是自己封装的，可能和jq不兼容