菜单

jquery实现图片渐变切换兼容ie6,Jquery图片滚动与幻灯片的实例代码

2019年8月2日 - 前端排行

复制代码 代码如下:

1、图表滚动

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<meta name=”author” content=”Nancle from CAU CS101″ />
<title>jQuery图片渐变切换</title>
<script type=”text/javascript”
src=”;
<style type=”text/css”>
ul{position:relative;}
ul li{display:block; position:absolute; left:0; top:0}
img{width:480px; height:320px; border:5px solid #ccc}
</style>
</head>
<body>
<ul>
<li><img
src=””
/></li>
<li><img
src=””
/></li>
<li><img
src=””
/></li>
<li><img
src=””
/></li>
</ul>
</div>
<script>
var switchSpeed = 1000; //图片切换时间
var fadeSpeed = 1500; //渐变时间
setInterval(function(){
$(‘img’).last().fadeOut(fadeSpeed, function(){
$(this).show().parent().prependTo($(‘ul’));
});
}, switchSpeed);
</script>
</body>
</html>

复制代码 代码如下:

效用预览:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
    <title></title>
    <script type=”text/javascript”
src=”jquery.min.js”></script>
    <script type=”text/javascript”>
 $(document).ready(function () {
    Xhun(“.a”);      //———————-只必要修改   ”.a” 
(正是最大的div的class值这里就行———————
});

你也许感兴趣的篇章:

function Xhun(_box) {
    var box_frame = _box + ” div ul”;
    var box_div = _box + ” div”;
    $(_box).find(“ul”).wrap(“<div></div>”);   
//增添一个div,来支配偏移量
    $(box_div).append($(box_frame).clone());  
//克隆叁个ul并增多到div中,为了兑现无缝循环
 $(box_div).append($(box_frame).clone());  
//克隆贰个ul并增添到div中,为了兑现无缝循环
    var li_size = $(_box).find(“li”).size();   //获取li的个数
    var li_width = $(box_frame).children(“li”).width(); 
//获取li的宽度
    var box_div_width = $(box_div).width(li_size * li_width *
5);  //设置div的宽度
    $(box_frame).css(“float”, “left”);

 

    var dd = setInterval(gd, 30);
    function gd() {
        var position = $(_box).scrollLeft();    
//scrollLeft()是猎取对象的品位偏移量
        $(_box).scrollLeft(position + 1);
        if (position >= $(box_frame).width()) {
$(_box).scrollLeft(0); }  //判定位移是不是大于ul的总委员长度
    }
    $(_box).mouseleave(function () {
        dd = setInterval(gd, 30);
    }).mouseenter(function () {
        clearInterval(dd);
    });
}

    </script>

    <style type=”text/css”>
        * { margin: 0; padding: 0; }
        ul { list-style: none; }
        li { float: left; margin-left: 10px; width: 100px; }
        img { width: 100px; height: 100px; }
        .a { width: 400px; margin: 0 auto; overflow: hidden; height:
100px; }
    </style>
</head>
<body>
    <div class=”a”>
        <ul>
            <li><a href=”#”>
                <img src=”Wife1.jpg” alt=”img” title=”img”
/></a></li>
            <li><a href=”#”>
                <img src=”Wife2.jpg” alt=”img” title=”img”
/></a></li>

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图