本文目錄一覽：
html輪播代碼
script
window.onload = function(){ //頁面加載完成執行
var images = document.getElementsByTagName(‘img’);//取得所有img圖片
var pos = 0;//定義pos變量初始值=0
var len = images.length;//取得圖片個數
setInterval(function(){//定每1秒時執行
images[pos].style.display = ‘none’;//第一個圖片隱藏,
pos = ++pos == len ? 0 : pos;//pos在圖片個數範圍內遞增
images[pos].style.display = ‘inline’;//下一個圖片顯示
},1000);
};
/script
請問淘寶的圖片輪播代碼是什麼？
親 是下面這個 一、帶漸變效果的淘寶店鋪促銷輪播代碼： DIV class=”slider-promo J_Slider J_TWidget tb-slide” style=”HEIGHT: 400px” data-widget-config=”{‘effect’:’fade’,’contentCls’: ‘lst-main’, ‘navCls’: ‘lst-trigger’, ‘activeTriggerCls’: ‘current’}” data-widget-type=”Slide” ul class=”lst-main tb-slide-list” style=”HEIGHT: 400px” liA target=_blank href=”#”img alt=”” src=”圖片地址1″/A/li liA target=_blank href=”#”img alt=”” src=”圖片地址2″/A/li liA target=_blank href=”#”img alt=”” src=”圖片地址3″/A/li liA target=_blank href=”#”img alt=”” src=”圖片地址4″/A/li/ul ul class=lst-trigger 二、淘寶促銷輪播代碼之漸變效果代碼解釋： HEIGHT: 400px 設置你的輪播模塊高度，根據你的促銷圖片的尺寸來設置，此版本輪播是4張圖片，且4張圖片寬度、高度分別統一。本設置在代碼中有兩處。 A target=_blank href=”#” “#”代表你的促銷商品的鏈接網址，共有4處。 img alt=”” src=”圖片地址1″ “圖片地址1”設置你促銷圖片的網絡地址，也有4處。 如果還不可以的話 我給你我寫的帖子看看
求採納
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
求CSS圖片輪播完整代碼？
以4張圖片為例：
1.基本布局：
將4張圖片左浮動橫向並排放入一個div容器內，圖片設置統一尺寸，div寬度設置4個圖片的總尺寸，然後放入相框容器div，
相框設置1個圖片的大小並設置溢出隱藏，以保證正確顯示一個照片。
2.設置動畫：
然後使用css3動畫，通過對photos進行位移，從而達到顯示不同的圖片，每次偏移一個圖片的寬度，即可顯示下一張圖片。
4張圖片，需要切換3次.
根據需要可以對各個圖片添加相應的序號和圖片簡介。
3.代碼如下：
複製代碼
1 style
2 #frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}
3 #dis{position:absolute;left:-50px;top:-10px;opacity:.5}
4 #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
5 #photos img{float:left;width:300px;height:200px}
6 #photos { position: absolute;z-index:9; width: calc(300px * 4);/*—修改圖片數量的話需要修改下面的動畫參數*/ }
7 .play{ animation: ma 20s ease-out infinite alternate;}
8 @keyframes ma {
9 0%,25% { margin-left: 0px; }
10 30%,50% { margin-left: -300px; }
11 55%,75% { margin-left: -600px; }
12 80%,100% { margin-left: -900px; }
13
14 }
15 /style
複製代碼
複製代碼
div id=”frame”
div id=”photos” class=”play”
img src=”images/1.jpg”
img src=”images/3.jpg”
img src=”images/4.jpg”
img src=”images/5.jpg”
ul id=”dis”
li;/li
li22222222222222/li
li33333333333333/li
li44444444444444/li
/ul
/div
/div
拿走不謝！
HTML圖片輪播代碼怎麼寫
html部分
div id=”container”
div class=”sections”
div class=”section” id=”section0″h3this is the page1/h3/div
div class=”section” id=”section1″h3this is the page2/h3/div
div class=”section” id=”section2″h3this is the page3/h3/div
div class=”section” id=”section3″h3this is the page4/h3/div
/div
/div
css部分
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
#container {
width: 100%;
height: 500px;
overflow: hidden;
}
.sections,.section {
height:100%;
}
#container,.sections {
position: relative;
}
.section {
background-color: #000;
background-size: cover;
background-position: 50% 50%;
text-align: center;
color: white;
}
#section0 {
background-image: url(‘images/1.jpg’);
}
#section1 {
background-image: url(‘images/2.jpg’);
}
#section2 {
background-image: url(‘images/3.jpg’);
}
#section3 {
background-image: url(‘images/4.jpg’);
}
.pages li{list-style-type:none;width:10px;height:10px;border-radius:10px;background-color:white}.pages li:hover{box-shadow:0 0 5px 2px white}.pages li.active{background-color:orange;box-shadow:0 0 5px 2px orange}.pages{position:absolute;z-index:999}.pages.horizontal{left:50%;transform:translateX(-50%);bottom:5px}.pages.horizontal li{display:inline-block;margin-right:10px}.pages.horizontal li:last-child{margin-right:0}.pages.vertical{right:5px;top:50%;transform:translateY(-50%)}.pages.vertical li{margin-bottom:10px}.pages.vertical li:last-child{margin-bottom:0}
JS部分
script src=”js/jquery-1.11.0.min.js” type=”text/javascript”/script
//引入pageSwitch.min.js
script
$(“#container”).PageSwitch({
direction:’horizontal’,
easing:’ease-in’,
duration:1000,
autoPlay:true,
loop:’false’
});
/script
如圖
dw圖片輪播代碼是什麼
html部分：
div id=”box” onmouseover=”stop()” onmouseout=”start()”
div id=”red” class=”slide”/div
div id=”green” class=”slide”/div
div id=”blue” class=”slide”/div
/div
css部分：
#box{
width:100px;
height:100px;
border:1px solid black;
position:relative;
}
.slide{
width:100px;
height:100px;
position:absolute;
}
#box{
width:100px;
height:100px;
border:1px solid black;
position:relative;
overflow:hidden;
}
JS部分：
onload=function(){
var arr = document.getElementsByClassName(“slide”);
for(var i=0;iarr.length;i++){
arr[i].style.left = i*100+”px”;
}
}
function LeftMove(){
var arr = document.getElementsByClassName(“slide”);
for(var i=0;iarr.length;i++){
var left = parseFloat(arr[i].style.left);
left-=2;
var width = 100;//圖片的寬度
if(left=-width){
left=(arr.length-1)*width;//當圖片完全走出顯示框，拼接到末尾
}
arr[i].style.left = left+”px”;
}
}
moveId=setInterval(LeftMove,10);//設置一個10毫秒定時器，並給自己取名
if(left=-width){
left=(arr.length-1)*width;//當圖片完全走出顯示框，拼接到末尾
clearInterval(moveId);
}
function divInterval(){
moveId=setInterval(LeftMove,10);//設置一個10毫秒定時器
}
timeId=setInterval(divInterval,3000);//設置一個3秒的定時器。
function stop(){
clearInterval(timeId);//鼠標停留關閉B定時器
}
function start(){
clearInterval(timeId);//重新打開一個定時前，先關閉之前定時器。
timeId=setInterval(divInterval,2000);//重啟一個定時器
}
//頁面失去焦點定時器停止
onblur = function(){
stop();
}
//頁面獲取焦點時重啟定時器
onfocus = function(){
start();
}
擴展資料：
代碼解析：
為整個頁面添加onload加載完成事件，當瀏覽器打開並加載完並自動執行事件中的代碼塊。這部分js代碼寫在剛才css下面即可，保持同級結構。
當頁面加載完全，三個div應該並列在一起。
接下來，需要實現將這三個div整體向左移動，使用定時器，即前面的定時器A。
為了解決當鼠標懸停在輪播圖，輪播圖停止輪播效果，需要在box上添加鼠標移入和移出事件。
當瀏覽器窗口切出或頁面切換到其他頁面一段時間再回來時，輪播效果會有短暫加速（隨切出時間加長而加長）。
主要是因為雖然窗口切出去了，定時器依然在執行，但頁面卻沒有將效果顯示，所以切回來後會將之前的效果顯示出來而加速輪播圖。所以添加頁面焦點事件。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/151585.html
微信掃一掃 
支付寶掃一掃 