頂部輪播圖源碼_dreamweaver圖片輪播圖片停留怎麼弄呀

A. 求無需flash的網站首頁圖片輪播代碼。圖片在左側，文字在右側顯示的。就像動易圖片幻燈片似的。

應該是這種代碼，不知道你那能用不？
<!DOCTYPE html>
<html xmlns="http://*www.w3.*org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片切換效果</title>
<script src="RevealTrans.js"></script>
</head>
<body>
<style type="text/css">
.container{
width:380px;
height:300px;
border:1px solid #eee;
position:relative;
}
#idPicText{
background:#eee;
line-height:25px;
text-align:center;
font-weight:bold;
width:382px;
white-space:nowrap;
overflow:hidden;
font-size:12px;
}
#idPicText a{
text-decoration:none;
color:#333;
display:block;
}
#idPicList img{
cursor:pointer;
width:60px;
height:45px;
filter:alpha(opacity=50);
-moz-opacity: .5;
opacity: .10;
border:0;
margin:10px;
}
#idPicList img.on{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

#idNum{ position:absolute; right:5px; bottom:5px;}
#idNum li{
float: left;
list-style:none;
color: #fff;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
margin: 1px;
border: 1px solid #707070;
background-color: #060a0b;
}
#idNum li.on{
line-height: 18px;
width: 18px;
height: 18px;
font-size: 14px;
border: 0;
background-color: #ce0609;
font-weight: bold;
}

</style>

<div id="idPicShow" class="container">
<ul id="idNum">
</ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div>

<script>

//////////////////////

var rvt = new RevealTrans("idPicShow");

//添加變換對象
rvt.Add('http.......143727/r_rt_1.jpg', '圖片變換效果', 'http://www............................html');
rvt.Add('http....../143727/r_rt_2.jpg', '圖片滑動展示效果', 'http://www........................2.html');
rvt.Add('http....../143727/r_rt_3.jpg', '圖片切換展示效果', 'http://www........................0.html');
rvt.Add(............./143727/r_rt_1.jpg', '圖片變換效果', 'http://www............................2.html');
rvt.Add(............./143727/r_rt_2.jpg', '圖片滑動展示效果', 'http://www.c.......................2.html');

var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];

var oNum = $("idNum"), arrNum = [];

//設置圖片列表
Each(rvt.List, function(list, i){
//圖片式
var img = document.createElement("img");
img.src = list["img"]; img.alt = list["text"];
arrImg[i] = img;
oList.appendChild(img);
//按鈕式
var li = document.createElement("li");
li.innerHTML = i + 1;
arrNum[i] = li;
oNum.appendChild(li);
//事件設置
img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };
img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
});

//設置圖片列表樣式文本顯示區域
rvt.onShow = function(){
var i = this.Index, list = this.List[i];
//圖片式
Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";
//按鈕式
Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";
//文本區域
oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text;
}

//文本顯示區域
oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); };
oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };

rvt.Start();

</script>
<br />
<script type="text/javascript">
</script>
<script type="text/javascript"
src="http........100_2_b2b5de1c242708a.js">
</script>
</body>
</html>

B. dreamweaver圖片輪播圖片停留怎麼弄呀

這是我製作的輪播圖源碼（圖片與時間間隔等可以自己改）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>https://www.wenmv.com</title>
<style>
* {
margin: 0;
padding: 0
}

html {
font-size: 15px;
}

.box {
width: 50rem;
height: 32rem;
border: 3px dashed red;
margin: 15px 0;
position: relative;
left: 50%;
top: 5%;
transform: translate(-50%, 0);
overflow: hidden;
}

.box>ul {
width: 500%;
height: 32rem;
position: absolute;
}

.box>ul>li {
width: 50rem;
height: 32rem;
list-style: none;
float: left;
}

.box li img {
width: 50rem;
height: 32rem;
}

.box>ol {
position: absolute;
left: 50%;
bottom: 15px;
transform: translate(-50%, 0);
}

