小程序流程做不起来_jQuery完成花式轮播之圣诞节

jQuery实现花式轮播之圣诞节礼物传送效果       这篇文章主要介绍了jQuery实现花式轮播之圣诞节礼物传送效果,需要的朋友可以参考下

旋转出发，旋转到达。鼠标经过停止，点击拆礼物！

  写的比较简单，喜欢点赞收藏哦。

  请在谷歌等高版本浏览器打开^-^

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 圣诞礼物传送轮播 /title 
 style 
 html, body {
 height: 100%;
 margin: 0;
 padding: 0;
 .cr{
 width: 100%;
 position: relative;
 background: url("notes/pics/201612/15/174106gbm3famm0piq62mm.png") no-repeat 0 0;
 -webkit-background-size: 100% 100%;
 background-size: 100% 100%;
 overflow: hidden;
 .cr-l,.cr-r{
 position: absolute;
 bottom:10%;
 width: 20.8%;
 height: 70%;
 z-index:100;
 .cr-l img,.cr-r img{
 width: 100%;
 position: absolute;
 top:50%;
 .cr-l{
 left: 0;
 .cr-r{
 right:0;
 .cr-icon{
 bottom: 15%;
 left:0;
 position: absolute;
 z-index: 1000;
 width: 100%;
 height: 70%;
 text-align: center;
 .cr-icon img{
 margin-right: 25px;
 width: 10%;
 vertical-align: top;
 position: absolute;
 bottom: 0;
 opacity: 1;
 transform:rotate(0deg);
 transition: all 1s;
 .cr-icon img:first-child{
 transform:rotate(-90deg);
 -webkit-transform:rotate(-90deg);
 opacity: 0;
 width: 0;
 .cr-icon img:last-child{
 transform:rotate(90deg);
 -webkit-transform:rotate(90deg);
 opacity: 0;
 width: 0;
 /style 
 /head 
 body 
 div 
 div img src="notes/pics/201612/pcb.png" alt=""/ /div 
 div 
 div id="cr-icon" 
 img src="notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/ 
 img src="notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/ 
 img src="notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/ 
 img src="notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/ 
 img src="notes/pics/201612/15/174103e22y4zbkhi47bi2w.png" alt=""/ 
 /div 
 /div 
 div img src="notes/pics/201612/15/174103dz0uhvec7nbunqwc.png" alt=""/ /div 
 /div 
 script src="libs/jquery/2.1.1/jquery.min.js" /script 
 script 
 $(".cr-icon img").click(function(){
 if($(this).attr("src") == "notes/pics/201612/15/174103e22y4zbkhi47bi2w.png"){
 $(this).attr("src","notes/pics/201612/15/174103ciomobruzrkbhhs5.png");
 }else{
 $(this).attr("src","notes/pics/201612/15/174103e22y4zbkhi47bi2w.png");
 $(function() {
 var end = document.body.clientWidth;
 var height = document.body.scrollHeight;
 $(".cr").css("height",height);
 function scrollLogo() {
 $("#cr-icon img").each(function () {
 var left = parseInt($(this).css("left"));
 left += end * 0.2;
 $(this).css("left", left + "px");
 $("#cr-icon img:last").insertBefore($("#cr-icon img:first")).css("left", document.body.clientWidth * 0.05).fadeIn();
 setTimeout(scrollLogo,0);
 var scroll = setInterval(scrollLogo, 1500);
 $("#cr-icon img").mouseenter(function () {
 clearInterval(scroll);
 $("#cr-icon img").mouseleave(function () {
 scroll = setInterval(scrollLogo, 1500);
 /script 
 /body 
 /html 

效果图如下所示：

以上所述是小编给大家介绍的jQuery实现花式轮播之圣诞节礼物传送效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！