use jquery to build slider

Posted on | In

use jquery to build slider

example1

inspired by http://blog.csdn.net/agnesluo/article/details/51141972 and http://blog.csdn.net/zheng_y1/article/details/73395626
and http://www.cnblogs.com/lily1010/p/4869778.html

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
jQuery(document).ready(function ($) {
  
    var slideCount = $('.ui-slide-item').length;
    var slideHeight = $('.ui-slide-content').height();
    var sliderscrollnum = 5;
    var _index= 1;
    var dianKey=0;
    var time1=null; 
    $('.slider').css({ "width": "100%", height: slideHeight});
    $('.ui-slide-content').css({ "width": (slideCount*100).toString()+"%",});
    $('.ui-slide-item').css({ "width": (100/(sliderscrollnum*slideCount)).toString()+"%",});
    function moveLeft() {
      dianKey--;
            if(dianKey<0){
                dianKey=2;
            }
            //让下一张的小点具备current...
            $('.sliderbtn span').eq(dianKey).addClass('active').siblings().removeClass('active');
      _index--
        if (_index < 1) {
           _index= 3; 
           $('.ui-slide-content').stop().animate({'left': -((_index-1)*100).toString()+"%"},800);          
        }else{
         $('.ui-slide-content').stop().animate({
            'left':  -((_index-1)*100).toString()+"%"}, 800); 
        }
        
    };
    function moveRight() {
      dianKey++;
            if(dianKey>2){
                dianKey=0;
            }
            $('.sliderbtn span').eq(dianKey).addClass('active').siblings().removeClass('active');
      _index++
       if (_index >3) {
           _index= 1;
           $('.ui-slide-content').stop().animate({'left': ""},800);
        } else{
          $('.ui-slide-content').stop().animate({
            'left':  -((_index-1)*100).toString()+"%"}, 800);
        }
        
    };
    $('a.control_prev').click(function () {
        moveLeft(); 
    });
    $('a.control_next').click(function () {
        moveRight();
       
    });
    $('.sliderbtn span').click(function(event) {
            //先获取到序号
            var i=$(this).index();
            var s=-(i*100).toString()+"%";
            //让小点走走
            $('.sliderbtn span').eq(i).addClass('active').siblings().removeClass('active');
            //让图片走走
            $('.ui-slide-content').stop().animate({'left':s}, 800);
            //为了让当前这个序号能够影响到上一张和下一张，
            //还有一个很重要的步骤：序号同步（两个全局变量都需要同步）
            _index=i+1;
            dianKey=i;
        });
    function timer(){        //打开定时器
            _index++;                          //让图片的索引值次序加1，这样就可以实现顺序轮播图片
            if(_index>3){    //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
                _index=1;
            }
            $('.sliderbtn span').eq(_index-1).trigger("click");    //模拟触发数字按钮的click
        };  
    $(".slider").mouseover(function(){
            clearInterval(time1);
        });
        $(".slider").mouseout(function(){
            time1=setInterval(timer,2000);
        });
        $('.slider').hover(function(){
            //清除定时器//显示图片
             $('.sliderprenex').css({'display':'block'});
            },function(){
            //恢复定时器//隐藏图片
            $('.sliderprenex').css({'display':'none'});
            })
  });

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="slider">
  <div class="sliderhd ">
    <div class="sliderprenex">
    <a href="#" class="control_next">></a>
    <a href="#" class="control_prev"><</a>
    </div>
    <div class="sliderbtn">
      <span class="active">1</span>
      <span>2</span>
      <span>3</span>
    </div>
  </div> 
  <div class="sliderbd ">
  <ul class="ui-slide-content">
    <li class="ui-slide-item"><ul class="sider-infor"><li class="poster"><img  src="images/logo2.jpg" alt="" ></li><li class="sider-title"><a href="">1</a></li><li class="sider-watch"><span><a href="">1</a></span></li></ul></li>
    <li class="ui-slide-item"><ul class="sider-infor"><li class="poster"><img  src="images/logo1.jpg" alt="" ></li><li class="sider-title"><a href="">2</a></li><li class="sider-watch"><span><a href="">1</a></span></li></ul></li>
    <li class="ui-slide-item"><ul class="sider-infor"><li class="poster"><img  src="images/logo2.jpg" alt="" ></li><li class="sider-title"><a href="">3</a></li><li class="sider-watch"><span><a href="">1</a></span></li></ul></li>
    <li class="ui-slide-item"><ul class="sider-infor"><li class="poster"><img  src="images/logo1.jpg" alt="" ></li><li class="sider-title"><a href="">4</a></li><li class="sider-watch"><span><a href="">1</a></span></li></ul></li> 
  </ul> 
  </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.slider {
  position: relative;
  overflow: hidden;
  margin:0 auto;
  border-radius: 4px;
  display:inline-block;
}
.ui-slide-content {
  position: relative;
  margin: 0;
  padding: 0;
  height: 320px;
  list-style: none;
}
.ui-slide-item {
  position: relative;
  display: block;
  float: left;
  margin:0;
  padding: 0;
  width: 200px;
  height: 300px;
  text-align: center;
}
.sider-infor{
  padding-left: 0;
}
.poster{
  height:250px ;
  overflow:hidden;
}
.poster img{
  max-width:100%;overflow:hidden;
}
.sider-title{
  height: 22px;
  overflow: hidden;
  text-align: center;
  line-height: 22px;
}
.sider-watch{
  height: 25px;
  text-align: center;
  line-height: 25px;
}
.sliderbtn .active{
    background-color: red;
    color: #FFFFFF;
}
a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7;
}
a.control_prev {
  border-radius: 0 2px 2px 0;
}
a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

