本文目錄一覽：
- 1、javascript 輪播 縮略圖 怎麼實現
- 2、怎麼用js的原生寫法寫出來一個輪播圖呢？
- 3、JS輪播圖，當滑鼠懸停於圖片時停止輪播，移開繼續，代碼怎麼寫？
- 4、求一個簡單的js實現輪播代碼
- 5、怎麼用js做一個簡單的輪播圖
- 6、簡單的HTML+js圖片輪播?
javascript 輪播 縮略圖 怎麼實現
javascript 輪播 縮略圖 實現
html
head
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /
style
*{padding:0;margin:0;}
#content {width:400px;height:500px;margin:10px auto;position:relative;border:1px solid #000;color:red;font-size:20px;}
#title, #bottom{position:absolute;width:400px;height:30px;line-height:30px;text-align:center;font-size:20px;background:#f1f1f1;}
#bottom{bottom:0;cursor:pointer;}
#bottom span{display:inline-block;width:15px;height:15px;border-radius:15px;background:#000;text-align:center;line-height:15px;position:relative;}
#bottom span.active{background: #FFFF33;}
#bottom span div {position:absolute;width:110px;height:110px;top:-125px;left:-46px;display:none;}
#bottom span div:after{content:”;position:absolute;left:49px;bottom:-12px;border-top:7px solid #fff;border-right:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;}
#bottom span img {width:100px;height:100px;border:5px solid #fff;}
#left, #right{position:absolute;width:60px;height:60px;border-radius:60px;line-height:60px;font-size:60px;background:#FFFF66;font-weight:bold;text-align:center;top:50%;margin-top:-25px;color:#fff;cursor:pointer;filter(opacity:70);opacity:0.7;}
#left:hover,#right:hover{filter(opacity:100);opacity:1;}
#left{left:0px;}
#right{right:0px;}
#img{width:400px;height:500px;}
/style
script
window.onload = function () {
var bottom = $(‘bottom’),title = $(‘title’),
img = $(‘img’),left = $(‘left’),right = $(‘right’);
var aSpan = bottom.getElementsByTagName(‘span’);
var aDiv = bottom.getElementsByTagName(‘div’);
var arr = [‘圖片一’,’圖片二’,’圖片三’, ‘圖片四’];
var num = 0;
// 初始化
picTab();
// 點擊下一張
right.onclick = function () {
if (num === aDiv.length – 1) num = -1;
num++;
picTab();
}
// 點擊上一張
left.onclick = function () {
if (num === 0) num = aDiv.length;
num–;
picTab();
}
function picTab() {
title.innerHTML = arr[num];
img.src = ‘img/’ + (num + 1) + ‘.png’;
for ( var i = 0; i aSpan.length; i++ ) {
aSpan[i].className = ”;
}
aSpan[num].className = ‘active’;
}
// 滑鼠移入移出顯示縮略圖
for ( var i = 0; i aSpan.length; i++ ) {
aSpan[i].index = i;
aSpan[i].onmouseover = function () {
aDiv[this.index].style.display = ‘block’;
}
aSpan[i].onmouseout = function () {
aDiv[this.index].style.display = ‘none’;
}
aSpan[i].onclick = function () {
num = this.index;
picTab();
}
}
function $(id) { return document.getElementById(id);}
}
/script
/head
body
div id=”content”
div id=”title”帶縮略圖的輪播/div
div id=”left”/div
div id=”right”/div
div id=”bottom”
spandivimg src=”img/1.png”//div/span
spandivimg src=”img/2.png”//div/span
spandivimg src=”img/3.png”//div/span
spandivimg src=”img/4.png”//div/span
/div
img src=”” id=”img”/
/div
/body
/html
怎麼用js的原生寫法寫出來一個輪播圖呢？
1：排出一個版，包含上下切換的標識和圖片導航，所有圖片隱藏，給圖片第一張加一個class名，樣式設為顯示，圖片導航的第一個加一個class名，加上背景色；
2：獲取節點；
3：給向下切換寫一個點擊事件，點擊圖片切換到下一張，注意當圖片切換到最後一張的時候會報錯，所以必須要判斷一下，當圖片切換到最後一張的時候在，再次擊會切換到第一張；
4：給向上切換寫一個點擊事件，注意當圖片切換到第一張之後會報錯，所以必須要判斷一下，當圖片切換到第一的時候，再次點擊會切換到最後張，循環起來；
5：寫一個定時器，定時器的播放順序和向下切換一致，可以封裝一個函數方便調用；
6：寫滑鼠劃入事件，清除定時器；
7：寫滑鼠移出事件，定時器繼續運行；
8：圖片導航的點擊事件
點擊事件click
定時器setlnterval（）
if判斷
for（）循環
JS輪播圖，當滑鼠懸停於圖片時停止輪播，移開繼續，代碼怎麼寫？
我建議你使用插件，SuperSlide插件、layer插件、swiper插件，都有你的這個功能，還不用考慮兼容
求一個簡單的js實現輪播代碼
!DOCTYPE HTML
html
head
titleJS無縫滾動圖片/title
meta charset=UTF-8 /
style type=”text/css”
* {
margin: 0;
padding: 0;
}
#div2 {
margin: auto;
width: 602px;
overflow: hidden;
left: 200px;
}
#div1 {
position: relative;
left: 0px;
width: 1200px;
}
#div1 li {
list-style-type: none;
float: left;
width: 200px;
height: 180px;
}
img {
width: 200px;
height: 180px;
}
ul#ul1 {
position: relative;
}
/style
script type=”text/javascript”
window.onload = function ()
{
var oUl = document.getElementById (‘ul1’);
var t,o;
var speed = 0;
var funny = function ()
{
t clearInterval(t);
t = setInterval (function ()
{
speed -= 200/11;
if(speed-200){
speed=0;
oUl.appendChild (oUl.children[0]);
t clearInterval(t);
t = null;
o clearTimeout(o);
o=setTimeout(funny,1000);
}
oUl.style.left = speed + “px”;
}, 60);
}
funny ();
}
/script
/head
body
div id=”div2″
div id=”div1″
ul id=”ul1″
liimg src=”../../images/choose.png”
/li
liimg src=”../../images/deck.png”
/li
liimg src=”../../images/duel.png”
/li
liimg src=”../../images/list.png”
/li
/ul
/div
/div
/body
/html
怎麼用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);
}
}
簡單的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即可實現輪播圖。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/189300.html
微信掃一掃 
支付寶掃一掃 