当前位置:Gxlcms > JavaScript > SuperSlide2实现图片滚动特效_图象特效

SuperSlide2实现图片滚动特效_图象特效

时间:2021-07-01 10:21:17 帮助过:8人阅读

这里贴一下自己演示的代码,期望对使用的朋友所有启发,我这里是结合了两个例子实现的

.focus-item ul li.item{
  text-align: center;
}
.scroll-area .prev,.scroll-area .next{
  position: absolute;
  bottom: 590px;
  width: 29px;
  height: 64px;
  opacity: 0.6;
  overflow: hidden;
  display: none;
  text-indent: -999px;
  border: medium none;
  background: url('/images/arrowLR.png') no-repeat scroll 0% 0% transparent;
}
.scroll-area .prev{
  left: 0px;
  background-position: -50px 0px;
}
.scroll-area .next{
  right: 0px;
}
.scroll-area .bdOn .prev,.scroll-area .bdOn .next{
  display: block;
}
 
.scroll-area .focus-hd{
  /*width: 832px;*/
  /*left: 60px;*/
  /*position: absolute;*/
  /*height: 100px;*/
  /*overflow: hidden;*/
  left: 63px;
  position: absolute;
}
 
.focus-hd .sNext, .focus-hd .sPrev{
  float: left;
  display: block;
  width: 14px;
  height: 47px;
  text-indent: -9999px;
  background: url('/images/sprites1008.png') no-repeat scroll 0px -3046px transparent;
}
.focus-hd .sNext{
  background-position: 0px -2698px;
}
 
.focus-hd .show_bottom_nav {
  float: left;
  margin: 0px 6px;
  display: inline;
  width: 832px;
  overflow: hidden;
}
.focus-hd .show_bottom_nav ul li{
  margin-left:15px;
}

html演示代码:

  • 标题1
  • 标题2
  • 标题1
  • 标题2

js脚本代码:

人气教程排行