導航:首頁 > 萬維百科 > 網頁輪播設計

網頁輪播設計

發布時間:2020-08-04 13:11:32

1、網頁設計 圖片輪播,將滑鼠放在圖片上,圖片會自動播放,代碼怎麼改?

首先要做的不是把滑鼠放上去輪播,而是先讓圖片能夠自動輪播才行
下面代碼,有詳解,你可以參考一下

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!--標准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定義的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">下方懸浮標題</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定時輪播
<!--<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>-->
</li>
</ul>
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 額外增加的一個節點(循環輪播:第一個節點是最後一張輪播) -->
<div class="mui-slider-item mui-slider-item-plicate">
<a href="#">
<img src="../images/yuantiao.jpg">
<p class="mui-slider-title">靜靜看這世界</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡覺</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
<p class="mui-slider-title">想要一間這樣的木屋,靜靜的喝咖啡</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
<p class="mui-slider-title">Color of SIP CBD</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
<p class="mui-slider-title">靜靜看這世界</p>
</a>
</div>
<!-- 額外增加的一個節點(循環輪播:最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-plicate">
<a href="#">
<img src="../images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡覺</p>
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
// alert("!!!!!");
var slider = mui("#slider");
slider.slider({
interval: 5000
});

</script>
</html>

2、網頁設計dreamweaver中怎樣製作輪播廣告

輪播的話要麼結合flash來做那種輪播效果,要麼就是直接使用代碼編輯,網上有相關的代碼的,稍微修改即可使用,另外建站用開源的cms程序都有這個效果,自己根據需要替換圖片即可

3、網頁設計中如何讓圖片輪播

網頁設計中讓圖片輪播,需要用到的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)
}
這樣是能實現輪播的。

4、網頁設計 圖片輪播的問題 大家幫忙看看(詳細加分)

這個 你只要知道下面幾個就好了
1.if(index<5){index++;} 這里的5就是圖片的張數 圖片有幾張 寫幾張
2.timer = window.setTimeout("switchImg()",5000); 這里的5000是轉換時間 數字越小越快
3.<img src="hang.jpg" width="15" height="30" id="img1">
......
這些是你要展示的圖片 src="hang.jpg" 這個是圖片路徑 width 圖片寬 height 圖片高 id 定義的名字

主要就這3個 其他的你可以不管 如果也就只有5張圖片 就把第3點裡面的換掉就好了

5、怎麼製作圖片輪播的網頁,求高手

建議你用Axure來做網站原型圖
下載一些特效部件,做這樣的動態效果非常簡單
不用糾結代碼
只要做可視化邏輯設計就行了

6、做一個輪播圖頁面怎麼做

網頁設計中讓圖片輪播,需要用到的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)
}
這樣是能實現輪播的。

7、我想在網頁設計上弄圖片輪播的效果。求個代碼。

直接在網路上面搜一下

js特效,就有一大堆了。這里給你的代碼你也調試不了。
去那些js特效網可以直接調試。希望可以幫到你。
我的網站是
sb網
,你可以網路一下,借鑒。

8、網頁設計 圖片輪播的按鈕問題 大家幫忙看看(詳細加分)

按你的這思路改的,不過一般情況不會這么去寫, id="img1" id="img2" 這兩個屬性可以去了,<DIV>裡面添加一個屬性 id="images"
<html>
<head>
<title>Untitled</title>
<style>
img{display:none;}
</style>
<script>
var index=1;
var timer;
var ImageList;
function switchImg(id){
/*
document.getElementById("img"+index).style.display="none";
if(index<2){index++;}
else{index=1;}
document.getElementById("img"+index).style.display="block";
*/
ImageList = document.getElementById(id).getElementsByTagName('img');
if(ImageList){
timer = window.setInterval(changeImage,1000);
}
}
function changeImage(){
index = ++index >= ImageList.length ? 0 : index;
for(var i = 0; i < ImageList.length; i++){
ImageList[i].style.display = 'none';
}
ImageList[index].style.display = 'block';
}
</script>
</head>
<body onLoad="switchImg('images')">
<div id="images" style="border:1px solid black;width:300px;height:100px;">
<img src="hang.jpg" width="15" height="30" id="img1">
<img src="beijing111.jpg" width="20" height="30" id="img2">
</div>
</body>
</html>

9、網頁設計圖片輪播的代碼插入問題。

修改已有的代碼要謹慎,主要是要注意路徑的問題,還有就是樣式的問題,我也經常改輪播代碼,我都是現在要插入的代碼裡面先從頭到尾看一遍,確定這個輪播的樣式跟原來的樣式不會有沖突,如果有則修改或刪除,然後就看輪播的部分,大體框架怎麼拉的,還有就是它調用的js和css文件是在哪個路徑下面,已經輪播圖片的路徑,修改輪播圖片的寬高度,全部修改好了之後,先把輪播的框架拉過去,再添加link調用文件,再把js、css、文件放到正確路徑下,還有圖片也放到正確路徑下,這樣就ok了,如果這時候原來的網頁發生了變形,不要慌,仔細看看樣式文件,看看是否依然存在沖突。
建議在原網頁中將輪播部分用注釋符號在輪播的開頭和結尾做個標記,以免後期修改很難找到,或漏找等問題。如:
<!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\=輪播部分開始=///////////////////////////////////////////-->
=輪播部分=

<!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\=輪播部分結束=///////////////////////////////////////////-->

10、網頁怎樣做輪播圖?

網頁設計中讓圖片輪播,需要用到的JS和比較好的div+css布局意識,主要還是需要了解left,top在css中的意思

與網頁輪播設計相關的知識