自己做的jq图片轮播
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己做的jq图片轮播相关的知识，希望对你有一定的参考价值。
新手开始学习js写的一个经常能用到的图片轮播效果
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>图片轮播</title> <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div class="index-slider"> <ul> <li class="li-one liblock"></li> <li class="li-two linone"></li> <li class="li-three linone"></li> <li class="li-four linone"></li> <li class="li-five linone"></li> </ul> </div> <a href="#" class="slider-lift-btn btn" id="slider-left-btn"><i class="fa fa-angle-left"></i></a> <a href="#" class="slider-lift-btntwo btn" id="slider-right-btn"><i class="fa fa-angle-right"></i></a> <div class="posterBlur" id="posterBlur"> <a class="posterBlurOne posterBlurActive" data-value="0"></a> <a class="posterBlurOne" data-value="1"></a> <a class="posterBlurOne" data-value="2"></a> <a class="posterBlurOne" data-value="3"></a> <a class="posterBlurOne" data-value="4"></a> </div> </body> </html>
jq代码：
1 <script type="text/javascript"> 2 /*全屏轮播海报开始*/ 3 !(function(){ 4 var index=0;//索引值从0开始 5 var thisPost=$(".index-slider ul li");//海报对象 6 var pblur=$("#posterBlur .posterBlurOne");//海报焦点对象 7 var goPoster=setInterval(poster,3000);//倒计时操作dom函数（唯一性） 8 /*海报向左滑动的按钮事件*/ 9 $("#slider-left-btn").on("click",function(){ 10 index--; 11 if(index<0){ 12 index=thisPost.length-1; 13 } 14 switchLeft(index);//函数调用，保证索引值的一致性 15 16 }) 17 /*海报向右滑动的按钮事件*/ 18 $("#slider-right-btn").on("click",function(){ 19 index++; 20 if(index>thisPost.length-1){ 21 index=0; 22 thisPost.eq(thisPost.length-1).fadeOut(2000); 23 } 24 switchRight(index); 25 26 }) 27 /*海报焦点点击切换*/ 28 pblur.on("click",function(){ 29 var thisBlur=$(this).attr("data-value");//当前点击的焦点的data-value值(data-value值与海报索引值匹配) 30 thisPost.eq(thisBlur).fadeIn(2000);//与当前点击的焦点获得的值相等索引值的海报显示 31 thisPost.eq(index).fadeOut(2000);//海报自动轮播时当时正在展示的海报隐藏 32 pblur.removeClass("posterBlurActive");//自动展示激活的焦点关闭激活状态 33 pblur.eq(thisBlur).addClass("posterBlurActive");//点击的焦点激活 34 index=thisBlur;//将索引值重置为点前点击焦点所返回的值 35 console.log(thisBlur); 36 }) 37 /*海报向左滑动的按钮点击之后调用的函数*/ 38 function switchLeft(index){ 39 console.log(index); 40 thisPost.eq(index).fadeIn(2000); 41 thisPost.eq(index).next().fadeOut(2000); 42 pblur.removeClass("posterBlurActive");//自动展示激活的焦点关闭激活状态 43 pblur.eq(index).addClass("posterBlurActive");//点击的焦点激活 44 } 45 /*海报向右滑动的按钮点击之后调用的函数*/ 46 function switchRight(index){ 47 console.log(index); 48 thisPost.eq(index).fadeIn(2000); 49 thisPost.eq(index).prev().fadeOut(2000); 50 pblur.removeClass("posterBlurActive");//自动展示激活的焦点关闭激活状态 51 pblur.eq(index).addClass("posterBlurActive");//点击的焦点激活 52 } 53 /*海报焦点自滚动函数*/ 54 function switchPblur(index){ 55 pblur.eq(index).addClass("posterBlurActive"); 56 pblur.eq(index).prev().removeClass("posterBlurActive"); 57 } 58 /*公用的倒计时函数*/ 59 function poster(){ 60 index++; 61 if(index<thisPost.length){ 62 switchRight(index); 63 switchPblur(index); 64 } 65 if(index>thisPost.length-1){ 66 index=0; 67 thisPost.eq(thisPost.length-1).fadeOut(2000); 68 pblur.eq(pblur.length-1).removeClass("posterBlurActive"); 69 switchRight(index); 70 switchPblur(index); 71 } 72 } 73 /*鼠标悬浮在左右按钮时计时函数停止运行*/ 74 $(".btn").on("mouseover",function(){ 75 clearInterval(goPoster); 76 }) 77 /*鼠标离开左右按钮时计时函数开始继续运行*/ 78 $(".btn").on("mouseout",function(){ 79 goPoster=setInterval(poster,3000); 80 }) 81 /*鼠标移到焦点上时停止计时函数运行*/ 82 pblur.on("mouseover",function(){ 83 clearInterval(goPoster); 84 }) 85 /*鼠标移出焦点时计时函数继续运行*/ 86 pblur.on("mouseout",function(){ 87 goPoster=setInterval(poster,3000); 88 }) 89 })(); 90 /*全屏轮播海报结束*/ 91 </script>
css样式代码：
1 <style> 2 html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} 3 .index-slider{position: relative;z-index: 1;height: 720px;} 4 .index-slider li{position: absolute;top: 0;left: 0;width: 100%;height: 720px;} 5 .liblock{display: block;} 6 .linone{display: none;} 7 .index-slider .li-one{background: url(../images/01.png);background-repeat: no-repeat;background-size: cover;background-position: center;} 8 .index-slider .li-two{background: url(../images/02.png);background-repeat: no-repeat;background-size: cover;background-position: center;} 9 .index-slider .li-three{background: url(../images/03.png);background-repeat: no-repeat;background-size: cover;background-position: center;} 10 .index-slider .li-four{background: url(../images/04.png);background-repeat: no-repeat;background-size: cover;background-position: center;} 11 .index-slider .li-five{background: url(../images/05.png);background-repeat: no-repeat;background-size: cover;background-position: center;} 12 .slider-lift-btn{display: block;position: absolute; width: 45px;height: 80px;background: #cf0f32;top: 40%;z-index: 5;left: 0;} 13 .slider-lift-btn i{position: relative;top: 35%;left: 40%;font-size: 20px;color: #fff;} 14 .slider-lift-btntwo{display: block;position: absolute; width: 45px;height: 80px;background: #cf0f32;top: 40%;z-index: 5;right: 0;} 15 .slider-lift-btntwo i{position: relative;top: 35%;left: 50%; font-size: 20px;color: #fff;} 16 17 .posterBlur{position: absolute;top: 0px;right: 19%;} 18 .posterBlurOne{background-image: url(../images/postBlur.png);background-repeat: no-repeat;background-position:-37px 0;float: left;z-index: 999;height: 20px;width: 20px;position: relative;z-index: 999;margin:0 5px; top: 575px;left: 75%;} 19 .posterBlurActive{background-image: url(../images/postBlur.png);background-repeat: no-repeat;background-position:0 -37px;float: left;z-index: 999;height: 20px;width: 20px;position: relative;z-index: 999;margin:0 5px; top: 575px;left: 75%;} 20 21 .sliderDetail{display: block;position: relative;margin: 0 auto;width: 1230px;height: 100%;} 22 .sliderDetailContent{position: absolute;left: 95px;top: 260px;width: 490px;} 23 .sliderDetailContent h2{font-size: 44px;color: #fff;text-align: left;} 24 .sliderDetailContent p{font-size: 15px;text-align: left;margin: 15px 0 30px;line-height: 30px;border-top: 1px solid #CF1132;padding-top: 10px;} 25 .sliderDetailContent span{background-image: url(../images/btnContent.png);background-repeat: no-repeat;display: block;width: 140px;height: 50px;} 26 </style>
以上是关于自己做的jq图片轮播的主要内容，如果未能解决你的问题，请参考以下文章