导航:首页 > 好看图片 > 简单图片轮播代码
简单图片轮播代码
发布时间：2024-02-09 01:14:22A. vs2012中怎么制作轮播图
一.轮播图制作思路：
就是通过修改每一张罩袭运图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为1，显示出来；而其它的设为0，不显示。从而实现一种图片轮流播放的效果。
思路比较简单：
1.首先让一组图物梁片绝对定位，让其重叠在一起，
2.通过js获取相应的标签,为后面的步骤做铺垫
3、然后制作手动轮播：点击小方块按钮，显示相应图片。
（1）通过设置图片的透明度变化来控制图片的显示效果。（更简单的效果是直接修改display属性，用display:block让该图片显示出来,而设置display:none就可以把其他的图片隐藏起来，这两种方法原理相同。）
（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；
4、点击左右箭头，实现向前向后轮播图片。
二.具体代码实现
首先来看Html结构代码：
<div class="box">
<ul id="boxul">
<li><img src="images/f1.jpg" alt=""></li>
<li><img src="images/f2.jpg" alt=""></li>
<li><img src="images/f3.jpg" alt=""></li>
<li><img src="images/f4.jpg" alt=""></li>
<li><img src="images/f5.jpg" alt=""></li>
</ul>
<ol id="boxol">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<div class="prev" id="prev">prev</div>
<div class="next" id="next">next</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
对其进行样式调整之后，图禅余片都在同一个位置，可以先给第一图片设置为显示，其它的图片设为不显示。
下面来看js的代码：
*{
padding: 0;
margin: 0;
}
/* 长按标签会有蓝色背景 */
*::selection {
background: none;
}
li{
list-style: none;
}
/* 子绝父相 */
.box{
width: 800px;
height: 500px;
margin: 50px auto;
position: relative;
}
/* 设置所有的图片不显示 */
.box ul li {
width: 800px;
height: 500px;
position: absolute;
opacity: 0;
/* 过度显示图片 */
transition: all .8s;
}
/* 设置第一张图片可见 */
.box ul li:first-child {
opacity: 1;
}
/*左右箭头*/
.prev,
.next {
width: 80px;
height: 40px;
position: absolute;
/* 背景色 */
background-color: rgba(0, 0, 0, .7);
/* 文字设置 */
color: white;
text-align: center;
line-height: 40px;
/* 位置 */
top: 50%;
margin-top: -20px;
/* 鼠标移上去的效果 */
cursor: pointer;
}
.next{
right: 0;
}
.prev:active,
.next:active {
background-color: rgba(0, 0, 0, .5);
}
.prev:hover,
.next:hover{
background-color: rgba(0, 0, 0, .6);
}
/* 小方块的位置 */
.box ol{
position: absolute;
right: 50px;
bottom: 20px;
}
.box ol li {
width: 20px;
height: 20px;
border: 1px solid #ccc;
float: left;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.current{
background-color: yellow;
}
img{
width: 800px;
height: 500px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
js的具体代码如下：
//1.1获取ul元素
var boxul = document.getElementById("boxul")
var lis = boxul.querySelectorAll("li")
console.log(lis.length);
//1.2获取ol
var boxol = document.getElementById("boxol")
//获取Ol下面的li
var ol_lis = boxol.querySelectorAll("li")
//console.log(ol_lis);
//获得箭头
var prev = document.getElementById("prev")
var next = document.getElementById("next")
//给ol的li添加点击事件
for(var i = 0 ;i<ol_lis.length;i++){
// console.log(i);
//给oll的i设置index
ol_lis[i].setAttribute("index",i)
ol_lis[i].onclick = function(){
for(var i = 0 ;i<ol_lis.length;i++){
ol_lis[i].className = ""
lis[i].style.opacity = 0
}
this.className = "current"
var index = parseInt(this.getAttribute("index"))
lis[index].style.opacity = 1
}
}
//console.log(ol_lis);
//2.给next按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1
var index = 0;
var old_li = lis[0]
var new_li
next.onclick = function(){
index++
// 到5时，切到第一张图
if(index == lis.length){
index = 0
}
old_li.style.opacity = 0
new_li = lis[index]
new_li.style.opacity = 1
old_li = new_li
//ol下li的颜色变化
for(var i =0;i<lis.length;i++){
ol_lis[i].className = ""
}
ol_lis[index].className = "current"
}
//3.给上一个按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1
// console.log(index);
// old_li.style.opacity =0
// new_li = lis[index]
// new_li.style.opacity = 1
prev.onclick = function(){
// 从第一张图到下标为4的图
if(index == 0){
index = lis.length
}
index--
old_li.style.opacity = 0
new_li = lis[index]
new_li.style.opacity = 1
old_li = new_li
//ol下li的颜色变化
for(var i =0;i<lis.length;i++){
ol_lis[i].className = ""
}
ol_lis[index].className = "current"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
这里面实现的时候结合了css3的transition属性，让图片的切换有一个过渡效果
三、相关知识点。
1、获取DOM元素：
（1）document.getElementsById():通过id获取对象，id是唯一的，可以不获取。
（2）document.getElementsByClassName()：通过class属性获取对象。
（3）document.getElementsByTagName()：通过标签名获取对象。
（4）document.querySelectorAll():可通过所有获取。
2、(1)onmouseover():鼠标移上时事件；
(2)onmouseout():鼠标移开时事件；
3、onclick():单击事件。
B. 用dw如何制作图片轮播效果，超级菜鸟，需要说清楚怎么用dw操作。还有代码怎么放。
怎么有人用我的回答，请手下留情。
原版的 ：
把5张图片（取名01到05）做好，放入images里，在body里插入
<div >
<script type="text/javascript" src="js/flash.js"></script>
</div>
flash.js如下：
var pic_width=450; //图片宽度
var pic_height=205; //图片高度
var button_pos=4; //按扭位置 1左 2右 3上 4下
var stop_time=4000; //图片停留时间(1000为1秒钟)
var show_text=0; //是否显示文字标签 1显示 0不显示
var txtcolor="000000"; //文字色
var bgcolor="DDDDDD"; //背景色
var imag=new Array();
var link=new Array();
var text=new Array();
imag[1]="images/01.jpg";
link[1]="index-welcome.html";
text[1]="标题 1";
imag[2]="images/02.jpg";
link[2]="index-welcome.html";
text[2]="标题 2";
imag[3]="images/03.jpg";
link[3]="index-welcome.html";
text[3]="标题 3";
imag[4]="images/04.jpg";
link[4]="index-welcome.html";
text[4]="标题 4";
imag[5]="images/05.jpg";
link[2]="index-welcome.html";
text[5]="标题 5";
//可编辑内容结束
var swf_height=show_text==1?pic_height+20:pic_height;
var pics="", links="", texts="";
for(var i=1; i<imag.length; i++){
pics=pics+("|"+imag[i]);
links=links+("|"+link[i]);
texts=texts+("|"+text[i]);
}
pics=pics.substring(1);
links=links.substring(1);
texts=texts.substring(1);
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="flash/focus.swf">');
document.write('<param name="quality" value="high"><param name="wmode" value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'">');
document.write('<embed src="flash/focus.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');// JavaScript Document
C. 求CSS图片轮播完整代码
以4张图片为例：
1.基本布局：
将4张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div，
相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。
2.设置动画：
然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。
4张图片，需要切换3次.
根据需要可以对各个图片添加相应的序号和图片简介。
3.代码如下：
复制代码
1 <style>
2 #frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}
3 #dis{position:absolute;left:-50px;top:-10px;opacity:.5}
4 #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
5 #photos img{float:left;width:300px;height:200px}
6 #photos { position: absolute;z-index:9; width: calc(300px * 4);/*---修改图片数量的话需要修改下面的动画参数*/ }
7 .play{ animation: ma 20s ease-out infinite alternate;}
8 @keyframes ma {
9 0%,25% { margin-left: 0px; }
10 30%,50% { margin-left: -300px; }
11 55%,75% { margin-left: -600px; }
12 80%,100% { margin-left: -900px; }
13
14 }
15 </style>
复制代码
复制代码
<div id="frame" >
<div id="photos" class="play">
<img src="images/1.jpg" >
<img src="images/3.jpg" >
<img src="images/4.jpg" >
<img src="images/5.jpg" >
<ul id="dis">
<li>www.scxhdzs.com#www.scxhdzs.com#111</li>
<li>22222222222222</li>
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
</div>
</div>
拿走不谢！
D. jquery图片轮播思路
使用jQuery做轮播图是网页特效中很常见的一个特效。
工具原料：编辑器、浏览器、jQuery
1、实现的总体思路：
首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
2、实现的具体事件处理思路：
事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。
3、简单的代码示例如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>jquery轮播效果图</title>
<scripttype="text/javascript"src="scripts/jquery-1.9.1.js"></script>
<styletype="text/css">
*{
padding:0px;
margin:0px;
}
a{
text-decoration:none;
}
ul{
list-style:outsidenonenone;
}
.slider,.slider-panelimg,.slider-extra{
width:650px;
height:413px;
}
.slider{
text-align:center;
margin:30pxauto;
position:relative;
}
.slider-panel,.slider-nav,.slider-pre,.slider-next{
position:absolute;
z-index:8;
}
.slider-panel{
position:absolute;
}
.slider-panelimg{
border:none;
}
.slider-extra{
position:relative;
}
.slider-nav{
margin-left:-51px;
position:absolute;
left:50%;
bottom:4px;
}
.slider-navli{
background:#3e3e3e;
border-radius:50%;
color:#fff;
cursor:pointer;
margin:02px;
overflow:hidden;
text-align:center;
display:inline-block;
height:18px;
line-height:18px;
width:18px;
}
.slider-nav.slider-item-selected{
background:blue;
}
.slider-pagea{
background:rgba(0,0,0,0.2);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
color:#fff;
text-align:center;
display:block;
font-family:"simsun";
font-size:22px;
width:28px;
height:62px;
line-height:62px;
margin-top:-31px;
position:absolute;
top:50%;
}
.slider-pagea:HOVER{
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next{
left:100%;
margin-left:-28px;
}
</style>
<scripttype="text/javascript">
$(document).ready(function(){
varlength,
currentIndex=0,
interval,
hasStarted=false,//是否已经开始轮播
t=3000;//轮播时间间隔
length=$('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel,.slider-pre,.slider-next').hover(function(){
stop();
$('.slider-page').show();
},function(){
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e){
stop();
varpreIndex=$(".slider-item").filter(".slider-item-selected").index();
currentIndex=$(this).index();
play(preIndex,currentIndex);
},function(){
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click',function(){
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click',function(){
next();
});
/**
*向前翻页
*/
functionpre(){
varpreIndex=currentIndex;
currentIndex=(--currentIndex+length)%length;
play(preIndex,currentIndex);
}
/**
*向后翻页
*/
functionnext(){
varpreIndex=currentIndex;
currentIndex=++currentIndex%length;
play(preIndex,currentIndex);
}
/**
*从preIndex页翻到currentIndex页
*preIndex整数，翻页的起始页
*currentIndex整数，翻到的那页
*/
functionplay(preIndex,currentIndex){
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
*开始轮播
*/
functionstart(){
if(!hasStarted){
hasStarted=true;
interval=setInterval(next,t);
}
}
/**
*停止轮播
*/
functionstop(){
clearInterval(interval);
hasStarted=false;
}
//开始轮播
start();
});
</script>
</head>
<body>
<divclass="slider">
<ulclass="slider-main">
<liclass="slider-panel">
<ahref="
title="图片1"src="images/1.jpg"></a>
</li>
<liclass="slider-panel">
<ahref="#"><imgtitle="图片2"src="images/1.jpg"></a>
</li>
<liclass="slider-panel">
<ahref="#"><imgtitle="图片3"src="images/1.jpg"></a>
</li>
<liclass="slider-panel">
<ahref="#"><imgtitle="图片4"src="images/1.jpg"></a>
</li>
</ul>
<divclass="slider-extra">
<ulclass="slider-nav">
<liclass="slider-item">1</li>
<liclass="slider-item">2</li>
<liclass="slider-item">3</li>
<liclass="slider-item">4</li>
</ul>
<divclass="slider-page">
<aclass="slider-pre"href="javascript:;;"><</a>
<aclass="slider-next"href="javascript:;;">></a>
</div>
</div>
</div>
</body>
</html>
E. 网页轮播图怎么做啊，搜了好多代码自己也做不出来
网页轮播图主要包含三部分：
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>
效果图如下：
另外 新手建议还是直接选用已有的，现在网上很多的！
与简单图片轮播代码相关的资料
- 徐璐爱在春天白衣服图片
- 小欢喜陶红衣服图片
- 小福字串珠简单图片教程
- 衡阳人的衣服图片
- 2019年中国军衣服装图片
- 粉色萌萌的衣服图片
- 幼儿简单手抄报图片
- 哈利波特漫画版人物图片简单
- 很简单的网页设计图片
- 简单云朵画图片
- 古代男子丝绸衣服图片
- 大宝衣服大全图片
- 黑色包裙上面配什么衣服图片
- 生活不简单尽量简单过图片可爱
- 桌子简单绘画图片
- 火龙果的简单图片
- 刘涛同款衣服图片
- 幼儿简单的写话图片
- 50岁衣服图片
- 要不过年了谁给我买件衣服的图片
- 图片简单漫画人物素描
- 简单网站源码下载免费有图片
- 努力奋斗简单的图片
- 韩国男宝衣服搭配图片
- 简单清淡少油健康图片
- 坐火车穿什么衣服图片
- 60年的衣服图片
- 衣服带耳机图片
- 吃石榴衣服染色的图片
- 自制简单小狗背心图片
- 医院衣服图片大全绿色
- 黑色衣服白色头发的古风男女图片
- 古风蓝色衣服真人图片
- 卡通图片简单好画手绘
- 简单的七步法图片
- 室内布置图片大全简单
- 八个月宝宝的衣服图片
- 英语图文并茂的图片怎么做简单
- 给我找个简单桃子妹妹姐姐图片
- 简单的布墙画图片
- 奇迹霸者衣服图片
- 彩铅素描简单步骤图片