13518219792
当然可以，css3就可以写轮播，只不过js写的轮播图兼容性更好，使用顺畅。
创新互联专业为企业提供祁县网站建设、祁县做网站、祁县网站设计、祁县网站制作等企业网站建设、网页设计与制作、祁县企业网站模板建站服务，10年祁县做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
js实现轮播图主要是搞懂原理，还有js知识就OK啦
图片切换 是index值切换
换下一张 按钮实现功能
到最后一张回到第一张
第一张往上翻回到最后一张
写效果就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很早时候写的/title
script type="text/javascript" src=""/script
script type="text/javascript"
(function($) {
$.fn.pluginName = function(options) {
//默认配置
var defaults = {
speed: "3000",
flag: true//自动轮播
};
//合并参数，把外部传进来的参数和defaults参数合并，传进来的优先级大
var opts = $.extend(defaults, options);
return this.each(function(){
var _this=$(this);//把当前对象赋值给_this，防止下面$(this)被覆盖
var ads=_this.find('ul.myXX').children('li');//ads就是所有li
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中，这个都是独立的构件
var index=0;//设置当前索引为0，这个变量一会用于记录轮播到第几个图上
var flag = opts.flag;//自动轮播
var $lis_all = _this.find('ul.myDD').children('li');//对着下面的html看myDD里面所有li
//遍历小图的li标签，给li标签添加click事件
ads.each(function(i) {//i是索引，你可以参考each这个函数的参数项
$(this).click(function(){//添加click事件
index = i;//赋值索引
//这几行就是换图片标题和显示了，不多讲
$(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);
});
});
/*自动切换效果*/
var switchover;
if(flag){
//switchover赋值为setInterval定时执行对象，目前是3秒执行一次
switchover = setInterval(function(){
var todo = (index+1)%n;
ads.eq(todo).click();//执行内容就是li绑定单击事件
},opts.speed);//执行事件就是传进来的参数
}
/*鼠标放上去 暂停播放*/
$lis_all.hover(function(){
clearInterval(switchover);//清除switchover
flag = false;
},function(){
flag = true;
//从新执行
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="增加一些更一些更好玩的内容"img src="hd010.gif" width="110" height="54" border="0" //a/li
lia href="#" title="增些更好玩的内容增加一些更好玩的内容"img src="hd01.gif" width="110" height="54" border="0" //a/li
/ul
/div
script language="javascript"
$(function(){
$('#myDiv').pluginName();
});
/script
/body
/html
这是第一次用jq写的，我注释都添加了，应该看得懂，沉余代码稍多，但勉强可以看看
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'; //把初始状态定义好
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上的话，那么鼠标移入，下面对饮的li会不起作用，
124 clearInterval(timer); //因为li的层级比较高，所以应该把事件绑定到大的div上
125 }
126 wrap.onmouseout = function(){
127 timer = setInterval(autoPlay,2000);
128 //setInterval(autoPlay,2000); 不能这么写，凡是开的定时器，必须得赋值，要不然总会多开一个定时器，导致速度加快
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;//当前显示的图片索引(1-5)
var timer;
function switchImg(){
// 当前这一张隐藏
document.getElementById("img"+index).style.display="none";
// 如果当前显示的图片索引没有到最大值就继续增加
if(index5){index++;}
// 否则从第一个图片开始显示，索引从0开始
else{index=1;}
// 显示第index张
document.getElementById("img"+index).style.display="block";
// 下一秒,再执行本方法
timer = window.setTimeout("switchImg()",1000);
}
/script
/head
body onload="switchImg()"
!--放五张图,构造一个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 、 首先我们需要在开始时将我们锁需要的封装函数链接进来。
列如 script type="text/javascript" src="animate-2.0.1.js"/script
而且我们必须得得到所有需要用到的对象用 getElementById 、getElementsByTagName，然后把需要一个规范的命名。
2 、第二部我们创建一个定时器先让轮播图中所有图片的 li 动起来
右边点击函数跟定时器所运动的函数一个样，所以我们可以封装一个函数abc（）；他们是共用的；
3 、 写出左边点击按钮事件的函数，这样就如上abc（）；差不多只是修改一些东西就行了；
4 、讲小圆点的样式改变封装成一个函数就是下面的chnage（）；
然后还得监听点击每个小圆点的事件，所以可以用for + onclick 讲每个小圆点点击事件给写出来。
难点：
1 、函数截留，当我们点击函数正在执行时，如果多次点击就会出现图片运动混乱的现象，这是我们需要用if(picDiv.isanimated) {return;}，
2 、cloneNode（）函数picUl.appendChild(picLi[0].cloneNode(true))
轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。
工具/材料
Sublime Text
01
首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容
02
然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示
03
接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript
04
最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换
