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”

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

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/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不兼容