导航:首页 > 万维百科 > 网页轮播设计

网页轮播设计

发布时间: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中的意思

与网页轮播设计相关的知识