jQuery实现花式轮播的圣诞礼物传递效果

旋转开始，旋转到达。鼠标停止后，点击打开礼物！

写起来比较简单，喜欢点赞收藏。

请在谷歌等更高版本的浏览器中打开

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题圣诞礼物传送轮播/title style html，body { height : 100%；保证金： 0；padd : 0；} .Cr {宽度： 100%；相对位置：背景： URL(' http://cdn。附上。qd uns。com/notes/pics/201612/15/174106 GBM 3 famm 0 piq 62mm。png ')无重复0 0；-web套件-背景-尺寸： 100% 100%；背景尺寸： 100% 100%;飞越：隐藏；} .cr-l .cr-r{位置：绝对值；底部：10%;宽度： 20.8%;高度： 70%;z指数：100;} .cr-l img .Cr-r img {宽度： 100%；绝对位置：前：50%；} .Cr-l {左： 0；} .Cr-r {右：0；} .Cr-icon {底部： 15%；左转：0绝对位置：z指数： 1000；宽度： 100%;高度： 70%;文本对齐：中心；} .Cr-icon img { margin-right : 25px；宽度： 10%;垂直对齐： 顶部；绝对位置：底部： 0；opa城市3360 1；变压器：旋转(0度);过渡：全1;} .Cr-icon img :第一子{ transform : rotate(-90)；-web套件-transform :旋转(-90)；opa城市3360 0；宽度： 0;} .Cr-icon img :最后一个孩子{变换：旋转(90)；-网络套件-transform :旋转(90度);opa城市3360 0；宽度： 0;}/style/head body div class=' Cr ' div class=' Cr-l ' img src=' http :http://cdn。附上。qdfuns。com/notes/pics/201612/15/174103 o 5 zx1pz H4 x1ccpcb。png ' alt=' '//div class=' Cr-icon ' div id=' Cr-icon ' img style=' left :5% ' src=' http 33366 Cr-icon img ').单击(function(){ if($(this)).attr(' src ')==' http://cdn。附上。qd uns。com/notes/pics/201612/15/174103 e 22 y4 zb khi 47 bi2w。png '){ $(this).attr('src '，' http://cdn。附上。qd uns。com/notes/pics/201612/15/174103 ciomebruzrkhhs 5。png ')；}else{ $(this).attr('src '，' http://cdn。附上。qd uns。com/notes/pics/201612/15/174103 e 22 y4 zb khi 47 bi 2w。png ')；} });$(function(){ var end=document。尸体。客户端宽度；var高度=文档。尸体。滚动高度；$('.Cr ').css(“”高度，高度);函数scrolgo(){ $(' # Cr-icon img ').每个（函数(){ var left=parsent($(this)).css(“”左');左=end * 0.2$(这个)。css('left '，left ' px ')；});$('#cr-icon img:last ').在($(' # Cr-icon img : first ')之前插入.css('左'，document.body.clientWidth * 0.05).fadeIn()；} setTimeout(scrolgo，0)；var scroll=设置间隔(scrollogo，1500)；$('#cr-icon img ').鼠标输入(函数(){ clearInterval(滚动));});$('#cr-icon img ').鼠标离开(函数(){ scroll=setInterval(滚动Logo，1500)；});});/脚本/正文/html效果图如下所示：

以上是边肖为实现花式轮播的圣诞礼物传递效果而推出的jQuery。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！