jQuery无缝滚动幻灯片

1.html代码：
<div class="header4">
<div class="e">
<div class="slide fl">
<ul class="slide_pics">
<li><a href=""><img src="img/yagao1.png" alt="幻灯片" /></a></li>
<li><a href=""><img src="img/衣服.jpg" alt="幻灯片" width="218px" height="336px" /></a></li>
</ul>
<ul class="points">

</ul>
</div>
<div class="slide1">
<ul class="slide_pics1">
<li><a href="#"><img src="img/cent1.jpg"></a></li>
<li><a href="#"><img src="img/cent2.jpg"></a></li>
</ul>
<ul class="points1">

</ul>
</div>
<div class="e2">
<div class="e3"><img src="img/头像.png"><p class="e31">立刻登陆,立刻省钱</p>
<a href="E:\html文件夹\denglu.html" target="_blank"><span class="e32">用户登陆</span></a>
<a href="zhuce.html" target="_blank"><span class="e33">新用户注册</span></a>
</div>
<div class="e4"><div class="e5"><img src="img/二维码.png"></div>
<img src="img/二维码1.png">
</div>
</div>
</div>
</div>

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></li>'); //第一个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');
}

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></li>'); //第一个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');
}

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;

}
})

jQuery无缝滚动 幻灯片

推荐阅读更多精彩内容

jQuery无缝滚动幻灯片