.box>ol>li {
width: 1.5rem;
height: 1.5rem;
list-style: none;
margin-left: 15px;
float: left;
border-radius: 1.5rem;
background: rgba(191, 0, 3, 0.5);
cursor: pointer;
}

.box>ol>li.now {
width: 3rem;
}

.box span {
color: #00f;
display: none;
width: 6rem;
text-align: center;
height: 32rem;
line-height: 32rem;
font-size: 5rem;
position: absolute;
top: 0;
cursor: pointer;
}

.box span:hover {
background: rgba(110, 110, 110, 0.3);
}

.box>.spanL {
left: 0;
}

.box>.spanR {
right: 0;
}
</style>
</head>

<body>
<div class="box">
<ul>
<li>
<a href="javascript:;">
<img src="images/game_001.jpg" alt="輪播圖">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/game_002.jpg" alt="輪播圖">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/game_003.jpg" alt="輪播圖">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/game_004.jpg" alt="輪播圖">
</a>
</li>
</ul>


<ol>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
</ol>


<span class="spanL">‹</span>
<span class="spanR">›</span>
</div>

<script>
var box = document.querySelector('.box');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
var spanL = document.querySelector('.spanL');
var spanR = document.querySelector('.spanR');
//滑鼠移入時向左、向右圖標顯示
box.addEventListener('mouseenter', function() {
spanL.style.display = 'block';
spanR.style.display = 'block';
//停止定時器
clearInterval(timer);
})
//滑鼠移出時向左、向右圖標隱藏
box.addEventListener('mouseleave', function() {
spanL.style.display = 'none';
spanR.style.display = 'none';
//運行定時器
timer=setInterval(function(){
//調用向右運動事件
spanR.click();
},3000);
})
//動畫函數
function run(obj, target, callback) { //obj指運動的對象，target指目標運動距離，callback指回調函數
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
//回調函數要等到定時器函數運行結束才能運行
if (callback) { //若存在回調函數就調用
callback();
};
} else {
//設置動畫的步長值變數bc，使運行速度逐漸變小
var bc = (target - obj.offsetLeft) / 10 > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target -
obj.offsetLeft) / 10);
obj.style.left = obj.offsetLeft + bc + 'px';
};
}, 15);
}
//要實現無縫滾動，需要將第一張輪播圖復制並添加到最後(注意：ul的寬度也要相應增加)
var imglast = ul.children[0].cloneNode(true);
ul.appendChild(imglast);
var num = 0; //代替輪播圖的序號
var num2 = 0; //代替輪播圖指示圖標的序號
var lis = ol.children.length;
var flag = true; //此變數用於阻止快速點擊時導致運動過快的情況
//點擊向右圖標，向右運動
spanR.addEventListener('click', function() {
if (flag) {
flag = false;
if (num === ul.children.length - 1) { //注意num的判斷條件必須寫在num++的前面
num = 0;
ul.style.left = 0;
}
num++;
//輪播圖指示圖標
for (var i = 0; i < lis; i++) {
ol.children[i].className = '';
}
num2++;
if (num2 === lis) {
num2 = 0;
}
ol.children[num2].className = 'now';
//調用運動函數
run(ul, -num * ul.children[0].offsetWidth, function() {
flag = true;
});
}
})
//點擊向左圖標，向左運動
spanL.addEventListener('click', function() {
if (flag) {
flag = false;
if (num === 0) {
num = ul.children.length - 1;
ul.style.left = -num * ul.children[0].offsetWidth + 'px';
}
num--;
//輪播圖指示圖標
for (var i = 0; i < lis; i++) {
ol.children[i].className = '';
}
num2--;
if (num2 < 0) {
num2 = lis-1;
}
ol.children[num2].className = 'now';
//調用運動函數
run(ul, -num * ul.children[0].offsetWidth, function() {
flag = true;
});
}
})
//點擊指示圖標定點陣圖片
for(var i=0; i<lis; i++){
ol.children[i].index=i; //獲取循環對象的下標號
ol.children[i].addEventListener('click', function(){
run(ul, -this.index*ul.children[0].offsetWidth);
for(var j=0; j<lis; j++){
ol.children[j].className='';
};
this.className='now';
num=num2=this.index;
})
}
//設置定時器
var timer=setInterval(function(){
//調用向右運動事件
spanR.click();
},3000);
</script>
</body>
</html>

