顶部轮播图源码_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

});
})($);

导航:首页 > 源码编译 > 顶部轮播图源码

顶部轮播图源码

天猫店：

淘宝店专业版：

与顶部轮播图源码相关的资料