您的位置:时时app平台注册网站 > 彩世界网址 > js实现极度轻便的核心图切换特效实例_javascript本

js实现极度轻便的核心图切换特效实例_javascript本

2019-12-06 10:54

本文实例讲述了js实现非常简单的焦点图切换特效的方法。分享给大家供大家参考。具体分析如下:

js实现非常简单的焦点图切换特效实例,js焦点特效实例

本文实例讲述了js实现非常简单的焦点图切换特效的方法。分享给大家供大家参考。具体分析如下:

这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
* {margin:0;padding:0;}
ul, li {list-style:none;}
.mid {margin:0 auto;}
.area {
width:240px;height:270px;
overflow:hidden;background:#999;
margin-top:150px;position:relative;
}
#pic_list {
position:relative;
}
#pic_list li {
position:absolute;visibility:hidden;
}
#pic_list li.show {
visibility:visible;
}
#pic_list li img {
vertical-align:middle;
}
.button {
width:240px;height:20px;
line-height:20px;background:#ccc;
position:absolute;bottom:0px;
}
#button {
float:right;
}
#button li {
float:left;width:20px;height:20px;
text-align:center;margin:0 3px;
font-family:"Arial";font-size:12px;
color:#fff;background:#000;
}
#button li.current {
background:#f00;cursor:pointer;
}
</style>
</head>
<body>
<div class="area mid">
 <div id="imgbox" class="bbbb">
  <ul id="pic_list" class="aaaa">
   <li class="show" id="one">
   <img src="images/1317279971_77011100.jpg" width="240" />
   </li>
   <li id="two">
   <img src="images/1317279972_01691900.jpg" width="240" />
   </li>
   <li id="three">
   <img src="images/1317279973_69082200.jpg" width="240" />
   </li>
   <li id="four">
   <img src="images/1317281054_38572100.jpg" width="240" />
   </li>
   <li id="five">
   <img src="images/1317281056_61630800.jpg" width="240" />
   </li>
  </ul>
 </div>
 <div class="button" class="dddd">
  <ul id="button" class="cccc">
   <li class="current" id="but_one">1</li>
   <li id="but_two">2</li>
   <li id="but_three">3</li>
   <li id="but_four">4</li>
   <li id="but_five">5</li>
  </ul>
 </div>
</div>
<script type="text/javascript">
(function(){
var imgbox = document.getElementById("imgbox");
var pic_list = document.getElementById("pic_list");
var pics = pic_list.getElementsByTagName("li");
var button = document.getElementById("button").getElementsByTagName("li");
var p;
var start;
function autoplay(start){for(i=start;i<button.length;i  ){
//设置起始值为start参数.
 (function(){
 var p=i;
 // 为p赋值i. i等于0,1,2,3,4;
 button[i].onmouseover=function change(){
 //button[0],button[1],button[2],button[3],button[4]
 //onmouseover可以触发函数;
 for(j=0;j<this.parentNode.childNodes.length;j  ){
 //以this(当前触发事件的元素)为起点,的父节点的所有子节点
 //的length值为最高值,开始遍历. ;
 this.parentNode.childNodes[j].className="";
 //以this(当前触发事件的元素)为起点
 //的父节点的所有子节点的className为空. 危险慎用.;
  }
 this.className="current";
 //this. 即当前触发onmouseover的元素的className为"current";
 for(m=0;m<pics.length;m  ){
 //以pics.length为最高值进行遍历.遍历pics.;
 pics[m].className="";
 //清空所有pics数组中所有元素的className;
 if (m==p){
 //当m==p (p==i) 所以m=i时,触发下列函数
  pics[m].className="show";
  //pics的第m个元素的className值为show; m在这里等于i;
  }
 }
 }
 })();
 }
}
autoplay(0);
})();
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文实例讲述了js实现非常简单的焦点图切换特效的方法。分享给大家供大家参考。...

js实现非常简单的焦点图切换特效实例

   这篇文章主要介绍了js实现非常简单的焦点图切换特效,是一个非常简单的js焦点图切换效果,涉及javascript操作鼠标事件与图片的相关技巧,需要的朋友可以参考下

  这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考

  ?

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

<!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=gb2312" />

<title>无标题文档</title>

<style type="text/css">

* {margin:0;padding:0;}

ul, li {list-style:none;}

.mid {margin:0 auto;}

.area {

width:240px;height:270px;

overflow:hidden;background:#999;

margin-top:150px;position:relative;

}

#pic_list {

position:relative;

}

#pic_list li {

position:absolute;visibility:hidden;

}

#pic_list li.show {

visibility:visible;

}

#pic_list li img {

vertical-align:middle;

}

.button {

width:240px;height:20px;

line-height:20px;background:#ccc;

position:absolute;bottom:0px;

}

#button {

float:right;

}

#button li {

float:left;width:20px;height:20px;

text-align:center;margin:0 3px;

font-family:"Arial";font-size:12px;

color:#fff;background:#000;

}

#button li.current {

background:#f00;cursor:pointer;

}

</style>

</head>

<body>

<div class="area mid">

<div id="imgbox" class="bbbb">

<ul id="pic_list" class="aaaa">

<li class="show" id="one">

<img src="images/1317279971_77011100.jpg" width="240" />

</li>

<li id="two">

<img src="images/1317279972_01691900.jpg" width="240" />

</li>

<li id="three">

<img src="images/1317279973_69082200.jpg" width="240" />

