本身作的jq圖片輪播

時間 2019-11-16

原文原文鏈接

新手開始學習js寫的一個常常能用到的圖片輪播效果javascript

html代碼：css

<!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代碼：html

 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樣式代碼：java

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。