点击按钮图片左右滚动

最新推荐文章于 2021-06-04 08:35:34 发布

絮飘

最新推荐文章于 2021-06-04 08:35:34 发布

阅读量2.8k

点赞数

分类专栏： Jquery 文章标签： jquery class function scroll float border

Jquery 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 图片切换特效鼠标点击左右按钮焦点图切换滚动</title>
</head>

<body>
<style type="text/css">
/* reset */
*{margin:0;padding:0;list-style-type:none;}
:focus{outline:0;}
img{vertical-align:middle;}
a,img{border:0;}
a,a:visited{color:#6a6a6a;text-decoration:none;}
a:hover{color:#7bbb05;text-decoration:none;}
.f-l{float:left;}.f-r{float:right;}
body{font:12px/180% Helvetica,Arial,sans-serif,"宋体";color:#636363;}
/* focus */
.focus{width:622px;overflow:hidden;position:relative;margin:0 auto;}
.focus .focuspic{height:340px;width:999em;position:relative;float:left;}
.focus .focuspic .indexbanner{float:left;width:620px;position:relative;height:340px;overflow:hidden;border:solid 1px #3366cc;}
/* scrollbox */
.scrollbox{height:190px;padding:20px 0;float:left;}
.scrollbox .scrollbtn{width:12px;height:37px;margin:38px 0 0 0;overflow:hidden;background:url(images/arrow.gif) no-repeat;cursor:pointer;}
.scrollbox #prev{background-position:0 0;}
.scrollbox #prev.disabled{background-position:0 -37px;cursor:default;}
.scrollbox #next{background-position:-12px 0;}
.scrollbox #next.disabled{background-position:-12px -37px;cursor:default;}
.scrollbox .scrollpic{float:left;margin:0 16px 0 16px;display:inline;width:562px;height:190px;overflow:hidden;}
.scrollbox .scrollpic ul{width:999em;float:left;display:inline;}
.scrollbox .scrollpic li{float:left;width:188px;text-align:center;}
.scrollbox .scrollpic li a img{border:solid 1px #ddd;padding:5px;}
.scrollbox .scrollpic li a span{display:block;height:30px;line-height:30px;cursor:pointer;}
.scrollbox .scrollpic li a:hover span,.scrollbox .scrollpic li.current a span{color:#3366cc;font-weight:800;}
.scrollbox .scrollpic li.current a img{border:solid 1px #3366cc;}
</style>
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
$(function(){

var animate_time=200;//动画时间：0.3秒
var interval_time=3000;//播放间隔时间：5秒
var picnumber=$(".scrollpic li").size()-1;//计算广告的数量
var slideclick = 0;//初始化

//循环函数
function autoplay(){
  slideclick++;
  if(slideclick<=picnumber){
   $(".scrollpic li").eq(slideclick).trigger("dblclick");
  }else{
   $(".scrollpic li").eq(0).trigger("dblclick");
   slideclick = 0
  }
}

//设置循环时间，自动开始循环
var auto_setInterval = setInterval(autoplay,interval_time);

//悬停广告区域时播放停止
$(".focus").hover(function(){
clearInterval(auto_setInterval);
},function(){
auto_setInterval = setInterval(autoplay,interval_time);
});

//小图点击时，开始动画
$(".scrollpic li").dblclick(function(){

  slideclick=$(".scrollpic li").index($(this));

  $(".scrollpic li").removeClass("current");
  $(this).addClass("current");

  //大图上移
  $(".focus .focuspic").animate({"marginLeft":slideclick*-622},{duration:animate_time,queue:false});

  //控制缩略图显示个数
  if(slideclick<picnumber){
   if(slideclick==0||slideclick==1){
    $(".scrollpic ul").animate({"marginLeft":"0px"},{duration:animate_time,queue:false});
   }else{
    $(".scrollpic ul").animate({"marginLeft":(slideclick-1)*-188},{duration:animate_time,queue:false});//显示最后4张图片不在滚动
   }
  }

  //判断上下按钮是否可点击
  if(slideclick==0){
   $(".scrollbox #prev").addClass("disabled");
   $(".scrollbox #next").removeClass("disabled");
  }else if(slideclick==picnumber){
   $(".scrollbox #prev").removeClass("disabled");
   $(".scrollbox #next").addClass("disabled");
  }else{
   $(".scrollbox #prev").removeClass("disabled");
   $(".scrollbox #next").removeClass("disabled");
  }

});

//鼠标在小图上悬停时，相关移动
$(".scrollpic li").mouseover(function(){

  var slidebtn_hover_chi = $(".scrollpic li").index($(this));

  $(".scrollpic li").removeClass("current");
  $(this).addClass("current");

  $(".focuspic").animate({"marginLeft":slidebtn_hover_chi*-622},{duration:animate_time,queue:false});

  if(slidebtn_hover_chi!=slideclick);

  slideclick=slidebtn_hover_chi;

  //判断上下按钮是否可点击
  if(slideclick==0){
   $(".scrollbox #prev").addClass("disabled");
   $(".scrollbox #next").removeClass("disabled");
  }else if(slideclick==picnumber){
   $(".scrollbox #prev").removeClass("disabled");
   $(".scrollbox #next").addClass("disabled");
  }else{
   $(".scrollbox #prev").removeClass("disabled");
   $(".scrollbox #next").removeClass("disabled");
  }

});

//点击向上按钮时
$(".scrollbox #prev").click(function(){
  slideclick=slideclick-1;
  if(slideclick<0){
   slideclick=0;
  }
  $(".scrollpic li").eq(slideclick).trigger("dblclick");
});

//点击向下按钮时
$(".scrollbox #next").click(function(){
  slideclick=slideclick+1;
  if(slideclick<=picnumber){
   slideclick=picnumber;
   $(".scrollpic li").eq(slideclick).trigger("dblclick");
   $(".scrollpic ul").animate({"marginLeft":(slideclick-2)*-188},{duration:animate_time,queue:false});// 缩略图最后滚动的左侧距离位置正好4张缩略图显示
  }else{
   $(".scrollpic li").eq(0).trigger("dblclick");
   slideclick = 0
  }
  $(".scrollpic li").eq(slideclick).trigger("dblclick");
});

});
</script>
<div class="focus">
<div class="focuspic">

  <div class="indexbanner"><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-13/183.html" title="jquery 弹出层插件鼠标点击文字获取标题弹出层内容信息"><img width="620" height="340" alt="jquery 弹出层插件鼠标点击文字获取标题弹出层内容信息" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-13/c4a109ba30e5ad520220859b9a9380b9.jpg"></a></div>
  <div class="indexbanner"><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-12/181.html" title="jquery 图片提示交互式图片滑过与点击提示更多文字信息和弹出层信息"><img width="620" height="340" alt="jquery 图片提示交互式图片滑过与点击提示更多文字信息和弹出层信息" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-12/be959f01665246fc4828281158aba316.jpg"></a></div>
  <div class="indexbanner"><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-11/179.html" title="jquery 滚动条插件仿iphone苹果横行滚动条美化样式商品图片展示"><img width="620" height="340" alt="jquery 滚动条插件仿iphone苹果横行滚动条美化样式商品图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-11/df2a7d77f20d55bca26a8328bd8647ae.jpg"></a></div>
  <div class="indexbanner"><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-09/175.html" title="jquery 图片特效鼠标滑过图片显示文字与标题内容特效"><img width="620" height="340" alt="jquery 图片特效鼠标滑过图片显示文字与标题内容特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-09/3a1184db401138d6443a1b5f42cb289b.jpg"></a></div>
  <div class="indexbanner"><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-10/177.html" title="jquery 信息提示框鼠标滑过导航文本内容显示提示详细信息文本"><img width="620" height="340" alt="jquery 信息提示框鼠标滑过导航文本内容显示提示详细信息文本" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-10/939eec7e10f99c541febcef39202b308.jpg"></a></div>
  <div class="indexbanner"><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-04/165.html" title="jquery 文字滚动大全 scroll 支持文字或图片单行滚动多行滚动带按钮控制滚动"><img width="620" height="340" alt="jquery 文字滚动大全 scroll 支持文字或图片单行滚动多行滚动带按钮控制滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-04/99c04eb3c2092522c82fda8a5e9245b5.jpg"></a></div>

</div>

<div class="scrollbox">
  <div id="prev" class="f-l scrollbtn disabled"></div>
  <div class="f-l scrollpic">
   <ul>
    <li class="current"><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-13/183.html" title="jquery 弹出层插件鼠标点击文字获取标题弹出层内容信息"><img width="150" height="150" alt="jquery 弹出层插件鼠标点击文字获取标题弹出层内容信息" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-13/smallc4a109ba30e5ad520220859b9a9380b9.jpg"><span>jquery 弹出层插件</span></a></li>
    <li><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-12/181.html" title="jquery 图片提示交互式图片滑过与点击提示更多文字信息和弹出层信息"><img width="150" height="150" alt="jquery 图片提示交互式图片滑过与点击提示更多文字信息和弹出层信息" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-12/smallbe959f01665246fc4828281158aba316.jpg"><span>jquery 图片提示</span></a></li>
    <li><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-11/179.html" title="jquery 滚动条插件仿iphone苹果横行滚动条美化样式商品图片展示"><img width="150" height="150" alt="jquery 滚动条插件仿iphone苹果横行滚动条美化样式商品图片展示" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-11/smalldf2a7d77f20d55bca26a8328bd8647ae.jpg"><span>jquery 滚动条插件</span></a></li>
    <li><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-09/175.html" title="jquery 图片特效鼠标滑过图片显示文字与标题内容特效"><img width="150" height="150" alt="jquery 图片特效鼠标滑过图片显示文字与标题内容特效" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-09/small3a1184db401138d6443a1b5f42cb289b.jpg"><span>jquery 图片特效</span></a></li>
    <li><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-10/177.html" title="jquery 信息提示框鼠标滑过导航文本内容显示提示详细信息文本"><img width="150" height="150" alt="jquery 信息提示框鼠标滑过导航文本内容显示提示详细信息文本" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-10/small939eec7e10f99c541febcef39202b308.jpg"><span>jquery 信息提示框</span></a></li>
    <li><a target="_blank" href="http://www.jsfoot.com/jquery/items/2011-09-04/165.html" title="jquery 文字滚动大全 scroll 支持文字或图片单行滚动多行滚动带按钮控制滚动"><img width="150" height="150" alt="jquery 文字滚动大全 scroll 支持文字或图片单行滚动多行滚动带按钮控制滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-09-04/small99c04eb3c2092522c82fda8a5e9245b5.jpg"><span>jquery 文字滚动大全</span></a></li>
   </ul>
  </div>
  <div id="next" class="f-r scrollbtn"></div>
</div>

</div>

</body>
</html>

絮飘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击按钮图片左右滚动

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">jquery 图片切换特效鼠标点击左右按钮焦点图切换滚动/* reset
复制链接

扫一扫