JS achieves switching between two image scrolls

See:
Http://weitwo.com/home.htm

After jquery is introduced,

 

Introduce the following JS:

$ (Document). Ready (function (){
VaR slidepicture = new sliderpicture ();
Slidepicture. containerid = 'Container ';
Slidepicture. frontid = 'front ';
Slidepicture. minfrontwidth = 100;
Slidepicture. Load ();
});

Function sliderpicture (){
This. containerid = '';
This. frontid = '';
This. minfrontwidth = 200;

This. load = function (){

VaR Container = $ ('#' + this. containerid );
VaR front = $ ('#' + this. frontid );
VaR minwith = This. minfrontwidth;

Container. mousemove (function (e ){
VaR offsetleft = container. Prop ("offsetleft ");
VaR parentwidth = container. Prop ("clientwidth ");
VaR left = E. clientx-offsetleft;
VaR width = parentwidth-left;

If (width> = minwith ){
Front. Width (width );
}
});
}
}

Add the following style:

 

# Container
{
Background: URL ('HTTP: // photocdn.sohu.com/20110527/img308750491.jpg ');
Width: 90%;
Height: 200px;
Margin: 0px auto;
}
 
# Front
{
Float: right;
Background: URL ('HTTP: // news3.xinhuanet.com/auto/2005-07/06/xinsrc_3520702061714562873521.jpg ');
Background-position: right;
Width: 30%;
Height: 100%;
}

# Splitter
{
Background: #000000;
Height: 100%;
Float: left;
Width: 5px;
}

 

Add the following HTML:

 

<Div id = "Container">
<Div id = "Front">
<Span id = "splitter"> </span>
</Div>
</Div>

 

 

The image scroll effect can be achieved.