C. 使用ViewPager實現圖片輪播

首先我們來看一下運行的效果，如下所示：

這是在我們的項目中經常會用到的圖片輪播效果，一般用於廣告圖片的展示。

1）拍悉盯自動播放；
2）無限滑動；
3）手指拖拽圖片時暫停自動輪播，松開後繼續自動輪播；
4）含動畫效果的小圓點指示器。

本文將介紹利用ViewPager實現無限輪播圖片，圖片下方加上小圓點指示器標記當前位置，並利用Handler實現自動輪播圖片。

1、實現自動播放
思路：沒隔一段時間讓ViewPager更換一次頁卡，使用Handler來實現。

1）標記是否自動播放

2）每隔一段時間使用Handler發送一次更換頁卡的任務

3）在任務中每隔一段時間再次發送任務，這樣循環發送就實現了自動播放的效襲和果。

2、實現無限滑動
思路：設置頁卡視圖列表時，在前後額外各加一個頁卡。最前面加最後一張圖片，最後面加第1張圖片。然後每當切換到最前的頁卡時，就替換成倒數第2個頁卡；每當切換到最後的頁卡時，就替換成第2個頁卡。這樣一來就形成了連貫，自然實現了無限滑動的功能。

1）設置ViewPager的視圖列表時，在前後各加一個頁卡。

2）在監聽ViewPager的頁卡狀態改變中，當滑動到第1個頁卡時替換成倒數第2個頁卡；當滑動到最後一個頁卡時替換成第2個頁卡。

3、手指滑動圖片時停止自動播放
思路：使用一個標記來控制是否自動播放。

1）聲明一個boolean變數，用來標記是否播放。

2）默認是自動播放，但當圖片少於2張時不自動播放。

3）根據標記判斷是否切換頁卡

4）在監聽ViewPager的頁卡狀態改變中，如果是拖動狀態就不切換頁卡。

4、自定義指示器
思路：使用一個LinearLayout作為容器，然後根據圖片的數量向容器中不斷添加繪制的小圓點，另外再設置變大變小的屬性動畫用於動畫效果。監聽ViewPager的頁卡，每當切換到一個頁卡時就將切換對應狀態的小圓點，並且設置相應的動畫效果。

1）繪制小圓點
未選中狀態，灰色的圓。

選中狀態，白色的圓。

2）屬性動畫陸友
變大

變小

3）設置指示器
先是統一設置屬性並添加到容器中，然後默認第1個小圓點為選中狀態。選中狀態的小圓點顏色由灰色變成白色，並且變大。

4）監聽頁卡
當頁卡被選中時，相應的小圓點顏色由灰色變成白色，並且變大；之前的小圓點顏色由白色變成灰色，並且變小。

源碼地址
ImageSlideshow

D. 淘寶首頁全屏代碼下如何插入輪播圖片代碼

直接用全屏輪播代碼。

天貓店：

</div>

</div>

</ul>

</div>

</ul>

</div>

淘寶店專業版：

</ul>

</div>

淘寶基礎版：

</div>

</div>

</ul>

</div>

</ul>

</div>

E. 剛入門web求大神解釋這個js源碼的意思

