當(dāng)然可以，css3就可以寫輪播，只不過js寫的輪播圖兼容性更好，使用順暢。
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供祁縣網(wǎng)站建設(shè)、祁縣做網(wǎng)站、祁縣網(wǎng)站設(shè)計(jì)、祁縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、祁縣企業(yè)網(wǎng)站模板建站服務(wù)，10年祁縣做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
js實(shí)現(xiàn)輪播圖主要是搞懂原理，還有js知識(shí)就OK啦
圖片切換 是index值切換
換下一張 按鈕實(shí)現(xiàn)功能
到最后一張回到第一張
第一張往上翻回到最后一張
寫效果就OK啦
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""
html?xmlns=""
head
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/
title很早時(shí)候?qū)懙?title
script?type="text/javascript"?src=""/script
script?type="text/javascript"
(function($)?{?????
$.fn.pluginName?=?function(options)?{???
//默認(rèn)配置
var?defaults?=?{
speed:?"3000",
flag:?true//自動(dòng)輪播
};
//合并參數(shù)，把外部傳進(jìn)來的參數(shù)和defaults參數(shù)合并，傳進(jìn)來的優(yōu)先級(jí)大
var?opts?=?$.extend(defaults,?options);
return?this.each(function(){
var?_this=$(this);//把當(dāng)前對象賦值給_this，防止下面$(this)被覆蓋
var?ads=_this.find('ul.myXX').children('li');//ads就是所有l(wèi)i
var?n?=?ads.length;//li的長度就是有幾張圖片輪播
var?title=_this.find('ul.myXX').children('li.selected').children('a').attr('title');//找到要顯示的title
_this.find('#mytitle').html(title);//把title賦值到mytitle中，這個(gè)都是獨(dú)立的構(gòu)件
var?index=0;//設(shè)置當(dāng)前索引為0，這個(gè)變量一會(huì)用于記錄輪播到第幾個(gè)圖上
var?flag?=?opts.flag;//自動(dòng)輪播
var?$lis_all?=?_this.find('ul.myDD').children('li');//對著下面的html看myDD里面所有l(wèi)i
//遍歷小圖的li標(biāo)簽，給li標(biāo)簽添加click事件
ads.each(function(i)?{//i是索引，你可以參考each這個(gè)函數(shù)的參數(shù)項(xiàng)
$(this).click(function(){//添加click事件
index?=?i;//賦值索引
//這幾行就是換圖片標(biāo)題和顯示了，不多講
$(this).addClass("selected").siblings("li").removeClass("selected");
title=_this.find('ul.myXX').children('li.selected').children('a').attr('title');
$lis_all.eq(index).fadeIn("slow").addClass("show").siblings("li").fadeOut("fast").removeClass("show");
_this.find('#mytitle').html(title);
});????????
});
/*自動(dòng)切換效果*/
var?switchover;
if(flag){
//switchover賦值為setInterval定時(shí)執(zhí)行對象，目前是3秒執(zhí)行一次
switchover?=?setInterval(function(){
var?todo?=?(index+1)%n;
ads.eq(todo).click();//執(zhí)行內(nèi)容就是li綁定單擊事件
},opts.speed);//執(zhí)行事件就是傳進(jìn)來的參數(shù)
}
/*鼠標(biāo)放上去?暫停播放*/
$lis_all.hover(function(){
clearInterval(switchover);//清除switchover
flag?=?false;
},function(){
flag?=?true;
//從新執(zhí)行
switchover?=?setInterval(function(){
var?todo?=?(index+1)%n;
ads.eq(todo).click();
},opts.speed);
});
});
};???
})(jQuery);
/script
/head
body
style?type="text/css"
.myDD{
overflow:hidden;
width:458px;
height:253px;
}
.myDD?li{
display:none;
}
.myDD?li.show{
display:block;
}
/style
div?id="myDiv"
div?id="mytitle"/div
ul?class="myDD"
li?class="show"img?src="my_li.jpg"?width="458"?height="253"?border="0"?//li
liimg?src="hd010.gif"?width="458"?height="253"?border="0"?//li
liimg?src="hd01.gif"?width="458"?height="253"?border="0"?//li
/ul
ul?class="myXX"
li?class="selected"a?href="#"?title="增加一些更"img?src="my_li.jpg"?width="110"?height="54"??border="0"?//a/li
lia?href="#"?title="增加一些更一些更好玩的內(nèi)容"img?src="hd010.gif"?width="110"?height="54"??border="0"?//a/li
lia?href="#"?title="增些更好玩的內(nèi)容增加一些更好玩的內(nèi)容"img?src="hd01.gif"?width="110"?height="54"??border="0"?//a/li
/ul
/div
script?language="javascript"
$(function(){
$('#myDiv').pluginName();
});
/script
/body
/html
這是第一次用jq寫的，我注釋都添加了，應(yīng)該看得懂，沉余代碼稍多，但勉強(qiáng)可以看看
function getStyle(obj,name){
2 if(obj.currentStyle){
3 return obj.currentStyle[name];
4 } else{
5 return getComputedStyle(obj,false)[name];
6 }
7 }
8
9 function startMove(obj, json, fnEnd) {
10 clearInterval(obj.timer);
11 obj.timer = setInterval(function() {
12 var bStop = true;
13 for (var attr in json) {
14 var cur = 0;
15 if (attr == "opacity") {
16 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
17 } else {
18 cur = parseInt(getStyle(obj, attr))
19 }
20 var speed = (json[attr] - cur) / 10;
21 speed = speed 0 ? Math.ceil(speed) : Math.floor(speed);
22 if (cur !== json[attr]) {
23 bStop = false;
24 };
25 if (attr == "opacity") {
26 obj.style.opacity = (speed + cur) / 100;
27 obj.style.filter = 'alpha(opacity:' + (speed + cur) + ')';
28 } else {
29 obj.style[attr] = cur + speed + 'px';
30 }
31 }
32 if (bStop) {
33 clearInterval(obj.timer);
34 if (fnEnd) fnEnd();
35 }
36 }, 30)
37 }
然后寫輪播小案例
1 !DOCTYPE html
2 html lang="en"
3
4 head
5 meta charset="UTF-8"
6 title淘寶輪播/title
7 style
8 ul,
9 li {
10 list-style: none;
11 margin: 0;
12 padding: 0;
13 }
14
15 #wrap {
16 width: 400px;
17 height: 225px;
18 margin: 0 auto;
19 position: relative;
20 overflow: hidden;
21 }
22
23 li {
24 float: left;
25 }
26
27 #tips li {
28 margin: 5px;
29 border: 1px solid #f60;
30 width: 20px;
31 height: 20px;
32 line-height: 20px;
33 text-align: center;
34 color: white;
35 cursor: pointer;
36 }
37
38 .active {
39 background: #f60;
40 }
41
42 img {
43 vertical-align: top;
44 width: 400px;
45 }
46
47 #content {
48 width: 2400px;
49 position: absolute;
50 left: -1200px;
51 }
52
53 #content li {
54 float: left;
55 }
56
57 #tips {
58 position: absolute;
59 right: 20px;
60 bottom: 5px;
61 }
62 /style
63 /head
64
65 body
66 div id="wrap"
67 ul id="content"
68 liimg src="img3/1.jpg" alt=""/li
69 liimg src="img3/2.jpg" alt=""/li
70 liimg src="img3/3.jpg" alt=""/li
71 liimg src="img3/4.jpg" alt=""/li
72 liimg src="img3/5.jpg" alt=""/li
73 liimg src="img3/6.jpg" alt=""/li
74 /ul
75 ul id="tips"
76 li1/li
77 li2/li
78 li3/li
79 li4/li
80 li5/li
81 /ul
82 /div
83 script src="move.js"/script
84 script
85 var wrap = document.getElementById('wrap');
86 var content = document.getElementById('content');
87 var tips = document.getElementById('tips');
88 var aLi = tips.getElementsByTagName('li');
89 var now = 0;
90 //var
91 for (var i = 0; i aLi.length; i++) {
92 aLi[0].className = 'active'; //把初始狀態(tài)定義好
93 content.style.left = 0 +'px';
94 aLi[i].index = i; //自定義屬性
95 aLi[i].onclick = function() {
96 now = this.index;
97 play();
98 }
99 }
100
101 function play() {
102 for (var j = 0; j aLi.length; j++) {
103 aLi[j].className = '';
104 }
105 aLi[now].className = 'active';
106
107 //this.index = now; //反過來寫就不對了大兄弟
108 //content.style.left = -400 * this.index + 'px';
109 startMove(content, {
110 left: -400 * now, //你還真別說，json格式就是這么寫的
111 });
112 }
113
114 function autoPlay() {
115 now++;
116 if (now == aLi.length) {
117 now = 0;
118 }
119 play();
120 }
121
122 var timer = setInterval(autoPlay, 2000);
123 wrap.onmouseover = function(){ //這里如果把事件綁定到ul上的話，那么鼠標(biāo)移入，下面對飲的li會(huì)不起作用，
124 clearInterval(timer); //因?yàn)閘i的層級(jí)比較高，所以應(yīng)該把事件綁定到大的div上
125 }
126 wrap.onmouseout = function(){
127 timer = setInterval(autoPlay,2000);
128 //setInterval(autoPlay,2000); 不能這么寫，凡是開的定時(shí)器，必須得賦值，要不然總會(huì)多開一個(gè)定時(shí)器，導(dǎo)致速度加快
129 }
130 /script
131 /body
132
133 /html
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
html
head
titleUntitled/title
styleimg{display:none;}
.btn{border:1px solid black;width:30px;height:30px;display:inline;margin-right:5px;}
/style
script
var index=1;//當(dāng)前顯示的圖片索引(1-5)
var timer;
function switchImg(){
// 當(dāng)前這一張隱藏
document.getElementById("img"+index).style.display="none";
// 如果當(dāng)前顯示的圖片索引沒有到最大值就繼續(xù)增加
if(index5){index++;}
// 否則從第一個(gè)圖片開始顯示，索引從0開始
else{index=1;}
// 顯示第index張
document.getElementById("img"+index).style.display="block";
// 下一秒,再執(zhí)行本方法
timer = window.setTimeout("switchImg()",1000);
}
/script
/head
body onload="switchImg()"
!--放五張圖,構(gòu)造一個(gè)ImageList--
div style="border:1px solid black;width:300px;height:100px;"
img id="img1" src="back1.jpg"
img id="img2" src="back2.jpg"
img id="img3" src="logo.gif"
img id="img4" src="shop.gif"
img id="img5" src="shop2.gif"
/div
div id="btn1" onclick="manuImg()"/div
div id="btn2"/div
div id="btn3"/div
div id="btn4"/div
div id="btn5"/div
/body
/html
這樣就可以圖片輪換咯.
1 、 首先我們需要在開始時(shí)將我們鎖需要的封裝函數(shù)鏈接進(jìn)來。
列如 script type="text/javascript" src="animate-2.0.1.js"/script
而且我們必須得得到所有需要用到的對象用 getElementById 、getElementsByTagName，然后把需要一個(gè)規(guī)范的命名。
2 、第二部我們創(chuàng)建一個(gè)定時(shí)器先讓輪播圖中所有圖片的 li 動(dòng)起來
右邊點(diǎn)擊函數(shù)跟定時(shí)器所運(yùn)動(dòng)的函數(shù)一個(gè)樣，所以我們可以封裝一個(gè)函數(shù)abc（）；他們是共用的；
3 、 寫出左邊點(diǎn)擊按鈕事件的函數(shù)，這樣就如上abc（）；差不多只是修改一些東西就行了；
4 、講小圓點(diǎn)的樣式改變封裝成一個(gè)函數(shù)就是下面的chnage（）；
然后還得監(jiān)聽點(diǎn)擊每個(gè)小圓點(diǎn)的事件，所以可以用for + onclick 講每個(gè)小圓點(diǎn)點(diǎn)擊事件給寫出來。
難點(diǎn)：
1 、函數(shù)截留，當(dāng)我們點(diǎn)擊函數(shù)正在執(zhí)行時(shí)，如果多次點(diǎn)擊就會(huì)出現(xiàn)圖片運(yùn)動(dòng)混亂的現(xiàn)象，這是我們需要用if(picDiv.isanimated) {return;}，
2 、cloneNode（）函數(shù)picUl.appendChild(picLi[0].cloneNode(true))
輪播圖是每個(gè)網(wǎng)站中必不可少的元素，那么如何用JS制作輪播圖呢？下面我就給大家分享一下。
工具/材料
Sublime Text
01
首先需要在Sublime中創(chuàng)建HTML文檔，然后在文檔的body區(qū)域中加入如下圖所示的輪播圖內(nèi)容
02
然后我們需要在style標(biāo)簽中給所添加的輪播圖內(nèi)容聲明樣式，如下圖所示
03
接下來我們就需要在script標(biāo)簽中實(shí)現(xiàn)輪播圖的動(dòng)畫腳本內(nèi)容了，如下圖所示，注意script標(biāo)簽的type類型一定要是javascript
04
最后我們運(yùn)行界面程序，你就會(huì)看到如下圖所示的輪播圖了，點(diǎn)擊左右的箭頭和中間的圓點(diǎn)都可以進(jìn)行輪播圖的切換
重慶分公司
重慶分公司