example2

转载自 http://blog.csdn.net/zw_div/article/details/50433031

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
jQuery(document).ready(function ($) {
     var num=0;
    var nextFn=function(){
        //让上一张淡出
        $('.imgList li').eq(num).stop().fadeOut(1000);
        num++;
        if(num>4){
            num=0;
        }
        //让下一个角标增加current...
        $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
        //让下一张淡入
        $('.imgList li').eq(num).stop().fadeIn(1000);
    }
    var prevFn=function(){
        //让上一张淡出
        $('.imgList li').eq(num).stop().fadeOut(1000);
        num--;
        if(num<0){
            num=4;
        }
        //让上一个角标增加current...
        $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
        //让下一张淡入
        $('.imgList li').eq(num).stop().fadeIn(1000);
    }
    $('.rightBtn').click(nextFn);
    $('.leftBtn').click(prevFn);
    $('.btnList li').click(function(event) {
        //num未修改前代表上一张
        $('.imgList li').eq(num).stop().fadeOut(1000);
        num=$(this).index();
        //num修改后代表下一张
        //让下一个角标增加current...
        $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
        //让下一张淡入
        $('.imgList li').eq(num).stop().fadeIn(1000);
    });
});

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="banner1">
    <ul class="imgList">
        <li style="display:block;"><a href="javascript:;"><img src="images/docu-00003-1.jpg" height="420" width="992" /></a></li>
        <li><a href="javascript:;"><img src="images/docu-00001-2.jpg" height="420" width="992" /></a></li>
        <li><a href="javascript:;"><img src="images/docu-00003-1.jpg" height="420" width="992" /></a></li>
        <li><a href="javascript:;"><img src="images/docu-00001-2.jpg" height="420" width="992" /></a></li>
        <li><a href="javascript:;"><img src="images/docu-00003-1.jpg" height="420" width="992" /></a></li>
    </ul>
    <ol class="btnList">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li style="margin-right:0;"></li>
    </ol>
    <div class="leftBtn"></div>
    <div class="rightBtn"></div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.banner1{width: 992px; height: 420px; margin: 100px auto 0; position: relative;}
.imgList{width: 992px; height: 420px; position: relative;}
.imgList li{width: 992px; height: 420px; position: absolute; left: 0; top: 0; display: none;}
.btnList{position: absolute; right: 10px; bottom: 10px;}
.btnList li{width: 30px; height: 20px; color: #fff; background: rgba(0,0,0,0.3); margin-right: 10px;
        float: left; text-align: center; line-height:20px; border: 1px solid #CCC; cursor: pointer;} 
.btnList li.current{background: rgba(0,0,0,0.65);}
.leftBtn,.rightBtn{width: 41px; height: 69px; position: absolute; top: 50%; margin-top: -35px;
    background: url(images/xiaomi/left.gif) no-repeat center center rgba(0,0,0,.65); display: none;
    cursor: pointer;}
.leftBtn{left: 0; }
.rightBtn{right: 0; background-image: url(images/xiaomi/right.gif);}
.banner1:hover .leftBtn,.banner1:hover .rightBtn{display: block;}
.btnList{list-style: none;}

example3:全屏呼吸轮播

http://blog.csdn.net/zw_div/article/details/50433031

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
jQuery(document).ready(function ($) {
var num=0;
var timer;
var nextFn=function(){
    //没加之前代表上一张，上一张淡出
    $('.imgList li').eq(num).stop().fadeOut(1500);
    num++;
    if(num>3){
        num=0;
    }
    //更改完以后代表下一张，下一张淡入
    $('.imgList li').eq(num).stop().fadeIn(1500);
    $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
}
var prevFn=function(){
    //没加之前代表上一张，上一张淡出
    $('.imgList li').eq(num).stop().fadeOut(1500);
    num--;
    if(num<0){
        num=3
    }
    //更改完以后代表下一张，下一张淡入
    $('.imgList li').eq(num).stop().fadeIn(1500);
    $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
}   
//左右按钮点击
$('.rightBtn').click(nextFn);
$('.leftBtn').click(prevFn);   
//小点点击
$('.btnList li').click(function(event) {           
    var i=$(this).index();
    //现在这个全局变量num就代表上一张
    //没加之前代表上一张，上一张淡出
    $('.imgList li').eq(num).stop().fadeOut(1500);
    //再让序号和num进行同步
    num=i;
    //重新赋值以后，num就代表下一张
    //更改完以后代表下一张，下一张淡入
    $('.imgList li').eq(num).stop().fadeIn(1500);
    $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
}); 
//自动走
timer=setInterval(nextFn, 2000);
//鼠标悬停时...
$('.box').hover(function() {
    clearInterval(timer);
}, function() {
    clearInterval(timer);
    timer=setInterval(nextFn, 2000);
});
});

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="box">
    <ul class="imgList">
        <li style="display:block;background-color:#020612;background-image:url(images/yuHua/1.jpg);">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/2.jpg);background-color:#083B74">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/3.jpg); background-color:#948790">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/4.jpg); background-color:#000F22">
            <a href="javascript:;"></a>
        </li>
    </ul>
    <ol class="btnList">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li style="margin-right:0;"></li>
    </ol>
    <div class="leftBtn"></div>
    <div class="rightBtn"></div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box{width: 100%; height: 435px; position: relative;}
