Jquery特效十一:图片滑动显示

最新推荐文章于 2024-07-29 03:33:18 发布

原创最新推荐文章于 2024-07-29 03:33:18 发布 · 886 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #class #div #stylesheet #function #xhtml

Jquery特效专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的滑动图片展示效果，通过点击前后按钮可以切换显示的图片。该示例利用了jQuery的动画功能，通过调整ul元素的left属性实现了平滑的图片切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图及代码如下：

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
h3,h5{text-align:center;}
</style>
<link rel="stylesheet" href="css/main.css" type="text/css"/>

    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function(){
      var $content = $("#news-content");
   var i = 6; //已知显示的li的个数
   var m = 6; //用于计算的变量
   var count = $content.find("li").length;//总共的li的个数
   $("#topprev").click(function(){
   if( !$content.is(":animated")){ //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
    if(m<count){ //判断 i 是否小于总的个数
     m++;
     $content.animate({left: "-=99px"}, 600);
    }
   }
   });
   $("#topnext").click(function(){
   if( !$content.is(":animated")){
    if(m>i){ //判断 i 是否小于总的个数
     m--;
     $content.animate({left: "+=99px"}, 600);
    }
   }
   });
})
</script>
</head>
<body>
    <h3>jQuery之Slide-Imagess-Show.</h3>
    <h5>Code By CssRain.cn</h5>

<div id="converge-top" class="lists">
    <div id="scroller" class="google-list">
     <ul class="movable" id="news-content" style="left: 0px; margin-left: 0px; width: 990px;">
                         <li>
                            <a title="cssrain" href="http://www.cssrain.cn">
                                <div class="imgcont">
                                 <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/>
                                </div>
                                <span>CssRain1</span>
                            </a>
                        </li>
      <li>
                            <a title="cssrain" href="http://www.cssrain.cn">
                                <div class="imgcont">
                                 <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/>
                                </div>
                                <span>CssRain2</span>
                            </a>
                        </li>
                        <li>
                            <a title="cssrain" href="http://www.cssrain.cn">
                                <div class="imgcont">
                                 <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/>
                                </div>
                                <span>CssRain3</span>
                            </a>
                        </li>
                        <li>
                            <a title="cssrain" href="http://www.cssrain.cn">
                                <div class="imgcont">
                                 <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/>
                                </div>
                                <span>CssRain4</span>
                            </a>
                        </li>
                        <li>
                            <a title="cssrain" href="http://www.cssrain.cn">
                                <div class="imgcont">
                                 <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/>
                                </div>
                                <span>CssRain5</span>
                            </a>
                        </li>
      <li>
                            <a title="cssrain" href="http://www.cssrain.cn">
                                <div class="imgcont">
                                 <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/>
                                </div>
                                <span>CssRain6</span>
                            </a>
                        </li>
                        <li>
                            <a title="cssrain" href="http://www.cssrain.cn">
                                <div class="imgcont">
                                 <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/>
                                </div>
                                <span>CssRain7</span>
                            </a>
                        </li>
                        <li>
                            <a title="cssrain" href="http://www.cssrain.cn">
                                <div class="imgcont">
                                 <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/>
                                </div>
                                <span>CssRain8</span>
                            </a>
                        </li>
                        <li>
                            <a title="cssrain" href="http://www.cssrain.cn">
                                <div class="imgcont">
                                 <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/>
                                </div>
                                <span>CssRain9</span>
                            </a>
                        </li>
                        <li>
                            <a title="cssrain" href="http://www.cssrain.cn">
                                <div class="imgcont">
                                 <img alt="" src="http://www.cssrain.cn/skins/tim/isll_t.gif" class="img"/>
                                </div>
                                <span>CssRain10</span>
                            </a>
                        </li>
    </ul>
   </div>
   <a class="button-left" id="topnext" href="#">next</a>
   <a rel="nofollow" class="button-right" id="topprev" href="#">prev</a>
</div>

    <div style="width:600px;margin:10px auto;">
    我用了 10 个li 元素，每个宽度是 99px，所以id="news-content" 的ul元素的宽度是 990px。
    另外动画是通过改变ul的margin-left属性来达到的，每次增加或者减少99px。
    </div>
</body>
</html>

main.css:

.lists {
height:84px;
margin:0 auto;
padding:0 0 10px;
position:relative;
width:730px;
}
.google-list {
display:inline;
float:left;
height:82px;
margin:0 145px 0 53px;
overflow:hidden;
padding:0;
position:relative;
width:600px;
}
.google-list ul {
margin:0;
overflow:hidden;
padding:14px 0 0;
position:absolute;
}
.google-list li {
float:left;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:bold;
line-height:12px;
list-style:none;
padding:0 0 30px 17px;
width:82px;
}
.google-list li a {
color:#6C93C5;
float:left;
text-decoration:none;
}
.google-list li a:hover {
text-decoration:underline;
}
.google-list li a .imgcont {
height:43px;
overflow:hidden;
}
.google-list li a .img {
display:block;
margin:0 auto;
padding:0;
height:41px;
width:80px;
border:1px solid #D9D9D9;
cursor:pointer;
background:#FFFFFF none repeat scroll 0 0;
}
.google-list li a span {
display:block;
padding:1px 0 0 1px;
text-align:center;
}
a.button-left {
background-image:url(c-google-arrows.gif);
background-position:0 0;
height:44px;
left:24px;
overflow:hidden;
position:absolute;
text-indent:-9999px;
top:18px;
width:28px;
}
a.button-right {
background-image:url(c-google-arrows.gif);
background-position:-28px 0;
height:44px;
overflow:hidden;
position:absolute;
right:40px;
text-indent:-9999px;
top:18px;
width:28px;
}