可控制图片左右滚动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.111cn.net/" target=_blank><img alt="111cn.net" src="images/01.jpg"></a></li>
      <li><a href="http://www.111cn.net/" target=_blank><img alt="111cn.net" src="images/02.jpg"></a></li>
      <li><a href="http://www.111cn.net/" target=_blank><img alt="111cn.net" src="images/03.jpg"></a></li>
      <li><a href="http://www.111cn.net/" target=_blank><img alt="111cn.net" src="images/04.jpg"></a></li>
      <li><a href="http://www.111cn.net/" target=_blank><img alt="111cn.net" src="images/05.jpg"></a></li>
      <li><a href="http://www.111cn.net/" target=_blank><img alt="111cn.net" 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.111cn.net/down/code/js/jiaodiantu/2010/0921/20861.html

时间： 2024-11-01 14:38:58

可控制图片左右滚动js代码的相关文章

谁有按钮控制图片上下滚动的代码

问题描述 谁有按钮控制图片上下滚动的代码 解决方案 解决方案二:问题描述不清楚

图片向上滚动js代码（三款)

文章收集了三款图片向上滚动代码哦,他们都是利用了来实例图片向上滚动效果哦,下面一款款来看看吧,其实一款是用marquee实现的,还有就是利用了js来实例了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://

图片无缝滚动js代码

提示:您可以先修改部分代码再运行 产品名称 产品名称 产品名称 产品名称 产品名称 产品名称 产品名称 产品名称 产品名称 产品名称 提示:您可以先修改部分代码再运行

图片左右滚动js代码

提示:您可以先修改部分代码再运行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML><HEAD><TITLE></TITLE> <META http-equiv=Content-Type con

控制图片大小的js代码不兼容ie6 什么原因？

问题描述 <scriptlanguage="javascript">functionImages(){varimgs=document.getElementsByTagName("img");for(vari=0;i<imgs.length;i++){imgs[i].className="thumbImage";//可能是这个imgs[i].className的原因}}</script><styletype=&

控制图片滚动,js代码在chrome里没效果在其他浏览器有效果

问题描述 控制图片滚动,js代码在chrome里没效果在其他浏览器有效果 //客户合作 图片滚动 $('.imgs-scroll').newsScroll({ className: 'imgs-scroll', scrollElements: 'li', scrollDirection: 'left' }); $.fn.extend({ newsScroll: function (opt) { if (!opt) opt = {}; opt = { className: opt.classNam

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-

JavaScript控制图片360度旋转代码_javascript技巧

JavaScript控制图片360度旋转代码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

jquery实现图片水平滚动效果代码分享_jquery

本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现图片水平滚动效果代码如下 <HEAD> <META content="text/html; charset=gb2312" http-equiv="Content-Type"> &