原生js和jquery实现图片轮播特效

（1）首先是页面的结构部分

对于我这种左右切换式

1.首先是个外围部分（其实也就是最外边的整体wrapper)

2.接着就是你设置图片轮播的地方（也就是一个banner吧）

3.然后是一个图片组（可以用新的div 也可以直接使用 ul-->li形式）

4.然后是图片两端的左箭头和右箭头
5.然后是一个透明背景层，放在图片底部

6.然后是一个图片描述info层，放在透明背景层的左下角（div 或 ul-->li)

7.然后是一个按钮层，用来定位图片组的index吧,放在透明背景层的右下角(div 或 ul-->li)

由此，可以先构造出html结构

?


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

<div id="wrapper"><!-- 最外层部分 -->

    <div id="banner"><!-- 轮播部分 -->

      <ul class="imgList"><!-- 图片部分 -->

      <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>

      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>

      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>

      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>

      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>

      </ul>

      <img src="./img/prev.png" width="20px" height="40px" id="prev">

      <img src="./img/next.png" width="20px" height="40px" id="next">

      <div class="bg"></div> <!-- 图片底部背景层部分-->

      <ul class="infoList"><!-- 图片左下角文字信息部分 -->

        <li class="infoOn">puss in boots1</li>

        <li>puss in boots2</li>

        <li>puss in boots3</li>

        <li>puss in boots4</li>

        <li>puss in boots5</li>

      </ul>

      <ul class="indexList"><!-- 图片右下角序号部分 -->

        <li class="indexOn">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

      </ul>

    </div>

  </div>

相对于之前，知识增多了两个箭头img标签

（2）CSS样式部分（图片组的处理）跟淡入淡出式就不一样了

淡入淡出只需要显示或者隐藏对应序号的图片就行了，直接通过display来设定

左右切换式则是采用图片li 浮动，父层元素ul 总宽为总图片宽，并设定为有限banner宽度下隐藏超出宽度的部分

然后当想切换到某序号的图片时，则采用其ul 定位 left样式设定相应属性值实现

比如显示第一张图片初始定位left为0px, 要想显示第二张图片则需要left:-400px 处理

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<style type="text/css">

  body,div,ul,li,a,img{margin: 0;padding: 0;}

  ul,li{list-style: none;}

  a{text-decoration: none;}

  #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}

  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}

  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}

  .imgList li{float:left;display: inline;}

  #prev,

  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}

  #prev{left: 10px;}

  #next{right: 10px;}

  #prev:hover,

  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}

  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}

  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}

  .infoList li{display: none;}

  .infoList .infoOn{display: inline;color: white;}

  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}

  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}

  .indexList .indexOn{background: red;font-weight: bold;color: white;}

</style>

（3）页面基本已经构建好久可以进行js的处理了

一、jQuery方式

照常先说jq处理

1.全局变量等

?


1

2

var curIndex = 0, //当前index

     imgLen = $(".imgList li").length; //图片总数

2.自动切换定时器处理

?


1

2

3

4

5

6

7

8

9

10

// 定时器自动变换2.5秒每次

var autoChange = setInterval(function(){

  if(curIndex < imgLen-1){

    curIndex ++;

  }else{

    curIndex = 0;

  }

  //调用变换处理函数

  changeTo(curIndex);

},2500);

3.为左右箭头添加事件处理

左箭头

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

//左箭头滑入滑出事件处理

$("#prev").hover(function(){

  //滑入清除定时器

  clearInterval(autoChange);

},function(){

  //滑出则重置定时器

  autoChangeAgain();

});

//左箭头点击处理

$("#prev").click(function(){

  //根据curIndex进行上一个图片处理

  curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);

  changeTo(curIndex);

});

右箭头

?


1

2

3

4

5

6

7

8

9

10

11

12

13

//右箭头滑入滑出事件处理

 $("#next").hover(function(){

   //滑入清除定时器

   clearInterval(autoChange);

 },function(){

   //滑出则重置定时器

   autoChangeAgain();

 });

 //右箭头点击处理

 $("#next").click(function(){

   curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;

   changeTo(curIndex);

 });

其中autoChangeAgain()就是一个重置定时器函数

?


1

2

3

4

5

6

7

8

9

10

11

12

//清除定时器时候的重置定时器--封装

  function autoChangeAgain(){

      autoChange = setInterval(function(){

      if(curIndex < imgLen-1){

        curIndex ++;

      }else{

        curIndex = 0;

      }

    //调用变换处理函数

      changeTo(curIndex);

    },2500);

    }

