This article collection of a picture of the scroll code to download the source, is a use of JS to achieve the advertising picture can scroll around the picture advertising code, which is from the Taobao station focus map code.
<!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= "HTML; charset=gb2312 "/>
<title> can control the picture left and right scroll JS code </title>
<script src= "js/tbhb.js" type=text/Web page special effects ></script>
<link href= "CSS tutorial/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.jzread.com/" target=_blank><img alt= "jzread.com" src= "images/01.jpg" > </a></li>
<li><a href= "http://www.jzread.com/" target=_blank><img alt= "jzread.com" src= "Images/02.jpg" ></a></li>
<li><a href= "http://www.jzread.com/" target=_blank><img alt= "jzread.com" src= "Images/03.jpg" ></a></li>
<li><a href= "http://www.jzread.com/" target=_blank><img alt= "jzread.com" src= "Images/04.jpg" ></a></li>
<li><a href= "http://www.jzread.com/" target=_blank><img alt= "jzread.com" src= "Images/05.jpg" ></a></li>
<li><a href= "http://www.jzread.com/" target=_blank><img alt= "jzread.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>& #8249; </span><b class=corner></b></a >
<a class=next id=j_next href= "javascript:void (0);" >
<b class=corner></b><span>& #8250; </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 ',
Multiplying: "Scrollx",
Tournaments Tutorial: 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 ',
Multiplying: "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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
