幻灯片幻灯片

无缝滚动
无缝滚动 - 锐客网body,ul,li{margin:0; padding:0}
ul{list-style:none; }
.slide{
width:500px;
height:100px;
border:1px solid #ddd;
margin:20px auto 0;
position:relative;
overflow:hidden;
}
.slide ul{
position:absolute; /相对于slide进行绝对定位/
width:1000px; /比slide宽度大一倍，做这种连续滚动效果的时候，要在后面把内容复制一份/
height:100px;
left:0; /可以改变该值让其动起来/
top:0;
}
.slide ul li{
width:90px;
height:90px;
margin:5px;
background-color:#ccc;
line-height:90px;
text-align: center;
font-size:30px;
float:left;
}
.btns{
width:500px;
height:50px;
margin:10px auto 0;
}
- 1
- 2
- 3
- 4
- 5

效果如图
[图片上传失败...(image-178d03-1535696474925)]
2)幻灯片
html代码

幻灯片 - 锐客网

文章图片文章图片文章图片文章图片

css代码
body{
font-family: 'Microsoft Yahei';
color: #666;
font-size: 12px;
}
【幻灯片】.center_con{
width: 600px;
height: 400px;
/background-color: cyan; /
margin: 50px auto 0;
}
/* ----------幻灯片样式---------- /
.slide{
width: 600px;
height: 400px;
position: relative; / 父容器要设置定位，才能让子元素相对父容器定位 */
overflow:hidden;
}
.slide .slide_pics{
width: 600px;
height: 400px;
left:0;
top:0;
position:relative;
}
.slide .slide_pics li{
width: 600px;
height: 400px;
left:0;
top:0;
position:absolute;
}
/* 左右翻页箭头样式 /
.prev,.next{
width: 20px;
height: 24px;
position: absolute; / 相对父容器进行绝对定位 /
left:10px;
top:188px;
cursor: pointer; / 鼠标指针成手形 */
background: url(../images/icons.png) 0px -450px no-repeat;
}
.next{
left: 570px;
background: url(../images/icons.png) 0px -500px no-repeat;
}
/* 小圆点样式 /
.points{
position: absolute; / 块元素默认宽度为父宽度的100%，定位之后就变成行内块了，它不能继承父的宽度，如果没有设置宽高，就由内容决定，所以也必须给它一个宽度 /
width: 100%;
height: 11px;
/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: #cecece;
}
jQuery代码
[图片上传失败...(image-9a3802-1544440848458)]
li = [图片上传失败...(image-c44a8b-1544440848458)]
li.length; //4张
var [图片上传失败...(image-7d8534-1544440848458)]
('.prev'); //左按钮
var [图片上传失败...(image-52efe-1544440848458)]
('.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:600}); //当前这张离开 $li.eq(nowli).stop().animate({left: -600}); }else{ //马上要进来的这张瞬间移动到左边 $li.eq(nextli).css({left:-600}); //当前这张离开 $li.eq(nowli).stop().animate({left: 600}); } //马上要进来的这张走到0的位置 $li.eq(nextli).stop().animate({left: 0}); nowli = nextli; }

})