其中changeTo()就是一个图片切换的处理函数

?


1

2

3

4

5

6

function changeTo(num){

    var goLeft = num * 400;

    $(".imgList").animate({left: "-" + goLeft + "px"},500);

    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");

    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");

  }

每传入一个图片序号，则按理进行goLeft

4.为右下角的那几个li 按钮绑定事件处理

?


1

2

3

4

5

6

7

8

9

10

//对右下角按钮index进行事件绑定处理等

  $(".indexList").find("li").each(function(item){

    $(this).hover(function(){

      clearInterval(autoChange);

      changeTo(item);

      curIndex = item;

    },function(){

      autoChangeAgain();

    });

  });

jq就是这样，简便，原生代码量就有些多了

完整代码

?


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

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片轮播 jq(左右切换)</title>

<style type="text/css">

  body,div,ul,li,a,img{margin: 0;padding: 0;}

  ul,li{list-style: none;}

  a{text-decoration: none;}

  #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}

  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}

  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}

  .imgList li{float:left;display: inline;}

  #prev,

  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}

  #prev{left: 10px;}

  #next{right: 10px;}

  #prev:hover,

  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}

  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}

  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}

  .infoList li{display: none;}

  .infoList .infoOn{display: inline;color: white;}

  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}

  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}

  .indexList .indexOn{background: red;font-weight: bold;color: white;}

</style>

</head>

<body>

  <div id="wrapper"><!-- 最外层部分 -->

    <div id="banner"><!-- 轮播部分 -->

      <ul class="imgList"><!-- 图片部分 -->

        <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>

      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>

      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>

      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>

      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>

      </ul>

      <img src="./img/prev.png" width="20px" height="40px" id="prev">

      <img src="./img/next.png" width="20px" height="40px" id="next">

      <div class="bg"></div> <!-- 图片底部背景层部分-->

      <ul class="infoList"><!-- 图片左下角文字信息部分 -->

        <li class="infoOn">puss in boots1</li>

        <li>puss in boots2</li>

        <li>puss in boots3</li>

        <li>puss in boots4</li>

        <li>puss in boots5</li>

      </ul>

      <ul class="indexList"><!-- 图片右下角序号部分 -->

        <li class="indexOn">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

      </ul>

    </div>

  </div>

  <script type="text/javascript" src="./js/jquery.min.js"></script>

  <script type="text/javascript">

  var curIndex = 0, //当前index

      imgLen = $(".imgList li").length; //图片总数

     // 定时器自动变换2.5秒每次

  var autoChange = setInterval(function(){

    if(curIndex < imgLen-1){

      curIndex ++;

    }else{

      curIndex = 0;

    }

    //调用变换处理函数

    changeTo(curIndex);

  },2500);

   //左箭头滑入滑出事件处理

  $("#prev").hover(function(){

    //滑入清除定时器

    clearInterval(autoChange);

  },function(){

    //滑出则重置定时器

    autoChangeAgain();

  });

  //左箭头点击处理

  $("#prev").click(function(){

    //根据curIndex进行上一个图片处理

    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);

    changeTo(curIndex);

  });

  //右箭头滑入滑出事件处理

  $("#next").hover(function(){

    //滑入清除定时器

    clearInterval(autoChange);

  },function(){

    //滑出则重置定时器

    autoChangeAgain();

  });

  //右箭头点击处理

  $("#next").click(function(){

    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;

    changeTo(curIndex);

  });

  //对右下角按钮index进行事件绑定处理等

  $(".indexList").find("li").each(function(item){

    $(this).hover(function(){

      clearInterval(autoChange);

      changeTo(item);

      curIndex = item;

    },function(){

      autoChangeAgain();

    });

  });

  //清除定时器时候的重置定时器--封装

  function autoChangeAgain(){

      autoChange = setInterval(function(){

      if(curIndex < imgLen-1){

        curIndex ++;

      }else{

        curIndex = 0;

      }

    //调用变换处理函数

      changeTo(curIndex);

    },2500);

    }

  function changeTo(num){

    var goLeft = num * 400;

    $(".imgList").animate({left: "-" + goLeft + "px"},500);

    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");

    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");

  }

  </script>

</body>

</html>

二、js 原生实现

js原生大概也就是模拟jq的实现思路

1.全局变量等

?


1

2

3

4

5

var curIndex = 0, //当前index

      imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组

      imgLen = imgArr.length,

      infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组

      indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组

2.自动切换定时器处理

?


1

2

3

4

5

6

7

8

9

10

  // 定时器自动变换2.5秒每次

var autoChange = setInterval(function(){

  if(curIndex < imgLen -1){

    curIndex ++;

  }else{

    curIndex = 0;

  }

  //调用变换处理函数

  changeTo(curIndex);

},2500);

同样的，有一个重置定时器的函数

?


1

2

3

4

5

6

7

8

9

10

11

12

//清除定时器时候的重置定时器--封装

 function autoChangeAgain(){

     autoChange = setInterval(function(){

     if(curIndex < imgLen -1){

       curIndex ++;

     }else{

       curIndex = 0;

     }

   //调用变换处理函数

     changeTo(curIndex);

   },2500);

   }

3.因为有一些class呀，所以来几个class函数的模拟也是需要的

?


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

//通过class获取节点

 function getElementsByClassName(className){

   var classArr = [];

   var tags = document.getElementsByTagName(‘*‘);

   for(var item in tags){

     if(tags[item].nodeType == 1){

       if(tags[item].getAttribute(‘class‘) == className){

         classArr.push(tags[item]);

       }

     }

   }

   return classArr; //返回

 }

 // 判断obj是否有此class

 function hasClass(obj,cls){  //class位于单词边界

   return obj.className.match(new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘));

  }

  //给 obj添加class

 function addClass(obj,cls){

   if(!this.hasClass(obj,cls)){

      obj.className += cls;

   }

 }

 //移除obj对应的class

 function removeClass(obj,cls){

   if(hasClass(obj,cls)){

     var reg = new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘);

        obj.className = obj.className.replace(reg,‘‘);

   }

 }

4.要左右切换，就得模拟jq的animate-->left .

我的思路就是动态地设置element.style.left 进行定位。因为要有一个渐进的过程，所以加上的一点点阶段处理。

定位的时候left的设置也是有点复杂的..要考虑方向等情况

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//图片组相对原始左移dist px距离

 function goLeft(elem,dist){

   if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"

     elem.style.left = "0px";

   }

   var toLeft; //判断图片移动方向是否为左

   dist = dist + parseInt(elem.style.left); //图片组相对当前移动距离

   if(dist<0){ 

     toLeft = false;

     dist = Math.abs(dist);

   }else{

     toLeft = true;

   }

   for(var i=0;i<= dist/20;i++){ //这里设定缓慢移动，10阶每阶40px

     (function(_i){

       var pos = parseInt(elem.style.left); //获取当前left

       setTimeout(function(){

         pos += (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变

         //console.log(pos);

         elem.style.left = pos + "px";

       },_i * 25); //每阶间隔50毫秒

     })(i);

   }

 }

上头也看到了，我初始了left的值为0px

我试过了，如果不初始或者把初始的left值写在行内css样式表里边，就总会报错取不到

所以直接在js中初始化或者在html中内嵌初始化也可。

5.接下来就是切换的函数实现了，比如要切换到序号为num的图片

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

//左右切换处理函数

  function changeTo(num){

    //设置image

    var imgList = getElementsByClassName("imgList")[0];

    goLeft(imgList,num*400); //左移一定距离

    //设置image 的 info

    var curInfo = getElementsByClassName("infoOn")[0];

    removeClass(curInfo,"infoOn");

    addClass(infoArr[num],"infoOn");

    //设置image的控制下标 index

    var _curIndex = getElementsByClassName("indexOn")[0];

    removeClass(_curIndex,"indexOn");

    addClass(indexArr[num],"indexOn");

  }

6.然后再给左右箭头还有右下角那堆index绑定事件处理

?


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

