当前位置:编程学习 > JS >>

可控制图片左右滚动js代码

本文章收藏了一款图片左右滚动代码源码下载,是一款利用js实现的广告图片可左右滚动的图片广告代码,这是来自于淘宝网站焦点图代码。

<!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=gb2312" />
<title>可控制图片左右滚动js代码</title>
<script src="js/tbhb.js" type=text/网页特效></script>
<link href="css教程/css.css" type=text/css rel=stylesheet>
</head>

<body>

<div class=main-wrap>
 <div id=slide-box>
  <b class=corner></b>
  <div class=slide-content id=j_slide>
   <div class=wrap>
    <ul class=ks-switchable-content>
      <li><a href="http://www.zzzyk.com/" target=_blank><img alt="zzzyk.com" src="images/01.jpg"></a></li>
      <li><a href="http://www.zzzyk.com/" target=_blank><img alt="zzzyk.com" src="images/02.jpg"></a></li>
      <li><a href="http://www.zzzyk.com/" target=_blank><img alt="zzzyk.com" src="images/03.jpg"></a></li>
      <li><a href="http://www.zzzyk.com/" target=_blank><img alt="zzzyk.com" src="images/04.jpg"></a></li>
      <li><a href="http://www.zzzyk.com/" target=_blank><img alt="zzzyk.com" src="images/05.jpg"></a></li>
      <li><a href="http://www.zzzyk.com/" target=_blank><img alt="zzzyk.com" src="images/06.jpg"></a></li>
    </ul>
   </div>
   <div class=ks-switchable-triggers>
    <a class=prev id=j_prev href="javascript:void(0);">
    <b class=corner></b><span>‹</span><b class=corner></b></a>
    <a class=next id=j_next href="javascript:void(0);">
    <b class=corner></b><span>›</span><b class=corner></b></a>   </div>
  </div>
  <b class=corner></b> </div>
</div>

<script type=text/javascript>
 var d=yahoo.util.dom, e=yahoo.util.event;

 kissy().use("*", function(s) {
  var el = d.get('j_slide'),
   activeindex = parseint(el.getattribute('data-active-index')) || 0;

  var carousel = new s.carousel(el, {
   hastriggers: false,
   navcls: 'ks-switchable-nav',
   contentcls: 'ks-switchable-content',
   activetriggercls: 'current',
   effect: "scrollx",
   steps教程: 2,
   viewsize: [680],
   activeindex: activeindex
  });
  
  e.on('j_prev', 'click', carousel.prev, carousel, true);
  e.on('j_next', 'click', carousel.next, carousel, true);
 });

 kissy().use("*", function(s) {
  var el = d.get('j_shoppingguide');
  if(!el){
   return;
  }
  var activeindex = parseint(el.getattribute('data-active-index')) || 0;

  var carousel = new s.carousel(el, {
   navcls: 'ks-switchable-nav',
   contentcls: 'ks-switchable-content',
   activetriggercls: 'current',
   effect: "scrollx",
   steps: 4,
   viewsize: [720],
   activeindex: activeindex
  });
  
  e.on('j_shoppingguideprev', 'click', carousel.prev, carousel, true);
  e.on('j_shoppingguidenext', 'click', carousel.next, carousel, true);
 });
</script>

</div>
</body>
</html>

源码下载地址

http://down.zzzyk.com/down/code/js/jiaodiantu/2010/0921/20861.html

效果预览地址

http://g.zzzyk.com/javascript/mb/20100921/taobao/

补充:网页制作,js教程 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,