http://sc.chinaz.com/jiaobendemo.aspx?downloadid=8201793042262

<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta httP-equiv='X-UA-Compatible' content="IE-edge,chrome=1"
<meta name="viewport" content="device-width,initial-scale=1.0">
<style>
@charset "UTF-8";
*{margin:0;padding:0;list-style-type:none;}

.slider, .slider .slider-img {
overflow: hidden;
height: 460px;
}
.slider {
width: 1200px;
margin: 50px auto;
position: relative;
}
.slider:hover .slider-btn {
color: #fff;
text-shadow: 0 0 5px #666;
}
.slider .slider-img {
width: 12000px;
position: relative;
}
.slider .slider-img .slider-img-ul {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.slider .slider-img .slider-img-ul li {
float: left;
}
.slider .slider-img .slider-img-ul li img {
width: 1200px;
height: 460px;
}
.slider .slider-dot ul {
position: absolute;
right: 50px;
bottom: 30px;
}
.slider .slider-dot ul li {
cursor: pointer;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
border: 2px solid #fff;
float: left;
margin-left: 10px;
}
.slider .slider-dot ul li.active, .slider .slider-dot ul li:hover {
background: #000;
}
.slider .slider-btn {
position: absolute;
width: 50px;
height: 100px;
top: 50%;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 28px;
text-decoration: none;
font-family: '黑体';
color: rgba(255, 255, 255, 0);
}
.slider .slider-btn:hover {
background: rgba(125, 125, 125, .3);
}
.slider .slider-btn.slider-btn-left {
left: 0;
margin-top: -50px;
}
.slider .slider-btn.slider-btn-right {
right: 0;
margin-top: -50px;
}

</style>

</head>
<body>
<div class="slider">
<div class="slider-img">
<ul class="slider-img-ul">
<li>
<div class="c5" style="background: green;width:1200px;height:460px"></div>
</li>
<li>
<div class="c1" style="background: blue;width:1200px;height:460px"></div>
</li>
<li>
<div class="c2" style="background:#333;width:1200px;height:460px"></div>
</li>
<li>
<div class="c3" style="background: pink;width:1200px;height:460px"></div>
</li>
<li>
<div class="c4"style="background: orange;width:1200px;height:460px"></div>
</li>
<li>
<div class="c5" style="background: green;width:1200px;height:460px"></div>
</li>
<li>
<div class="c1" style="background: blue;width:1200px;height:460px">hongjjjjjjjj111111</div>
</li>
</ul>
</div>

</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>;
<script>
var config={
current:0,
speed:500,
intervalTime:5000
};
;(function(){
var Xslider=function(g,userConfig){
var that=this;
this.g=g;
userConfig={w:this.g.width()}
this.userConfig=userConfig;
//this.config=config;
$.extend(config,userConfig)
this.config=config;
//保存查找dom元素
var slider_img=this.g.children('.slider-img');
var slider_img_ul=slider_img.children('ul');
var slider_img_ul_li=slider_img_ul.children("li")

     //初始化左右按钮
     this.g.append('<a href="javascript:" class="slider-btn slider-btn-left">&lt;</a>');
     this.g.append('<a href="javascript:" class="slider-btn slider-btn-right">&gt;</a>');
     var slider_btn_left=this.g.children('.slider-btn-left');
     var slider_btn_right=this.g.children('.slider-btn-right');

     //初始化左右圆点
     this.g.append('<div class="slider-dot"><ul></ul></div>');
     var slider_dot=this.g.children('.slider-dot');
     var slider_dot_ul=slider_dot.children("ul");
     var slider_img_length=slider_img_ul_li.length;
     for(var i=0;i<slider_img_length-2;i++){
        if(i===this.config.current){
            slider_dot_ul.append('<li class="active"></li>');
        }else{
            slider_dot_ul.append("<li></li>")
        }
     }
     var slider_dot_ul_li = slider_dot_ul.children('li')

     //初始化默认显示图片位置
     slider_img_ul.css('left',-this.config.w*this.config.current-this.config.w);

     //圆点切换点亮
     var active = function(i){
        slider_dot_ul_li.removeClass('active');
        slider_dot_ul_li.eq(i).addClass('active')
     }

     //右点击事件
     slider_btn_right.on('click',function(even){
        event.preventDefault();
        if(that.config.current<slider_img_length-2){
            toggleInterval();
            that.config.current++;
            if(that.config.current!=slider_img_length-2){
                slider_img_ul.stop().animate({left:-that.config.w*that.config.current-that.config.w},that.config.speed,function(){
                    active(that.config.current)
                })
            }
            if(that.config.current===slider_img_length-2){
                slider_img_ul.stop().animate({left:-that.config.w*that.config.current-that.config.w},that.config.speed,function(){
                    slider_img_ul.css('left',-that.config.w)
                    that.config.current=0;
                    active(that.config.current)
                })
            }
        }
     })

     //左点击事件
     slider_btn_left.on('click',function(event){
          event.preventDefault();
          if(that.config.current>-1){
               toggleInterval();
               that.config.current--;
               if(that.config.current!=-1){
                slider_img_ul.stop().animate({left:-that.config.w*that.config.current-that.config.w},that.config.speed,function(){
                    active(that.config.current);
                })
               }
               if(that.config.current===-1){
                slider_img_ul.stop().animate({left:0},that.config.speed,function(){
                    slider_img_ul.css('left',-that.config.w*(slider_img_length-2));
                    that.config.current=slider_img_length-3;
                    active(that.config.current);
                })
               }
          }

     })
     //dot点击事件
     slider_dot_ul_li.on('click',function(){
        event.preventDefault();
        toggleInterval();
        var index=$(this).index();
        active(index)
        slider_img_ul.stop().animate({left:-that.config.w*index-that.config.w},that.config.speed,function(){
            that.config.current=index;
        })
     })

     var sliderInt=setInterval(sliderInterval,that.config.intervalTime)
     function toggleInterval(){
        clearInterval(sliderInt);
        sliderInt = setInterval(sliderInterval,that.config.intervalTime)
     }

     //判断图片切换
     function sliderInterval(){
        if(that.config.current<slider_img_length-2){
            that.config.current++;
            slider_img_ul.stop().animate({left:-that.config.w*that.config.current-that.config.w},that.config.speed,function(){
                active(that.config.current)
                if(that.config.current===slider_img_length-2){
                    slider_img_ul.css("left",-that.config.w);
                    that.config.current =0;
                    active(that.config.current)
                }
            })
        }
     }
}//$function(){}
$.fn.extend({
    Xslider:function(){
      new Xslider($(this))  
    }
})

})(jQuery)
$(".slider").Xslider(config)
</script>

</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复