.imgList{height: 435px; position: relative;}
.imgList li{position: absolute; height: 435px; left: 0; top: 0; display: none; width: 100%;
background-position: center top;
background-repeat: no-repeat;}
.imgList li a{display: block; width: 100%; height: 100%;}
.btnList{width: 120px; height: 12px; position: absolute; left: 50%; margin-left: -60px;
bottom: 15px; }
.btnList li{width: 12px; height: 12px; background: url(images/yuHua/sprite_banner.png) -17px 0;
float: left; margin-right: 24px; cursor: pointer;}
.btnList li.current{background-position: 0 0;}
.leftBtn,.rightBtn{width: 35px; height: 71px; position: absolute; top: 50%; margin-top: -35px;
background: url(images/1920/icons.png) 0 0; cursor: pointer;}
.leftBtn{left: 50%; margin-left: -600px;}
.rightBtn{left: 50%; background-position: -90px 0; margin-left: 600px;}

example4:蒙太奇轮播

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var num=0;
    var timer;
    var sportFn=function(){
        $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
        $('.fadeCover').stop().fadeIn(200,function(){
            $(this).stop().fadeOut(300);
            $('.imgList li').eq(num).show().siblings('li').hide();
        });
    }
    var nextFn=function(){
        num++;
        if(num>3){
            num=0;
        }
        sportFn();
    }
    var prevFn=function(){  
        num--;
        if(num<0){
            num=3
        }
        sportFn();
    }
    //左右按钮点击
    $('.rightBtn').click(nextFn);
    $('.leftBtn').click(prevFn);
    //小点点击
    $('.btnList li').click(function(event) {
        var i=$(this).index();
        num=i;
        sportFn();
    });
    //自动走
    timer=setInterval(nextFn, 2000);
    //鼠标悬停时...
    $('.box').hover(function() {
        clearInterval(timer);
    }, function() {
        clearInterval(timer);
        timer=setInterval(nextFn, 2000);
    });

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="box">
    <div class="fadeCover"></div>
    <ul class="imgList">
        <li style="display:block; background-image:url(images/yuHua/1.jpg); background-color:#020612;">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/2.jpg); background-color:#083B74">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/3.jpg); background-color:#948790">
            <a href="javascript:;"></a>
        </li>
        <li style="background-image:url(images/yuHua/4.jpg); background-color:#000F22">
            <a href="javascript:;"></a>
        </li>
    </ul>
    <ol class="btnList">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li style="margin-right:0;"></li>
    </ol>
    <div class="leftBtn"></div>
    <div class="rightBtn"></div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box{width: 100%; height: 435px; position: relative;}
.fadeCover{position: absolute; left: 0; top: 0; z-index: 101; background: #000; display: none;
width: 100%; height: 100%;}
.imgList{height: 435px; position: relative;}
.imgList li{position: absolute; height: 435px; left: 0; top: 0; display: none; width: 100%;
z-index: 100;
background-position: center top;
background-repeat: no-repeat;}
.imgList li a{display: block; width: 100%; height: 100%;}
.btnList{width: 120px; height: 12px; position: absolute; left: 50%; margin-left: -60px;
bottom: 15px; z-index: 102;}
.btnList li{width: 12px; height: 12px; background: url(images/yuHua/sprite_banner.png) -17px 0;
float: left; margin-right: 24px; cursor: pointer;}
.btnList li.current{background-position: 0 0;}
.leftBtn,.rightBtn{width: 35px; height: 71px; position: absolute; top: 50%; margin-top: -35px;
background: url(images/1920/icons.png) 0 0; cursor: pointer; z-index: 102;}
.leftBtn{left: 50%; margin-left: -600px;}
.rightBtn{left: 50%; background-position: -90px 0; margin-left: 600px;}

slider plugin collection

1 slick
http://kenwheeler.github.io/slick/
2 wowslider
http://wowslider.com/
3 cssslider
http://cssslider.com
4 bxslider
http://bxslider.com/
5 glidejs
http://glide.jedrzejchalubek.com/docs.html
6 jssor
https://jssor.com/
7 swiper
http://www.swiper.com.cn/
8 slidr
http://bchanx.com/slidr
9 unslider
http://idiot.github.io/unslider/
10 responsiveslides
http://responsiveslides.com/