簡單圖片輪播代碼

A. 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>

效果圖如下：

另外 新手建議還是直接選用已有的，現在網上很多的！