实现思路：
- 图片采用绝对定位来盖在一起，底部的滚动块使用拼图的方法，分左中右三个盒子，一起放在大盒子里居中显示。中间的线条采用背景平铺的方式来呈现，滑块要想动就得采用绝对定位，让它定在中间的盒子里。
- 滑块要想动使用
拖放模板函数
bar.onmousedown = function(event){
event = event || window.event;
deltaX = event.clientX - bar.offsetLeft;
document.onmousemove = function(event){
event = event || window.event;
var x = event.clientX - deltaX;
bar.style.left = x + "px";
}
}
- 这时候发现滑块超出范围，验收截断
// 得到滑块的位置进行验收
if(x < 0){
x = 0;
}else if(x > maxwidth){
x = maxwidth;
}
- 这时候最难得是怎么让图片跟随滑块运动，而且滑块是一咯噔一咯噔的让图片显示。假设图片的编号是
idx滑道的长度是400px长，0~99px 是第一张图片，100~199px 是第二张图片，200~299px 是第三张图片，300~399px 是第四张图片，过了400是第五张图片，我们要想要idx图片的编号值，只需要idx = parseInt(区间值/100)，然后去算移动滑块的值先设为x，那么x=idx*100，这个100步长step，是400/4 =100（五张图第一张不动，所以的跳四次，step的步就得为100）。这样算的话发现过了下图的标号五没长了，还怎么移动，嘿嘿，多出的部分其实是滑块的长这样鼠标就能移出，触发事件。
- 另一个难点鼠标点击滑道切换图片，一百内，点到049显示第一张，5099开始显示第二张，这时就更简单了，直接除以步长step使用Math.round约分得到idx。
idx = Math.round(x / step);
附上源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易滑块</title>
<style>
* {
margin: 0;
padding: 0;
}
.car {
width: 549px;
height: 412px;
margin: 100px auto;
border: 1px solid #0f0;
}
.car ul li img {
height: 375px;
width: 500px;
}
.car ul {
list-style: none;
height: 375px;
width: 500px;
}
.car ul li {
position: absolute;
display: none;
}
.car ul li.cur {
display: block;
}
.car .car_pic_ctr {
width: 405px;
height: 26px;
margin: 0 auto;
line-height: 26px;
font-size: 12px;
background: url(images/wangyi/car_pic_ctr.png) repeat-x 0 -26px;
}
.car .car_pic_ctr .ctr_l {
float: left;
width: 0;
height: 26px;
padding-left: 20px;
background: url(images/wangyi/car_pic_ctr.png) no-repeat 0 0;
}
.car .car_pic_ctr .ctr_c {
float: left;
width: 300px;
height: 26px;
margin: 0 20px;
position: relative;
background: url(images/wangyi/car_pic_ctr.png) repeat-x 0 -52px;
cursor: pointer;
}
.car .car_pic_ctr .ctr_r {
float: right;
width: 0;
height: 26px;
padding-right: 45px;
background: url(images/wangyi/car_pic_ctr.png) no-repeat 25px -78px;
}
.car .car_pic_ctr .ctr_c i {
position: absolute;
top: 0;
left: 0;
width: 21px;
height: 26px;
background: url(images/wangyi/car_pic_ctr.png) no-repeat 0 -104px;
}
</style>
</head>
<body>
<div class="car">
<ul>
<li class="cur"><img src="images/wangyi/0.jpg" alt=""></li>
<li><img src="images/wangyi/1.jpg" alt=""></li>
<li><img src="images/wangyi/2.jpg" alt=""></li>
<li><img src="images/wangyi/3.jpg" alt=""></li>
<li><img src="images/wangyi/4.jpg" alt=""></li>
</ul>
<div class="car_pic_ctr">
<div class="ctr_l">0°</div>
<div class="ctr_c" id="ctr_c">
<i id="btn"></i>
</div>
<div class="ctr_r">180°</div>
</div>
</div>
<script>
// 得到滑块
var bar = document.getElementById("btn");
var slide = document.getElementById("ctr_c");
var lis = document.getElementsByTagName("li");
// 得到滑道与滑块的差就是滑块的最大移动距离
var maxwidth = slide.offsetWidth - bar.offsetWidth;
// 移动图片的编号
var idx = 0;
// 得到步长.多长运动一次
var step = maxwidth / (lis.length - 1);
// 按下滑块
bar.onmousedown = function(event){
// 兼容IE
event = event || window.event;
// 计算鼠标到bar盒子内部的位置
deltaX = event.clientX - bar.offsetLeft;
document.onmousemove = function(event){
// 兼容IE
event = event || window.event;
// bar盒子到最近定位盒子的距离
var x = event.clientX - deltaX;
// 得到滑块的位置进行验收
if(x < 0){
x = 0;
}else if(x > maxwidth){
x = maxwidth;
}
// 检测移动的距离是否发生变化，如果变化在改变位置
if(idx != parseInt(x / step)){
// 去掉老的图片
lis[idx].className = "";
// 得到新的bar的距离值
idx = parseInt(x / step);
x = idx * step;
// 改变bar滑块的位置
bar.style.left = x + "px";
// 加载新的图片
lis[idx].className = "cur";
}
//阻止默认的事件，比如圈选文字
return false;
}
}
// 放下鼠标，放弃事件监听
document.onmouseup = function(){
document.onmousemove = null;
}
// 鼠标点击滑道切换图片
slide.onmousedown = function(event){
// 兼容IE
event = event || window.event;
//你鼠标点击的x位置
// 得到盒子的静位置
//第一种缺点截断
//var x = event.clientX - slide.offsetX;
//第二种以前的火狐兼容问题，现在已经兼容
//var x = event.offsetX;
//第三种getAllTop
var x = event.clientX - getAllLeft(slide);
//让老信号量的图去掉cur
lis[idx].className = "";
//信号量改变
idx = Math.round(x / step);
//改变滑块位置
bar.style.left = x + "px";
// 加载新的图片
lis[idx].className = "cur";
//阻止默认的事件，比如圈选文字
return false;
}
// 得到页面的静top
function getAllLeft(obj){
var allleft = obj.offsetLeft;
while(obj = obj.offsetParent){
allleft += obj.offsetLeft;
}
return allleft;
}
</script>
</body>
</html>
网易汽车滑块断点移动
思考：
//鼠标点击的x位置两种保险的方法
var x = event.clientX - slide.offsetLeft;如果在滑道slide盒子的外面添加添加一个定位就会有offsetparent 那么 slide.offsetLeft 就不是到浏览器的距离，直接导致 x 值发生改变。
如何得到盒子里面的静位置？
1.var x= event.offsetX;
- var x = event.clientX - getAllLeft(slide);
使用jQuery和jQuery ui 改写
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script>
// 得到滑块
var bar = $("#btn");
var slide = $("#ctr_c");
var lis = $("li");
var maxwidth = slide.outerWidth() - bar.outerWidth();
var step = maxwidth / (lis.length - 1),idx = 0;
//拖拽模块
bar.draggable({
containment : "parent",
grid : [step],
drag : function(event,ui){
if(idx != parseInt(ui.position.left / step)){
lis.eq(idx).removeClass("cur");
idx = parseInt(ui.position.left / step);
lis.eq(idx).addClass("cur");
}
}
});
//点击模块
slide.click(function(event){
if(idx != Math.round(event.offsetX / step)){
lis.eq(idx).removeClass("cur");
idx = Math.round(event.offsetX / step);
lis.eq(idx).addClass("cur");
bar.css("left" , idx * step);
}
});
</script>
</body>
</html>
网友评论