JS实现可用滑块滑动的缓动图代码

尝试模仿京东的“发现好货”模块的可用滑块滑动的缓动图

JS代码

function $(id) { return document.getElementById(id); }
//缓动轮播图
var fhTimer;
var fhNum = 0;
var barNum = 0;
fhTimer = setInterval(marquee, 20);
function marquee() {
 fhNum--;
 barNum = fhNum;
 if(fhNum < -2400) {
 fhNum = 0;
 }
 $("fhc_ul").style.left = fhNum + "px";
 if(fhNum < -2400) {
 barNum = fhNum + 2400;
 }
 $("fhc_dBar").style.left = -(barNum / 2.75) + "px";
}
$("fhcShow").onmouseover = function() {
 $("fhc_d_box").style.display = "block";
 clearInterval(fhTimer);
}
$("fhc_d_box").onmouseover = function() {
 $("fhc_d_box").style.display = "block";
}
$("fhcShow").onmouseout = function() {
 $("fhc_d_box").style.display = "none";
 fhTimer = setInterval(marquee, 20);
}
//鼠标悬浮在标题也在暂停滚动
$("fhTit").onmouseover = function() {
 clearInterval(fhTimer);
}
$("fhTit").onmouseout = function() {
 fhTimer = setInterval(marquee, 20);
}
//滑块
$("fhc_dBar").onmousedown = function(event) {
 var event = event || window.event;
 var leftValue = event.clientX - this.offsetLeft;
 document.onmousemove = function(event) {
 var evt = event || window.event;
 var locationX = evt.clientX - leftValue;
 if(locationX < 0) {
 locationX = 0;
 }
 else if(locationX > 960 - 99) {
 locationX = 960 - 99;
 }
 $("fhc_dBar").style.left = locationX + "px";
 fhNum = -locationX * 2.75;
 //如果选中了，就取消选中，防止出现bug
 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
 }
 document.onmouseup = function() {
 document.onmousemove = null;//取消注册的这个事件
 }
}

HTML代码

<div class="fxhh_ctt">
 <div class="fh_c_show" id="fhcShow">
 <ul class="fh_c_under" id="fhc_ul">
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <p class="topTit">商品1</p>
 <img src="" alt="">
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="" alt="">
 <p class="botTit">商品2</p>
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <p class="topTit">商品3</p>
 <img src="" alt="">
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="" alt="">
 <p class="botTit">商品4</p>
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <p class="topTit">商品5</p>
 <img src="" alt="">
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="" alt="">
 <p class="botTit">商品6</p>
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <p class="topTit">商品7</p>
 <img src="" alt="">
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="" alt="">
 <p class="botTit">商品8</p>
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <p class="topTit">商品9</p>
 <img src="" alt="">
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="" alt="">
 <p class="botTit">商品10</p>
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <p class="topTit">商品11</p>
 <img src="" alt="">
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="" alt="">
 <p class="botTit">商品12</p>
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <p class="topTit">商品1</p>
 <img src="" alt="">
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="" alt="">
 <p class="botTit">商品2</p>
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <p class="topTit">商品3</p>
 <img src="" alt="">
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <img src="" alt="">
 <p class="botTit">商品4</p>
 </a></li>
 <li><a href=" " rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <p class="topTit">商品5</p>
 <img src="" alt="">
 </a></li>
 </ul>
 </div>
 <!-- 滑块 -->
 <div class="fhc_box" id="fhc_d_box">
 <div class="fhc_drop" id="fhc_dBar"></div>
 </div>
 <!-- 滑块end -->
</div>
CSS代码
.fxhh .fxhh_ctt {
 width: 990px;
 background-color: #fff;
 float: left;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under img {
 width: 150px;
 height: 150px;
}
.fxhh .fxhh_ctt .fh_c_show {
 width: 990px;
 height: 260px;
 background-color: #fff;
 overflow: hidden;
 position: relative;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under {
 width: 2000%;
 position: absolute;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under li {
 float: left;
 text-align: center;
 width: 150px;
 height: 180px;
 margin-top: 40px;
 margin-right: 50px;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under li .topTit {
 margin-bottom: 10px;
}
.fxhh .fxhh_ctt .fh_c_show .fh_c_under li .botTit {
 margin-top: 10px;
}
.fxhh .fxhh_ctt .fhc_box {
 display: none;
 width: 960px;
 height: 4px;
 background-color: #f3f3f3;
 margin: 0 auto;
 position: absolute;
 top: 250px;
 left: 210px;
}
.fxhh .fxhh_ctt .fhc_drop {
 width: 99px;
 height: 9px;
 border-radius: 4px;
 background-color: #d8d8d8;
 position: absolute;
 top: -3px;
}

总结

以上所述是小编给大家介绍的JS实现可用滑块滑动的缓动图代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！