簡單的js圖片輪播_怎麼用js做一個簡單的輪播圖

『壹』 js如何製作圖片輪播

工具/材料

Sublime Text

01
首先在Sublime Text下面准備一個html和5張圖片，圖片寬高為600px和400px，如下圖所示
02
然後在HTML頁面中布局輪播圖的結構，如下圖所示，主要包括圖片區域，圓形按鈕，左右箭頭
03
接下來需要給輪播圖頁面布局聲明一些樣式，請按照下圖所示的樣式代碼進行聲明
04
最後就是實現輪播圖的JS腳本功能，如下圖所示，主要包括前進，後退，自動播放的功能
05
最後運行頁面，你就會看到下圖所示的輪播圖效果，點擊圓圈或者左右箭頭可以切換輪播圖

『貳』簡單的HTML+js圖片輪播

h5代碼：

css代碼：

(2)簡單的js圖片輪播擴展閱讀：

輪播圖就是一種網站在介紹自己的主打產品或重要信息的傳播方式。說的簡單點就是將承載著重要信息的幾張圖片，在網頁的某一部位進行輪流的呈現，從而做到讓瀏覽者很快的了解到網站想要表達的主要信息。以及各種新聞網站的頭版頭條都是用這種方式呈現的重要信息。

輪播圖的實現方式：例如：有5張輪播的圖片，每張圖片的寬度為1024px、高度為512px.那麼輪播的窗口大小就應該為一張圖片的尺寸，即為：1024×512。之後將這5張圖片0px水平相接組成一張寬度為：5120px,高度依然為：512px。最後將這張合成後的大圖每次向左移動1024px即可實現輪播圖。

『叄』 js中無縫滾動輪播圖有多少種做法

還有就是用原生js模仿jQuery寫一個動畫函數，最簡單版的就是：
var timer = null;
function ani(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
利用動畫實現圖片位置的移動，也是放一個圖片到前面。
第二個就是還是放一張圖到前面，然後把帶圖片的li定位；用一個arr[{left:0},{left:"200px"},{left:"400px"},{left:"600px"}];這樣的數組把值分別賦給li；要滾動的時候把arr的最後一項放到最前面，再依次賦值給li，加上過渡就是輪播了，當然直接跳的那一下把過渡關了才是無縫輪播。

『肆』怎麼用js做一個簡單的輪播圖

obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 6000);
}
for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 6000);
}
}

『伍』現在流行的js輪播圖片原理都有哪些。原理可以了，發代碼不太美觀

首先init()函數用於初始化images數組和image的值，本例中主要是利用setSrc()設置圖片的src屬性值，這樣就達到了圖片的切換，圖片的輪播是使用定時器來時顯的！setInterval('play()',500)的意思是每0.5s調用一次play()函數！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert 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圖片輪播代碼，剛學js，不要太復雜。謝謝！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="http://www.jinchuwenhua.com/templets/default/js/jquery.js"></script>
<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/slide.js"></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="http://www.jinchuwenhua.com/a/xinwen/2015/1014/307.html" target="_blank"><img id="slide-img-1" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014114S60-L.jpg" class="slide" alt="國考明起報名招2.7萬人首次僅面向體制外招錄" style='width:600px'/></a>

</li>
<li>

<a target="_blank" href="http://www.jinchuwenhua.com//a/xinwen/2015/1014/289.html" target="_blank"><img id="slide-img-2" src="http://www.jinchuwenhua.com/uploads/151014/1-151014092105J3.jpg" class="slide" alt="中關村「變形記」：從電子賣場到7.2公里的創業大街" style='width:600px'/></a>

</li>
<li>

<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/290.html" target="_blank"><img id="slide-img-3" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014092F30-L.jpg" 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">

<li><em>國考明起報名招2.7萬人首次僅面向體制外招錄</em></li>
<li><em>中關村「變形記」：從電子賣場到7.2公里的創業大街</em></li>
<li><em>金星大聊兩性話題辣評娛樂圈男星：沒我想睡的</em></li>

</ul>

</div>

</div>

</div>



<script>

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

autoPlay: true
});

</script>

</body>
</html>

『柒』 JS圖片輪播的原理。。。

『捌』 JS簡單的輪播圖，像圖片這種怎麼做

如果你想要上下同時切換的方法也很簡單，只要你定ID的時候有點規律就好了，例如img1和imgs1，function asd(target){
document.getElementById("img"+target).style.display="none";
document.getElementById("imgs"+target).style.display="none";
}
那麼只要target傳入圖片序號如：1；那麼就可以實現兩張圖片同時隱藏顯示了；

導航:首頁 > 好看圖片 > 簡單的js圖片輪播

簡單的js圖片輪播

工具/材料

與簡單的js圖片輪播相關的資料