js轮播幻灯片代码（HTML轮播图代码）

本篇文章给大家谈谈js轮播幻灯片代码，以及HTML轮播图代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、js实现轮播代码怎么写？
• 2、图片自动播放轮播JQ，js代码。
• 3、js自动播放幻灯片函数
• 4、求一段简单的js图片轮播代码，刚学js，不要太复杂。谢谢！
• 5、求首页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"

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

图片自动播放轮播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不兼容

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

title无标题文档/title

style

*{ padding:0; margin:0;}

.hy-hdp { display:block; overflow:hidden;}

.hy-hdp .pic{ width:400px; height:320px; position:relative;}

img{ position:absolute; left:0; top:0;width:400px; height:320px;}

li{ list-style:none; width:20px; height:20px; color:#FFFFFF; background:red; line-height:20px; float:left;}

/style

script src=""/script

script

$(document).ready(function(){

/* var $aImg=$("#abc .pic img");

var $aLi=$("#abc .num li");

hy.Init();

hy.m($aImg,$aLi,0);

$aImg.each(function(i,ele){

$(this).click(function(){

$aLi.css("background","red");

$aLi.eq(i).css({

"background" : "green"

});

});

});

$aLi.each(function(index,ele){

$(this).click(function(){

hy.m($aImg,$aLi,index);

});

});*/

$("#abc").hy(2);

$("#bbb").hy(0);

});

(function($,undefined){

$.fn.hy = function(o){

var $obj = $(this);

return new HY($obj,o);

}

var HY = function($obj,o){

var pp = {};

pp.T = null;

pp.ii = 0;

pp.img = $obj.find(".pic img")

pp.li = $obj.find(".num li");

pp.index = o;

m(pp);

pp.li.each(function(index,ele){

$(this).click(function(){

clearTimeout(pp.T);

pp.index = index;

m(pp);

});

});

}

function m(o){

o.li.css("background","red");

o.li.eq(o.index).css("background","green");

o.img.each(function(index,ele){

if(index==o.index){

$(this).css({

"zIndex":2,

"opacity" : 0

});

}else if(index==o.ii){

$(this).css("zIndex",1);

}else{

$(this).css("zIndex",0);

}

});

o.img.eq(o.index).animate(

{

"opacity" : 1

},

1000

);

o.ii = o.index;

o.index = o.index+1;

o.index = o.index=o.li.length?0:o.index;

o.T = setTimeout(function(){

m(o);

},2000);

}

})(jQuery)

/script

/head

body

!--div id="abc" class="hy-hdp" style="float:left; margin:0 10px;"

div class="pic"

img src="images/1.jpg" /

img src="images/2.jpg" /

img src="images/3.jpg" /

img src="images/4.jpg" /

img src="images/5.jpg" /

img src="images/6.jpg" /

/div

ul class="num"

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

/ul

/div--

div id="bbb" class="hy-hdp style="float:left; margin:0 10px;"

div class="pic"

img src="images/1.jpg" /

img src="images/2.jpg" /

img src="images/3.jpg" /

img src="images/4.jpg" /

img src="images/5.jpg" /

img src="images/6.jpg" /

/div

ul class="num"

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

/ul

/div

/body

/html

求一段简单的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

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"

li

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

/li

li

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

/li

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

/div

/div

!--图片轮播结束--

!-- 代码 结束 --

script

$('.ck-slide').ckSlide({

autoPlay: true

});

/script

/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轮播幻灯片代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于HTML轮播图代码、js轮播幻灯片代码的信息别忘了在本站进行查找喔。