自己写的轮播效果

最新推荐文章于 2020-12-17 20:54:34 发布

prient_top

最新推荐文章于 2020-12-17 20:54:34 发布

阅读量499

点赞数 1

分类专栏： js 文章标签： html jquery 轮播

本文链接：https://blog.csdn.net/qq_22858601/article/details/53893708

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

直接上源码

html

<div class="index-liu-item-botton">
<ul>
<li data-id='0'>
<img src="images/index-liu-item-2.png" alt="">
<div class="index-liu-item-botton-right">
<h3>豪迈照明品质值得信赖1</h3>
<p>豪迈照明是大品牌，他们的产品通过CQC质量管理体系认证以及CE认证，产品符合ISO9001：2000质量管理体系标准。我们公司在挑选合作者是首先</p>
</div>
</li>
<li data-id='1'>
<img src="images/index-liu-item-2.png" alt="">
<div class="index-liu-item-botton-right">
<h3>豪迈照明品质值得信赖2</h3>
<p>豪迈照明是大品牌，他们的产品通过CQC质量管理体系认证以及CE认证，产品符合ISO9001：2000质量管理体系标准。我们公司在挑选合作者是首先</p>
</div>
</li>
<li data-id='2'>
<img src="images/index-liu-item-2.png" alt="">
<div class="index-liu-item-botton-right">
<h3>豪迈照明品质值得信赖3</h3>
<p>豪迈照明是大品牌，他们的产品通过CQC质量管理体系认证以及CE认证，产品符合ISO9001：2000质量管理体系标准。我们公司在挑选合作者是首先</p>
</div>
</li>
<li data-id='3'>
<img src="images/index-liu-item-2.png" alt="">
<div class="index-liu-item-botton-right">
<h3>豪迈照明品质值得信赖4</h3>
<p>豪迈照明是大品牌，他们的产品通过CQC质量管理体系认证以及CE认证，产品符合ISO9001：2000质量管理体系标准。我们公司在挑选合作者是首先</p>
</div>
</li>
</ul>
</div>

$(function(){

var num=0;
var times;
var time;
var size;
//自动加载
function lbload(nums){
var length_size=$('.index-liu-item-botton').find('ul').eq(0).width();
var size=0;
if(nums>0){
// alert('+');
for(var i=0;i<nums;i++){
//复制
$('.index-liu-item-botton').find('ul').eq(0).append($('.index-liu-item-botton').find('ul').eq(0).find('li').eq(i).clone(true));
//清除第一个
$('.index-liu-item-botton').find('ul').eq(0).find('li').eq(i).remove();
}
}else if(nums<0){
nums=-nums-1;
for(var i=0;i<nums+1;i++){
//复制
$('.index-liu-item-botton').find('ul').eq(0).prepend($('.index-liu-item-botton').find('ul').eq(0).find('li').eq($('.index-liu-item-botton').find('ul').eq(0).find('li').length-1).clone(true));
//清除第一个
$('.index-liu-item-botton').find('ul').eq(0).find('li').eq($('.index-liu-item-botton').find('ul').eq(0).find('li').length-1).remove();
}
}
load_size=12.8;

times = setInterval(function(){
size+=load_size;
$('.index-liu-item-botton').find('ul').eq(0).css('margin-left',-size+'px');
if(Math.round(size%512)==0){

//复制
$('.index-liu-item-botton').find('ul').eq(0).append($('.index-liu-item-botton').find('ul').eq(0).find('li').eq(num).clone(true));
//清除第一个
$('.index-liu-item-botton').find('ul').eq(0).find('li').eq(num).remove();
//清除margin-left
$('.index-liu-item-botton').find('ul').eq(0).css('margin-left','0px');
//设置小点点
var nums=$('.index-liu-item-botton').find('ul').eq(0).find('li').eq(0).attr('data-id');
$('.index-liu-item-yuan').find('div').eq(nums).siblings().removeClass('yuan-active');
$('.index-liu-item-yuan').find('div').eq(nums).addClass('yuan-active');
clearInterval(times);
time=setTimeout(lbload,2000);
}
},10);
}
lbload(0);
//小点定位
$('.index-liu-item-yuan').find('div').each(function(){
$(this).click(function(){
var nums=$(this).attr('data-id');
var nums_s=$('.yuan-active').attr('data-id');
if(nums_s!=nums){
clearInterval(times);
clearInterval(time);
var avg=nums-nums_s;
// alert(avg);
// return false;
lbload(avg-1);
}
})
})
})