❶ 做一个轮播图页面怎么做
网页设计中让图片轮播，需要用到的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>
效果图如下：
另外 新手建议还是直接选用已有的，现在网上很多的！