作者：雨天是最美 | 来源：互联网 | 2022-12-23 20:07
这个是我用jquery+css实现的一个轮播，效果如下：操作方式：1.鼠标不再轮播界面上时，每个1秒切换一次，循环切换；2.当鼠标在轮播界面上时，停止切换，当鼠标离开时，继续切换；
这个是我用jquery+css实现的一个轮播，效果如下：
;
23 }
24 .carrousel:after{
25 content:"";
26 display:inline-block;
27 width:20px;
28 height:35px;
29 float:right;
30 position:relative;
31 bottom:50%;
32 margin-top:-35px;
33 margin-right:10px;
34 background-image:url("images/right.png");
35 }
36
37 .carrousel, .carrousel img{
38 width:640px;
39 height:480px;
40 }
41
42 .carrousel img{
43 display:none;
44 }
45
46 .carrousel img.current{
47 display:inline-block;
48 }
49
50 .carrousel .carrousel-btn-list{
51 display:inline-block;
52 margin-top:-25px;
53 }
54
55 .carrousel .carrousel-btn-list span{
56 width:10px;
57 height:10px;
58 margin:0 5px;
59 display:inline-block;
60 border-radius:5px;
61 background-color:#FFF;
62 }
63
64 .carrousel .carrousel-btn-list span.current{
65 width:20px;
66 }
67
68 style>
69 <script>
70 var carrousel = {
71 current:1,
72 interval:null,
73 length:0,
74 init: function(){
75 if($(".carrousel .carrousel-btn-list").length == 0){
76 var content = '';
77 var length = $(".carrousel img").length;
78 for(var i=0; i<length; i++){
79 content += "";
80 }
81 content += '
';
82 $(".carrousel").append(content);
83 }
84 this.length = $(".carrousel img").length;
85 $(".carrousel img:first").addClass("current");
86 $(".carrousel .carrousel-btn-list span:first").addClass("current");
87 var _this = this;
88 $(".carrousel .carrousel-btn-list span").click(function(){
89 _this.change($(this).index());
90 });
91 },
92 start: function(){
93 var _this = this;
94 this.interval = setInterval(function(){ _this.carrouselChange(_this.current);}, 1000);
95 },
96 stop: function(){
97 clearInterval(this.interval);
98 },
99 carrouselChange: function (index){
100 if(index){
101 this.change(index);
102 } else {
103 this.change(1);
104 }
105 },
106 change:function(index){
107 this.current = index % this.length + 1;
108 $(".carrousel img").removeClass("current");
109 $(".carrousel .carrousel-btn-list span").removeClass("current");
110 $(".carrousel img:nth-child(" + this.current + ")").addClass("current");
111 $(".carrousel .carrousel-btn-list span:nth-child(" + this.current + ")").addClass("current");
112
113 },
114 click:function(e){
115 var x = e.offsetX;
116 var y = e.offsetY;
117 var $img = $(".carrousel img.current");
118 var ox = $img.offset().left;
119 var oy = $img.offset().top;
120 var height = $img.height();
121 var width = $img.width();
122 if(x >= ox && x <= (ox + 20 + 10) && y >= oy && y <= oy + height){
123 if(this.current <= 1){
124 this.current = this.length + 1;
125 }
126 this.change(this.current-2);
127 } else if(x >= (ox + width - 10 - 20) && x <= (ox + width) && y >= oy && y <= oy + height){
128 if(this.current == 0){
129 this.current = 1;
130 this.change(this.current);
131 }
132 this.change(this.current);
133 }
134 },
135 };
136 $(function(){
137 carrousel.init();
138 carrousel.start();
139 $(".carrousel").hover(function(){
140 carrousel.stop();
141 }, function(){
142 carrousel.start();
143 });
144 $(document).click(function(e){
145 carrousel.click(e);
146 });
147 });
148 script>
149 head>
150 <body>
151 <div class="carrousel">
152 <img src="images/1.jpg"/>
153 <img src="images/2.jpg"/>
154 <img src="images/3.jpg"/>
155 <img src="images/4.jpg"/>
156 <img src="images/5.jpg"/>
157 div>
158 body>
159 html>
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 