//给左右箭头和右下角的图片index添加事件处理

 function addEvent(){

  for(var i=0;i<imgLen;i++){

    //闭包防止作用域内活动对象item的影响

    (function(_i){

    //鼠标滑过则清除定时器，并作变换处理

    indexArr[_i].onmouseover = function(){

      clearTimeout(autoChange);

      changeTo(_i);

      curIndex = _i;

    };

    //鼠标滑出则重置定时器处理

    indexArr[_i].onmouseout = function(){

      autoChangeAgain();

    };

     })(i);

  }

  //给左箭头prev添加上一个事件

  var prev = document.getElementById("prev");

  prev.onmouseover = function(){

    //滑入清除定时器

    clearInterval(autoChange);

  };

  prev.onclick = function(){

    //根据curIndex进行上一个图片处理

    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);

    changeTo(curIndex);

  };

  prev.onmouseout = function(){

    //滑出则重置定时器

    autoChangeAgain();

  };

   //给右箭头next添加下一个事件

  var next = document.getElementById("next");

  next.onmouseover = function(){

    clearInterval(autoChange);

  };

  next.onclick = function(){

    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;

    changeTo(curIndex);

  };

  next.onmouseout = function(){

    autoChangeAgain();

  };

}

7.最后的最后，没啥了. 噢好像还要调用一下下那个 addEvent() ..

完整代码  代码量有些冗杂..

?


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

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片轮播 js原生(左右切换)</title>

<style type="text/css">

  body,div,ul,li,a,img{margin: 0;padding: 0;}

  ul,li{list-style: none;}

  a{text-decoration: none;}

  #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}

  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}

  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}

  .imgList li{float:left;display: inline;}

  #prev,

  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}

  #prev{left: 10px;}

  #next{right: 10px;}

  #prev:hover,

  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}

  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}

  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}

  .infoList li{display: none;}

  .infoList .infoOn{display: inline;color: white;}

  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}

  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}

  .indexList .indexOn{background: red;font-weight: bold;color: white;}

</style>

</head>

<body>

  <div id="wrapper"><!-- 最外层部分 -->

    <div id="banner"><!-- 轮播部分 -->

      <ul class="imgList"><!-- 图片部分 -->

        <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>

      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>

      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>

      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>

      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>

      </ul>

      <img src="./img/prev.png" width="20px" height="40px" id="prev">

      <img src="./img/next.png" width="20px" height="40px" id="next">

      <div class="bg"></div> <!-- 图片底部背景层部分-->

      <ul class="infoList"><!-- 图片左下角文字信息部分 -->

        <li class="infoOn">puss in boots1</li>

        <li>puss in boots2</li>

        <li>puss in boots3</li>

        <li>puss in boots4</li>

        <li>puss in boots5</li>

      </ul>

      <ul class="indexList"><!-- 图片右下角序号部分 -->

        <li class="indexOn">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

      </ul>

    </div>

  </div>

  <script type="text/javascript">

  var curIndex = 0, //当前index

      imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组

      imgLen = imgArr.length,

      infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组

      indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组

     // 定时器自动变换2.5秒每次

  var autoChange = setInterval(function(){

    if(curIndex < imgLen -1){

      curIndex ++;

    }else{

      curIndex = 0;

    }

    //调用变换处理函数

    changeTo(curIndex);

  },2500);

  //清除定时器时候的重置定时器--封装

  function autoChangeAgain(){

      autoChange = setInterval(function(){

      if(curIndex < imgLen -1){

        curIndex ++;

      }else{

        curIndex = 0;

      }

    //调用变换处理函数

      changeTo(curIndex);

    },2500);

    }

  //调用添加事件处理

  addEvent();

  //给左右箭头和右下角的图片index添加事件处理

 function addEvent(){

  for(var i=0;i<imgLen;i++){

    //闭包防止作用域内活动对象item的影响

    (function(_i){

    //鼠标滑过则清除定时器，并作变换处理

    indexArr[_i].onmouseover = function(){

      clearTimeout(autoChange);

      changeTo(_i);

      curIndex = _i;

    };

    //鼠标滑出则重置定时器处理

    indexArr[_i].onmouseout = function(){

      autoChangeAgain();

    };

     })(i);

  }

  //给左箭头prev添加上一个事件

  var prev = document.getElementById("prev");

  prev.onmouseover = function(){

    //滑入清除定时器

    clearInterval(autoChange);

  };

  prev.onclick = function(){

    //根据curIndex进行上一个图片处理

    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);

    changeTo(curIndex);

  };

  prev.onmouseout = function(){

    //滑出则重置定时器

    autoChangeAgain();

  };

   //给右箭头next添加下一个事件

  var next = document.getElementById("next");

  next.onmouseover = function(){

    clearInterval(autoChange);

  };

  next.onclick = function(){

    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;

    changeTo(curIndex);

  };

  next.onmouseout = function(){

    autoChangeAgain();

  };

}

  //左右切换处理函数

  function changeTo(num){

    //设置image

    var imgList = getElementsByClassName("imgList")[0];

    goLeft(imgList,num*400); //左移一定距离

    //设置image 的 info

    var curInfo = getElementsByClassName("infoOn")[0];

    removeClass(curInfo,"infoOn");

    addClass(infoArr[num],"infoOn");

    //设置image的控制下标 index

    var _curIndex = getElementsByClassName("indexOn")[0];

    removeClass(_curIndex,"indexOn");

    addClass(indexArr[num],"indexOn");

  }

  //图片组相对原始左移dist px距离

  function goLeft(elem,dist){

    if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"

      elem.style.left = "0px";

    }

    var toLeft; //判断图片移动方向是否为左

    dist = dist + parseInt(elem.style.left); //图片组相对当前移动距离

    if(dist<0){ 

      toLeft = false;

      dist = Math.abs(dist);

    }else{

      toLeft = true;

    }

    for(var i=0;i<= dist/20;i++){ //这里设定缓慢移动，10阶每阶40px

      (function(_i){

        var pos = parseInt(elem.style.left); //获取当前left

        setTimeout(function(){

          pos += (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变

          //console.log(pos);

          elem.style.left = pos + "px";

        },_i * 25); //每阶间隔50毫秒

      })(i);

    }

  }

  //通过class获取节点

  function getElementsByClassName(className){

    var classArr = [];

    var tags = document.getElementsByTagName(‘*‘);

    for(var item in tags){

      if(tags[item].nodeType == 1){

        if(tags[item].getAttribute(‘class‘) == className){

          classArr.push(tags[item]);

        }

      }

    }

    return classArr; //返回

  }

  // 判断obj是否有此class

  function hasClass(obj,cls){  //class位于单词边界

    return obj.className.match(new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘));

   }

   //给 obj添加class

  function addClass(obj,cls){

    if(!this.hasClass(obj,cls)){

       obj.className += cls;

    }

  }

  //移除obj对应的class

  function removeClass(obj,cls){

    if(hasClass(obj,cls)){

      var reg = new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘);

         obj.className = obj.className.replace(reg,‘‘);

    }

  }

  </script>