</li>

<li id="four">

<img src="images/1317281054_38572100.jpg" width="240" />

</li>

<li id="five">

<img src="images/1317281056_61630800.jpg" width="240" />

</li>

</ul>

</div>

<div class="button" class="dddd">

<ul id="button" class="cccc">

<li class="current" id="but_one">1</li>

<li id="but_two">2</li>

<li id="but_three">3</li>

<li id="but_four">4</li>

<li id="but_five">5</li>

</ul>

</div>

</div>

<script type="text/javascript">

(function(){

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

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

var pics = pic_list.getElementsByTagName("li");

var button = document.getElementById("button").getElementsByTagName("li");

var p;

var start;

function autoplay(start){for(i=start;i<button.length;i ){

//设置起始值为start参数.

(function(){

var p=i;

// 为p赋值i. i等于0,1,2,3,4;

button[i].onmouseover=function change(){

//button[0],button[1],button[2],button[3],button[4]

//onmouseover可以触发函数;

for(j=0;j<this.parentNode.childNodes.length;j ){

//以this(当前触发事件的元素)为起点,的父节点的所有子节点

//的length值为最高值,开始遍历. ;

this.parentNode.childNodes[j].className="";

//以this(当前触发事件的元素)为起点

//的父节点的所有子节点的className为空. 危险慎用.;

}

this.className="current";

//this. 即当前触发onmouseover的元素的className为"current";

for(m=0;m<pics.length;m ){

//以pics.length为最高值进行遍历.遍历pics.;

pics[m].className="";

//清空所有pics数组中所有元素的className;

if (m==p){

//当m==p (p==i) 所以m=i时,触发下列函数

pics[m].className="show";

//pics的第m个元素的className值为show; m在这里等于i;

}

}

}

})();

}

}

autoplay(0);

})();

</script>

</body>

</html>

  希望本文所述对大家的javascript程序设计有所帮助。

        注< >**:更多精彩教程请关注帮客之家编程**

这篇文章主要介绍了js实现非常简单的焦点图切换特效,是一个非常简单的js焦点图切换效果,涉及jav...

这是一个非常非常简单的焦点图,可供初学者借鉴参考

无标题文档* {margin:0;padding:0;}ul, li {list-style:none;}.mid {margin:0 auto;}.area {width:240px;height:270px;overflow:hidden;background:#999;margin-top:150px;position:relative;}#pic_list {position:relative;}#pic_list li {position:absolute;visibility:hidden;}#pic_list li.show {visibility:visible;}#pic_list li img {vertical-align:middle;}.button {width:240px;height:20px;line-height:20px;background:#ccc;position:absolute;bottom:0px;}#button {float:right;}#button li {float:left;width:20px;height:20px;text-align:center;margin:0 3px;font-family:"Arial";font-size:12px;color:#fff;background:#000;}#button li.current {background:#f00;cursor:pointer;}                      1 2 3 4 5  {var imgbox = document.getElementById;var pic_list = document.getElementById;var pics = pic_list.getElementsByTagName;var button = document.getElementById.getElementsByTagName;var p;var start;function autoplay{for(i=start;i&lt;button.length;i  ){//&#35774;&#32622;&#36215;&#22987;&#20540;&#20026;start&#21442;&#25968;. { var p=i; // &#20026;p&#36171;&#20540;i. i&#31561;&#20110;0,1,2,3,4; button[i].onmouseover=function change(){ //button[0],button[1],button[2],button[3],button[4] //onmouseover&#21487;&#20197;&#35302;&#21457;&#20989;&#25968;; for(j=0;j&lt;this.parentNode.childNodes.length;j  ){ //&#20197;this&#20026;&#36215;&#28857;,&#30340;&#29238;&#33410;&#28857;&#30340;&#25152;&#26377;&#23376;&#33410;&#28857; //&#30340;length&#20540;&#20026;&#26368;&#39640;&#20540;,&#24320;&#22987;&#36941;&#21382;. ; this.parentNode.childNodes[j].className=""; //&#20197;this&#20026;&#36215;&#28857; //&#30340;&#29238;&#33410;&#28857;&#30340;&#25152;&#26377;&#23376;&#33410;&#28857;&#30340;className&#20026;&#31354;. &#21361;&#38505;&#24910;&#29992;.; } this.className="current"; //this. &#21363;&#24403;&#21069;&#35302;&#21457;onmouseover&#30340;&#20803;&#32032;&#30340;className&#20026;"current"; for(m=0;m&lt;pics.length;m  ){ //&#20197;pics.length&#20026;&#26368;&#39640;&#20540;&#36827;&#34892;&#36941;&#21382;.&#36941;&#21382;pics.; pics[m].className=""; //&#28165;&#31354;&#25152;&#26377;pics&#25968;&#32452;&#20013;&#25152;&#26377;&#20803;&#32032;&#30340;className; if  &#25152;&#20197;m=i&#26102;,&#35302;&#21457;&#19979;&#21015;&#20989;&#25968; pics[m].className="show"; //pics&#30340;&#31532;m&#20010;&#20803;&#32032;&#30340;className&#20540;&#20026;show; m&#22312;&#36825;&#37324;&#31561;&#20110;i; } } } });

希望本文所述对大家的javascript程序设计有所帮助。

本文由时时app平台注册网站发布于彩世界网址,转载请注明出处:js实现极度轻便的核心图切换特效实例_javascript本

关键词: