jQuery的无缝滚动和幻灯片

1.html代码：

  

    

        

            

                

                

            
        

            
            
        
        

            

                

                

            
            

                
            
        
        
        
            
立刻登陆,立刻省钱
                用户登陆
                新用户注册
                
            

            
        
        
    

2.css样式:

            .header4{
        width: 100%;
        height: 340px;
        background-color: #4074da;
        position: relative;
    }
    .e{
        width: 1190px;
        height: 340px;
        margin:0 auto;
        background-color: white;
    }
    .slide{
        width: 220px;
        height: 336px;
        position: relative;/* 父容器要设置定位，才能让子元素相对父容器定位 */
        overflow:hidden;
        float:left;
    }
    .slide .slide_pics{
        width: 220px;
        height: 336px;
        left:0;
        top:0;
        position:relative;
    }
    .slide .slide_pics li{
        width: 220px;
        height: 336px;
        left:0;
        top:0;
        position:absolute;
    }
    .slide ul{
        list-style: none;
    }
    .slide1{
        width: 750px;
        height: 340px;
        background-color: red;
        float:left;
        overflow: hidden;
        position: absolute;
        left: 577px;
        top: 0;
        float: left;
    }
    .slide1 .slide_pics1{
        width: 750px;
        height: 340px;
        left:0;
        top:0;
        position:relative;
        }
    .slide1 .slide_pics1 li{
        width: 750px;
        height: 340px;
        left:0;
        top:0;

        position:absolute;
    }
    .slide1 ul{
        list-style: none;
    }
    .points1{
        position: absolute;/* 块元素默认宽度为父宽度的100%，定位之后就变成行内块了，它不能继承父的宽度，如果没有设置宽高，就由内容决定，所以也必须给它一个宽度 */
        width: 100%;
        height: 5px;
        /*background-color: red;*/
        left: 0;
        bottom: 9px;
        text-align: center;/* 行内块的居中方式 */
        font-size: 0px;/* 去掉行内块间隙，它引起小圆点没有挨紧，并且向下超出高度范围 */
    }
    .points1 li{
        width: 11px;
        height: 11px;

        display: inline-block;
        background-color: #9f9f9f;
        margin: 0 5px;
        border-radius: 50%;/* 设置圆角，优雅降级，更好效果请升级浏览器，不兼容IE */
    }
    .points1 .active1{

        background-color: black;
    }
    .points{
        position: absolute;/* 块元素默认宽度为父宽度的100%，定位之后就变成行内块了，它不能继承父的宽度，如果没有设置宽高，就由内容决定，所以也必须给它一个宽度 */
        width: 100%;
        height: 5px;
        /*background-color: red;*/
        left: 0;
        bottom: 9px;
        text-align: center;/* 行内块的居中方式 */
        font-size: 0px;/* 去掉行内块间隙，它引起小圆点没有挨紧，并且向下超出高度范围 */
    }
    .points li{
        width: 11px;
        height: 11px;
        display: inline-block;
        background-color: #9f9f9f;
        margin: 0 5px;
        border-radius: 50%;/* 设置圆角，优雅降级，更好效果请升级浏览器，不兼容IE */
    }
    .points .active{
        background-color: black;
    }

js代码:

    $(function(){
var $li = $('.slide_pics li');
var len = $li.length;//4张
// var $prev = $('.prev');//左按钮
// var $next = $('.next');//右按钮
var nextli = 0;//将要运动过来的li
var nowli = 0;//当前要离开的li
var timer = null;


//除第一个li，都定位到右侧
$li.not(':first').css({left:600});

//动态创建小圆点
$li.each(function(index){
    //创建li
    var $sli = $('
');
    //第一个li添加选中样式
    if(index == 0){
        $sli.addClass('active');
    }
    //将小圆点的li添加到ul中
    $sli.appendTo('.points');
})

$points = $('.points li');
// alert($points.length);//4个小圆点

//小圆点的点击事件
$points.click(function() {
    nextli = $(this).index();
    //当点击当前张的小圆点时，不做任何操作，防止跳变的Bug
    if(nextli == nowli){
        return;
    }
    move();
    $(this).addClass('active').siblings().removeClass('active');
});

//左按钮的点击事件
// $prev.click(function() {
//  nextli--;
//  move();
//  //改变圆点样式
//  $points.eq(nextli).addClass('active').siblings().removeClass('active');
// });

// //右按钮的点击事件
// $next.click(function() {
//  nextli++;
//  move();
//  //改变圆点样式
//  $points.eq(nextli).addClass('active').siblings().removeClass('active');
// });

//针对外层的slide做鼠标进入和离开事件，因为鼠标指针有可能进入到左右翻页和小圆点的范围
//mouseenter使鼠标进入子元素也能清除定时器
$('.slide').mouseenter(function() {
    clearInterval(timer);
});
$('.slide').mouseleave(function() {
    timer = setInterval(autoplay, 3000);
});

//定时器循环自动播放
timer = setInterval(autoplay, 3000);

//自动播放的逻辑与点击下一张是相同的
function autoplay(){
    nextli++;
    move();
    //改变圆点样式
    $points.eq(nextli).addClass('active').siblings().removeClass('active');
}

function move(){
    //向右走到第一张，再继续走时
    if(nextli < 0){
        nextli = len - 1;//将要来的是最后一张
        nowli = 0;//要离开的是第一张
        $li.eq(nextli).css({left:-600});//把最后一张定位到左侧，准备进入
        $li.eq(nowli).stop().animate({left: 600});//离开的第一张走到右侧
        $li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
        nowli = nextli;//要离开的赋值为刚进入的最后一张
        return;//下边是正常情况的，不执行，直接返回
    }
    //向左走到最后一张，再继续走时
    if(nextli > len - 1){
        nextli = 0;//将要来的是第一张
        nowli = len - 1;//要离开的是最后一张
        $li.eq(nextli).css({left:600});//把第一张定位到右侧，准备进入
        $li.eq(nowli).stop().animate({left: -600});//离开的最后一张走到左侧
        $li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
        nowli = nextli;//要离开的赋值为刚进入的第一张
        return;//下边是正常情况的，不执行，直接返回
    }
    
    if(nextli > nowli){
        //马上要进来的这张瞬间移动到右边
        $li.eq(nextli).css({left:220});
        //当前这张离开
        $li.eq(nowli).stop().animate({left: -220});
    }else{
        //马上要进来的这张瞬间移动到左边
        $li.eq(nextli).css({left:-220});
        //当前这张离开
        $li.eq(nowli).stop().animate({left: 220});
    }
    //马上要进来的这张走到0的位置
    $li.eq(nextli).stop().animate({left: 0});
    nowli = nextli;
}
})
$(function(){
var $li = $('.slide_pics1 li');
var len = $li.length;//4张
// var $prev = $('.prev');//左按钮
// var $next = $('.next');//右按钮
var nextli = 0;//将要运动过来的li
var nowli = 0;//当前要离开的li
var timer = null;


//除第一个li，都定位到右侧
$li.not(':first').css({left:750});

//动态创建小圆点
$li.each(function(index){
    //创建li
    var $sli = $('
');
    //第一个li添加选中样式
    if(index == 0){
        $sli.addClass('active1');
    }
    //将小圆点的li添加到ul中
    $sli.appendTo('.points1');
})

$points1 = $('.points1 li');
// alert($points1.length);//4个小圆点

//小圆点的点击事件
$points1.click(function() {
    nextli = $(this).index();
    //当点击当前张的小圆点时，不做任何操作，防止跳变的Bug
    if(nextli == nowli){
        return;
    }
    move();
    $(this).addClass('active1').siblings().removeClass('active1');
});

// //左按钮的点击事件
// $prev.click(function() {
//  nextli--;
//  move();
//  //改变圆点样式
//  $points1.eq(nextli).addClass('active1').siblings().removeClass('active1');
// });

// //右按钮的点击事件
// $next.click(function() {
//  nextli++;
//  move();
//  //改变圆点样式
//  $points1.eq(nextli).addClass('active1').siblings().removeClass('active1');
// });

//针对外层的slide做鼠标进入和离开事件，因为鼠标指针有可能进入到左右翻页和小圆点的范围
//mouseenter使鼠标进入子元素也能清除定时器
$('.slide1').mouseenter(function() {
    clearInterval(timer);
});
$('.slide1').mouseleave(function() {
    timer = setInterval(autoplay, 3000);
});

//定时器循环自动播放
timer = setInterval(autoplay, 3000);

//自动播放的逻辑与点击下一张是相同的
function autoplay(){
    nextli++;
    move();
    //改变圆点样式
    $points1.eq(nextli).addClass('active1').siblings().removeClass('active1');
}

function move(){
    //向右走到第一张，再继续走时
    if(nextli < 0){
        nextli = len - 1;//将要来的是最后一张
        nowli = 0;//要离开的是第一张
        $li.eq(nextli).css({left:-750});//把最后一张定位到左侧，准备进入
        $li.eq(nowli).stop().animate({left: 750});//离开的第一张走到右侧
        $li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
        nowli = nextli;//要离开的赋值为刚进入的最后一张
        return;//下边是正常情况的，不执行，直接返回
    }
    //向左走到最后一张，再继续走时
    if(nextli > len - 1){
        nextli = 0;//将要来的是第一张
        nowli = len - 1;//要离开的是最后一张
        $li.eq(nextli).css({left:600});//把第一张定位到右侧，准备进入
        $li.eq(nowli).stop().animate({left: -750});//离开的最后一张走到左侧
        $li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
        nowli = nextli;//要离开的赋值为刚进入的第一张
        return;//下边是正常情况的，不执行，直接返回
    }
    
    if(nextli > nowli){
        //马上要进来的这张瞬间移动到右边
        $li.eq(nextli).css({left:750});
        //当前这张离开
        $li.eq(nowli).stop().animate({left: -750});
    }else{
        //马上要进来的这张瞬间移动到左边
        $li.eq(nextli).css({left:-750});
        //当前这张离开
        $li.eq(nowli).stop().animate({left: 750});
    }
    //马上要进来的这张走到0的位置
    $li.eq(nextli).stop().animate({left: 0});
    nowli = nextli;
}
})