轮播javascript,轮播图是什么意思

js里面可以写轮播图吗？

当然可以，css3就可以写轮播，只不过js写的轮播图兼容性更好，使用顺畅。

创新互联专业为企业提供祁县网站建设、祁县做网站、祁县网站设计、祁县网站制作等企业网站建设、网页设计与制作、祁县企业网站模板建站服务，10年祁县做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

js实现轮播图主要是搞懂原理，还有js知识就OK啦

图片切换 是index值切换

换下一张 按钮实现功能

到最后一张回到第一张

第一张往上翻回到最后一张

写效果就OK啦

求详细讲解javascript轮播图代码！

!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写的，我注释都添加了，应该看得懂，沉余代码稍多，但勉强可以看看

如何用javascript实现轮播图

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

我想用JavaScript做一个图片轮播

!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

这样就可以图片轮换咯.

浅谈js写轮播图的思路与心得

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制作轮播图

轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。

工具/材料

Sublime Text

01

首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容

02

然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示

03

接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript

04

最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换