你好！
這段代碼是輪播圖的自動切換。
其中還設置了滑鼠移入移出的效果。
setInteval函數是個定時器，
兩個參數:一個是執行的函數，一個是時間間隔。
就是根據給定的的時間間隔(單位是毫秒)執行函數。
setInterval(autoChange,3000)就是每3秒執行一次autoChange這個函數。
說下autoChange函數:
有一個current_index變數，用來記錄當前顯示的輪播圖是第幾個。每次執行的時候，都會先給這個變數進行自增1個。
通過循環判斷所有輪播圖中的元素，如果索引與變數的值相同，分別設置對應元素的樣式，否則設置為另一種樣式。
再看hotChange函數:
定義了一個timer變數，也就是上面說的定時器。找出id為button的元素，並找出它下面的li子元素。用了一個for循環來遍歷這個子元素數組。
在循環裡面做了兩件事:
為子元素設置onmouseover事件和onmouseout事件。
其中onmouseout事件裡面就是為timer重新賦值。
而onmouseover事件，則是先判斷timer變數是否有值。有值的話，使用clearInterval清空，也就是停止定時器；無值的話，則通過循環，為其設置樣式。
無值這里的循環內邏輯與autoChange函數是相同的。

希望對你有幫助！

F. 多圖文的網站輪播怎麼做，求源碼

有那種在固定的圖片區域可以自動的更換圖片下面還寫著 1.2.3.4.5 那樣的數字，在網頁圖片輪播代碼放在三四張圖,它實現自動輪播，也可以滑鼠點擊右下角圖片號碼就自動展播。效果如下：
對於自己做網站時如何實現這種網站圖片輪播效果呢？步驟如下：
第一步：將幻燈片swf與js二個文件到主題文件夾中；
第二步：製作要顯示的圖片到主題文件夾中的images中。名字只能為1。2。3。4。jpg；
第三步：將以下兩句放標簽裡面，並需要補充絕對的路徑第四步：以下一句放要放幻燈片的地方，需要補充完整路徑；
<SCRIPT language=JavaScript src="/js/comm.js" type=text/javascript></SCRIPT><SCRIPT language=JavaScript src="/js/swf.js" type=text/javascript></SCRIPT>
第圓啟四步：以下一句放要放幻燈片的地方，需要補充完整路徑；<SCRIPT src='/js/config.inc.js' type=text/javascript></SCRIPT>
第五步：修改js 文件夾中的config.inc.js文件裡面的圖片路徑地址和圖片的寬度高度。JS里的路徑必須填寫完整。
(function($){

var imag=[];

var link=[];

var text=[];imag[0]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/1.jpg");

link[0]=encodeURIComponent("http://www.xuewangzhan.com");

text[0]="學做網站論壇";

imag[1]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/2.jpg");

link[1]=encodeURIComponent("http://www.xuewangzhan.com");

text[1]="學做網站論壇";

imag[2]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/3.jpg");

link[2]=encodeURIComponent("http://www.xuewangzhan.com");

text[2]="學做網站論壇";

imag[3]=encodeURIComponent("http://localhost/10/wp-content/themes/Studio/images/4.jpg");

link[3]=encodeURIComponent("http://www.xuewangzhan.com");

text[3]="學做網站論壇斗伍";
if(imag.length < 4){

for(var i=imag.length;i<4;i++){

imag[i]="http://localhost/10/wp-content/themes/Studio/images/1.jpg";

link[i]=encodeURIComponent("/");

text[i]="學做網站論壇";

}

}
var pic_width=960;

var pic_height=240;

var stop_time=6000;

makeSWF('FrontPageFocusShower','空腔或http://localhost/10/wp-content/themes/Studio/focus2.swf',{

FlashVars : 'pics='+imag.join('|')+'&links='+link.join('|')+'&texts='+text.join('|')+'&stop_time='+stop_time+'',

wmode: 'opaque',

scale: 'noScale',

quality: 'high',

width : pic_width,

height : pic_height

});
})($);

導航:首頁 > 源碼編譯 > 頂部輪播圖源碼

頂部輪播圖源碼

天貓店：

淘寶店專業版：

與頂部輪播圖源碼相關的資料