自适应支持鼠标手机触摸滑动切换图片焦点图

在百度搜索了不少的切换焦点图,代码太长,功能无法满足需求,最后还是静下心来自己写一个,代码很简单,就是JQ的拼接,主要是JS。

设置自适应窗口大小:$(window).resize(),

播放:setInterval(‘sider(“#sider”)’, 2000);

无线触摸滑动:touch

HTML:


<div id="banner">
 
<ul id="sider">
 
<li><img src="img/1.jpg" alt="" /></li>
 
<li><img src="img/2.jpg" alt=""/></li>
 
<li><img src="img/3.jpg" alt="" /></li>
 
<li><img src="img/4.jpg" alt="" /></li>
 
</ul>
 
<ul id="sort_dot">
 
<li></li><li></li><li></li><li></li>
 
</ul>
 
</div>
 
<input type="button" value="left" class="left"/>
 
<input type="button" value="right" class="right"/>
 
<input type="button" value="改变大小" class="change"/>
 

CSS:


*{
            padding: 0;
            margin: 0;
        }
#sort_dot{width:80%;}
        ul li{list-style-type: none}
        #banner{
            overflow: hidden;
        }
        #banner ul{
            overflow: hidden;
        }
        #banner ul>li{
            float: left;
        }
        img{
            max-width: 100%;
        }
JS:
function sider(div){
if(count==$li.length-1){
count=0;
             }else{
count=count+1;
             }
$(div).animate({marginLeft:-w*count},600);
}
var myar = setInterval('sider("#sider")', 2000);
 $(function () {
$("#sider").hover(function () { clearInterval(myar); }, function () {myar = setInterval('sider("#sider")', 2000) });
 })
//初始化
var $li=$("#sider>li"),
   w=800,
            h=400,
count=0;
$("#sider>li").width(w);
$("#banner").width(w);
$("#sider").width(w*$li.length*2);
$("#sider>li").height(h);
$("#banner").height(h);
$("#sider").height(h);
$("#sider>li>img").height(h);
$("#sider>li>img").width(w);
       $('.right').click(function () {
   clearInterval(myar);
if(count==$li.length-1){
count=0;
}else{
count=count+1;
}
$("#sider").animate({marginLeft:-w*count},600);
myar = setInterval('sider("#sider")', 2000);
            })
            $('.left').click(function () {
clearInterval(myar);
if(count==0){
count=$li.length-1;
}else{
count=count-1;
}
$("#sider").animate({marginLeft:-w*count},600);
myar = setInterval('sider("#sider")', 2000);
        })
$('.change').click(function () {
w=900;
h=500;
$("#sider>li").width(w);
$("#banner").width(w);
$("#sider").width(w*$li.length*2);
$("#sider>li").height(h);
$("#banner").height(h);
$("#sider").height(h);
$("#sider>li>img").height(h);
$("#sider>li>img").width(w);
})
//手持滑动
 var sx,ex,mx,touch;
$('#sider>li').on('touchstart',function(e) {
    touch = e.originalEvent.targetTouches[0];
    sx = touch.pageX;
});
$('#sider>li').on('touchend',function(e) {
    touch = e.originalEvent.changedTouches[0];
    ex = touch.pageX;
    mx=ex-sx;
if(mx>30){
clearInterval(myar);
if(count==0){
count=$li.length-1;
}else{
count=count-1;
}
$("#sider").animate({marginLeft:-w*count},600);
myar = setInterval('sider("#sider")', 2000);
}
if(mx<-30){
clearInterval(myar);
if(count==$li.length-1){
count=0;
}else{
count=count+1;
}
$("#sider").animate({marginLeft:-w*count},600);
myar = setInterval('sider("#sider")', 2000);
}
//function结束标示
});
End:感谢阅读,感谢打赏!

你也来说两句呗

电子邮件地址不会被公开。 必填项已用*标注

共 2 条评论

  1. 李明说道:

    我也使用百度云加速,好像不错的。

    • 零分说道:

      @李明 其实是,不知道为什么。我用百度云加速的话,就经常出现 提示 百度云加速 5秒后转入。设置来设置去,有时候也都还会出现!