日期:2014-05-16  浏览次数:20315 次

jquery基本特效,等待中

如图  3张图片实现自动播放,播放的图片右边图片相应透明度%50,
当鼠标停在某张图片上时,右边显示对应图片
当鼠标离开时  继续播放

注:右边的3张图片是竖起放的,必须用margin-top:-280这种方法实现

代码如下:
.mt_right
{
    height: 280px;
    width: 634px;
    float: left;
}
.mtr_left
{
    height: 280px;
    width: 116px;
    margin-right: 5px;
    float: left;
    overflow: hidden;
}
.mtrl_img
{
    height: 87px;
    width: 116px;
    margin-bottom: 10px;
}
.mtr_right
{
    margin:0;
    padding:0;
    height: 280px;
    width: 513px;
    float: left;
    overflow:hidden;
}
.mtr_img
{
    height: 280px;
    width: 513px;
    float: left;
}



 <div class="mt_right">
                    <div class="mtr_left">
                        <div class="mtrl_img">
                            <img id="img1" style="height: 100%; width: 100%;" src="Images/鸿恩寺公园.jpg" alt="1" />
                        </div>
                        <div class="mtrl_img">
                            <img id="img2" style="height: 100%; width: 100%;" src="Images/有多少风光成传说.jpg"
                                alt="2" />
                        </div>
                        <div class="mtrl_img">
                            <img id="img3" style="height: 100%; width: 100%;" src="Images/千年磁器口.jpg"
                                alt="3" />
                        </div>
   &