簡單的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/zh-tw/n/286948.html