❶ 做一個輪播圖頁面怎麼做
網頁設計中讓圖片輪播，需要用到的JS和比較好的div+css布局意識，主要還是需要了解left，top在css中的意思，這里我提交一段我以前寫的代碼；
html中的代碼：
<div id="box">
<div id="woZaiHouDun" class='hide' >
<a id="btnLeft" href='javascript:void(0);'> </a>
<a id="btnRight" href='javascript:void(0);'> </a>
<ul>
<li><img width="400" height="260" src="./images/scholl/1.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/2.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/3.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/1.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/2.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/3.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/1.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/2.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/3.jpg"/></li>
</ul>
</div>
js中的代碼：
ar t=null;
function woZaiHouDun(){
var oUl = document.getElementById('woZaiHouDun').getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px';
var oBtnLeft = document.getElementById('btnLeft');
var oBtnRight = document.getElementById('btnRight');
var iTarget = 0;
var ispeed = -3;
oBtnLeft.onclick = function(){
ispeed = 3;
}
oBtnRight.onclick = function(){
ispeed = -3;
}
t=setInterval(function(){
iTarget = oUl.offsetLeft -ispeed;
if( iTarget < - oUl.offsetWidth/2){
oUl.style.left =0 +'px';
iTarget = oUl.offsetLeft -ispeed;
}
if( iTarget > 0){
oUl.style.left =- oUl.offsetWidth/2 +'px';
iTarget = oUl.offsetLeft -ispeed;
}
oUl.style.left =iTarget +'px';
},30)
}
這樣是能實現輪播的。
❷ 如何在PPT中一個頁面上實現多張圖片輪播
1、那就是需要4張圖。
2、圖一準備2張，位置重疊。
3、設置播放時間，在動畫設置中，將開始播放時間設置為「上一個動畫之後」
4、依次類推，設置相同的動畫後就可以實現你說的那種，類似於循環回來的效果。
❸ 寫了一個輪播圖的頁面 ，如何讓這個輪播圖的圖片輪播一遍之後自動跳轉到另一個頁面
加個判斷，圖片輪播重置的時候實行跳轉操作
❹ 淘寶詳情頁里輪播圖代碼
這個的話，要麼你自己很會寫代碼。要麼你的店鋪要開通CSS的呢，如果你是用DW做好上傳至淘寶的話，可能會被淘寶系統自動過濾掉 的 一般來說，在寶貝詳情頁這樣的很難做到。 希望能幫到您。
❺ 簡單的HTML+js圖片輪播
h5代碼：
<div id=「wrap」><ul id=「list」><li>10</li><li>9</li><li>8</li><li>7</li><li>6</li><li>5</li><li>4</li><li>3</li><li>2</li><li>1</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)輪播頁圖片素材擴展閱讀：
輪播圖是網站介紹其主要產品或重要信息的一種方式。簡單的一點是，在網頁的某一部分，會依次呈現幾個帶有重要信息的圖片，這樣訪問者就可以快速了解網站想要表達的主要信息。各種新聞網站的頭版頭條也是以這種方式呈現的重要信息。
輪播圖的實現方式：例如：有5張輪播的圖片，每張圖片的寬度為1024px，高度為512px。那麼旋轉的窗口大小應該是一張圖片的大小，即1024×512，然後，將五張0px的圖片水平連接，形成一張5120px寬、512px高的圖片，最後，通過每次向左移動1024px，可以旋轉大的合成圖像。
❻ 手機淘寶輪播模塊怎麼添加8張圖
給圖片一個盒子，裡面放li 如果左浮動 就會排成一排 再盒子添加overfloor：hidden
❼ 淘寶詳情頁如何做圖片輪播
親，要買模板才能有這個效果的
❽ 【淘寶店鋪裝修】淘寶圖片輪播圖片輪播怎麼做
操作如下：
到店鋪的裝修頁面：
「上下滾動」和「漸變滾動」這是圖片輪播展示方式。
「上下滾動」是圖片與圖片之間以上下移動的方式切換；
「漸變滾動」是當一張圖片在變為模糊時切換成另一張圖片。
選擇好「切換效果」後，點「保存」。
頁面裝修首頁，在頁面右上角，點「發布」。
❾ 誰給個頁面圖片輪播實例代碼
$(function(){
// 圖片上下翻滾
var len = $('.slidebtn>ul>li').length;
var index = 0;
var autoplay;
$('.slidebtn li').mouseover(function(){
index = $('.slidebtn li').index(this);
showImg(index);
}).eq(0).mouseover();
$('.slidebox').hover(function(){
clearInterval(autoplay);
},function(){
autoplay = setInterval(function(){
showImg(index)
index++;
if(index==len){
index=0;
}
},3000);
}).trigger('mouseleave');
function showImg(index){
var picheight = $('.slidebox').height();
$('.slidepic').stop(true,false).animate({top:-picheight*index},600)
$('.slidebtn li').removeClass('current').eq(index).addClass('current');
};
// 圖片左右翻滾
var size = $('.slidebox-01>ul>li').length;
var frist = 0;
var datetime;
$('.slidebtn-01 li').mouseover(function(){
frist = $('.slidebtn-01 li').index(this);
showpic(frist);
}).eq(0).mouseover();
$('.slidebox-01').hover(function(){
clearInterval(datetime);
},function(){
datetime = setInterval(function(){
showpic(frist)
frist++;
if(frist==size){
frist=0;
}
},3000);
}).trigger('mouseleave');
function showpic(frist){
var imgheight = $('.slidebox-01').width();
$('.slidepic-01').stop(true,false).animate({left:-imgheight*frist},1000)
$('.slidebtn-01 li').removeClass('current').eq(frist).addClass('current');
};
});
//圖片淡隱淡現
var defaultOpts ={ interval:5000, fadeInTime:300, fadeOutTime:200 };
var _titles = $("ul.slide-txt li");
var _titles_bg = $("ul.op li");
var _bodies = $("ul.slide-pic li");
var _count = _titles.length;
var _current = 0;
var _intervalID = null;
var stop = function(){
window.clearInterval(_intervalID);
};
var slide = function(opts){
if (opts){
_current = opts.current || 0;
} else{
_current = (_current >= (_count - 1)) ? 0 :(++_current);
};
_bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function(){
_bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
_bodies.removeClass("current").eq(_current).addClass("current");
});
_titles.removeClass("current").eq(_current).addClass("current");
_titles_bg.removeClass("current").eq(_current).addClass("current");
};
var go = function(){
stop();
_intervalID = window.setInterval(function(){
slide();
}, defaultOpts.interval);
};
var itemMouseOver = function(target, items){
stop();
var i = $.inArray(target, items);
slide({ current:i });
};
_titles.hover(function(){
if($(this).attr('class')!='current'){
itemMouseOver(this, _titles);
}else{
stop();
}
}, go);
_bodies.hover(stop, go);
go();
js 部分的
<div class = "MainStyle">
<div class ="slidebox-01" style=" width: 100%; height: 300px; ">
<ul class="slidepic-01">
<li><a href = "/Procts/Default.html"><img src="/Advert/AdvertImage/Big_1.jpg" alt="" width="980" height="300" /></a></li>
<li><a href = "/Procts/Default.html"><img src="/Advert/AdvertImage/Big_2.jpg" alt="" width="980" height="300" /></a></li>
<li><a href = "/Procts/Default.html"><img src="/Advert/AdvertImage/Big_3.jpg" alt="" width="980" height="300" /></a></li>
<li><a href = "/Procts/Default.html"><img src="/Advert/AdvertImage/Big_4.jpg" alt="APO+" width="980" height="300" /></a></li>
</ul>
<div class="slidebtn-01">
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
網頁部分的
.slidebox-01{width:978px;height:600px;overflow:hidden;position:relative;border:solid 1px #ddd;margin:0px auto;}
.slidepic-01{position:absolute;width:999em;}
.slidepic-01 li{height:300px;overflow:hidden;float:left;}
.slidebtn-01{position:absolute;bottom:10px;right:10px;float:right;}
.slidebtn-01 li{background:#fff;border:1px solid #1363aa;cursor:pointer;float:left;font-family:arial;height:18px;line-height:18px;width:18px;margin:4px;text-align:center;color:#1363aa;}
.slidebtn-01 li.current{background:#1363aa;border:1px solid #1363aa;height:24px;line-height:24px;width:24px;margin:0 2px;color:#fff;font-weight:800;}
css 部分的
❿ 網頁輪播圖怎麼做啊，搜了好多代碼自己也做不出來
網頁輪播圖主要包含三部分：
1、輪播圖片；2、css和html代碼部分；3、輪播js代碼部分
下面的可以參考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="swiper-3.4.1.min.css">
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="swiper-3.4.1.jquery.min.js"></script>
<style type="text/css">
.swiper-container{
width: 790px;
height: 340px;
}
</style>
</head>
<!-- 結構以及class的類名不允許更改 -->
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滾動條 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
// 滾動方向 horizontal/vertical
direction: 'horizontal',
// 自動播放
autoplay:2000,
// 是否循環播放
loop: true,
// 如果需要分頁器（小圓點）
// 是否需要分頁器
pagination: '.swiper-pagination',
// 點擊分頁器是否切換到對應的圖片 是 true 否 false
paginationClickable:true,
// 如果需要前進後退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 用戶操作swiper之後，是否禁止autoplay。默認為true：停止。
// 如果設置為false，用戶操作swiper之後自動切換不會停止，每次都會重新啟動autoplay。
// 操作包括觸碰，拖動，點擊pagination等。
autoplayDisableOnInteraction:false,
})
</script>
</body>
</body>
</html>
效果圖如下：
另外 新手建議還是直接選用已有的，現在網上很多的！