</body>

</html>
时间： 2024-07-29 06:43:52

原生js和jquery实现图片轮播特效的相关文章

原生js和jquery实现图片轮播

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

js或jquery实现图片轮播

如: 1.//3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){     index = (index == 2) ? 0 : index + 1;               //某个div显示,其他的隐藏     $(".div").hide().eq(index).show();     }, 3000); 2.http://www.jb51.net/article/64

jQuery个性化图片轮播效果

购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:   最外层容器区域,如上图红色线框矩形   选项卡区域 两个事件:    鼠标悬浮或鼠标划入mouseover    鼠标离开mouseleave /**大屏广告滚动样式**/ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

Jquery实现图片轮播功能

周末闲暇时,参照http://www.cnblogs.com/babyzone2004/archive/2010/08/30/1812682.html实现了个jquery图片轮播特效 界面效果: css实现: *{     margin: 0; } div{     position:relative;     width:600px;     height:400px;     border:1px #000 solid;     overflow:hidden;     margin:aut

PgwSlideshow-基于Jquery的图片轮播插件

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: 体验度很好的响应式设计 支持桌面及移动设备 身形矫健,压缩后的文件只有不到4KB 你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlideshow核

使用Jquery实现图片轮播效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery实现图片轮播</title> <style type="text/css"> *{margin: 0;padding: 0;} #box{width:600px;height:240px;position: relative;} #pic{width:6

js最简单焦点图片轮播代码

将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.js"></script> 注意:代码中图片路径修改为你自己的图片地址 var widths=725; //焦点图片宽 var w=0; var widthss=widths+w; var heights=295; //焦点图片高 var heightss=heightss+w; v

20款带左右箭头的焦点图片轮播特效代码

20款带左右箭头的焦点图片轮播特效代码分享 html5带倒影3D图片叠加轮播切换特效 jQuery slide图片自动轮播滚动插件 jQuery焦点图插件带按钮控制图片轮播滚动代码 jquery仿hao123带新闻标题图片轮播滚动效果 jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码 jQuery带网上开户表单的焦点图轮播代码 jquery左右箭头控制带缩略图片轮播切换 jQuery responsiveslides.js响应式图片轮播特效 jQuery OwlCarousel图片滚动插件世界杯图

jQuery简单的轮播特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-