最近在看jquery书时,看到一个比较有趣的东西:图片轮换。这里和大家分享下我看完后写的一个demo。实现图片轮换要完成三部分模块:html部分、css部分、jqury部分。下面分步详细说明。
1.html部分:

<div class="showContainer">
<div class="showHead">
<div id="headName" class="headItem">五月天专辑</div>
<div id="pageInfo" class="headItem">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
</ul>
</div>
<div id="controlBtns" class="headItem">
<span><<</span><span>>></span>
</div>
</div> <div class="showContent">
<div class="showContentList">
<ul>
<!--第一板-->
<li>
<img src="../imgs/fastSong.jpg" alt="Alternate Text" />
<div>伤心的人别听慢歌....</div>
<span>播放:523,4455</span>
</li>
<li>
<img src="../imgs/goldchildren.jpg" alt="Alternate Text" />
<div >神的孩子都在跳舞....</div>
<span>播放:123,4455</span>
</li>
<li>
<img src="../imgs/poetryAfter.png" alt="Alternate Text" />
<div>后青春期的诗....</div>
<span>播放:133,4445</span>
</li>
<li>
<img src="../imgs/secondLive.jpg" alt="Alternate Text" />
<div>第二人生....</div>
<span>播放:183,4655</span>
</li> <!--第二板-->
<li>
<img src="../imgs/liveForLove.jpg" alt="Alternate Text" />
<div>我为爱而生....</div>
<span>播放:423,4355</span>
</li>
<li>
<img src="../imgs/enough.jpg" alt="Alternate Text" />
<div>知足。怎么去拥有 一道彩虹....</div>
<span>播放:723,4955</span>
</li> </ul>
</div>
</div>
</div>

基本上就是三个部分:按钮控区#controlBtns,.图片展示区.showContent,当前板块#pageInfo。

2.css部分。主要是控制好图片展示区的样式。图片列表父容器.showContent的
position设为relative,overflow为hidden。其子元素showContentList的position设为absolute,列表ul的white-space设为nowrap。为了方便大家快速查看效果,我把完整的css也附上来:

 body {
font-size:14px;
} ul {
margin:0;
padding:0;
} ul li {
float:left;
list-style:none;
} .main {
height:500px;
width:1100px;
border:1px solid #808080;
border-radius:2px;
margin:10px auto;
} .showContainer {
height:200px;
width:770px;
margin:10px auto;
} .showContainer .showHead {
height:35px;
width:100%;
background-color:#2B6CAD;
opacity:0.7;
border-top-left-radius:2px;
border-top-right-radius:2px;
} .showContainer .headItem {
float:left;
margin-top:10px;
padding-left:5px;
} #headName {
width:130px;
font-size:16px;
color:white;
font-weight:bold;
} #pageInfo {
width:80px;
} #pageInfo ul li {
width:12px;
height:12px;
border-radius:10px;
background-color:#E7E7E7;
text-align:center;
margin-right:2px;
} #pageInfo ul li.selected {
background-color:#41403C;
} #controlBtns {
width:65px;
height:20px;
border:1px solid #41403C;
border-radius:4px;
background-color:white;
line-height:20px;
}
#controlBtns span {
cursor:pointer;
display:block;
float:left;
height:20px;
width:30px;
text-align:center;
} #controlBtns span:first-child {
border-right:1px solid #41403C;
} #controlBtns span:hover {
color:red;
font-weight:bold;
} .showContainer .showContent {
height:180px;
width:100%;
overflow:hidden;
position:relative;
} .showContent .showContentList {
position:absolute;
height:100%;
} .showContainer .showContentList ul {
height:180px;
white-space:nowrap;
} .showContainer ul li{
height:180px;
width:187px;
margin-right:2px;
/*margin-left:2px;*/
margin-top:5px;
} .showContainer ul li img {
height:120px;
width:180px;
cursor:pointer;
border:1px solid #808080;
} .showContainer ul li div {
font-weight:bold;
margin:5px 0;
}

3. js部分。利用jquery的animate方法实现起来确实简单代码如下:

$(function () {
var currentIndex = 1;
var cellNum = 4;
var contentWidth = $('.showContent').width();
var $list = $('.showContentList'); //列表对象 即滚动的容器
var banCount = Math.ceil($list.find('li').length / cellNum); //计算总的板数 $('#controlBtns span').click(function () {
var index = $(this).index();
if ($list.is(":animated")) { //防止出现连续多次点击后,仍然滑动的情况
return;
}
if (index == 0) { //上一板
if (currentIndex == 1) {
currentIndex = banCount;
$list.animate({ left:'-' contentWidth*(banCount-1) }, 'normal');
}
else {
currentIndex --;
$list.animate({ left: ' =' contentWidth }, 'normal');
} }
else {
if(currentIndex == banCount)
{
currentIndex=1;
$list.animate({ left: '0' }, 'normal');
}
else
{
currentIndex ;
$list.animate({ left: '-=' contentWidth }, 'normal');
} } /*显示当前所在版的*/
$('#pageInfo ul li').eq(currentIndex - 1).addClass('selected')
.siblings().removeClass('selected'); }); });

  js代码都比较简单,就不做多的解释了。就这样,比较简单的图片轮换效果就实现。效果如图:

Jquery实现图片轮换效果的更多相关文章

  1. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  2. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  3. 仿FLASH的图片轮换效果

    css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...

  4. 如何用Jquery做图片展示效果

    一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...

  5. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  6. jquery 鼠标图片经过效果

    <script> //鼠标图片经过效果 $(function(){ $(".jione_box ").css("background-color", ...

  7. 第74天:jQuery实现图片导航效果

    图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. jquery带小图的图片轮换效果

    右边显示大图,左边显示小图 <style> ul{ list-style:none; padding:0px; margin:0px;} li{ list-style:none; padd ...

  9. JS 阶段练习~ 仿flash的图片轮换效果

    结合了所学的简单运动框架~  做这样一个综合小实例~~ -------------------------主要问题: 1.getByClassName  IE低版的兼容性 2.DOM不够严谨 … 各种 ...

随机推荐

  1. leetcode 28

    题目描述: Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if ...

  2. 发布一款Github博客皮肤

    Major是一款基于jekyll的皮肤,没有用hexo,原因是换机器后无法更新博客,但是可以用U盘考环境.总之很麻烦!折腾纠结好久,还是用jekyll!不用发布直接push文章即可,方便快捷.用的放心 ...

  3. C# (灰度)加权平均法将图片转换为灰度图

    private Bitmap ToG(string file) { using (Bitmap o = new Bitmap(file)) { Bitmap g = new Bitmap(o.Widt ...

  4. UWP学习开发笔记记录(开篇)

    零零散散开发微软移动2年多了,基本上从未记录或写过任何笔记.所以打算写一些自己的心得和技术的分享,大家一起来共同探讨.虽然现在UWP的工作几乎没有了,但是我感觉大家都是在观望,再看接下来微软的动作,所 ...

  5. paper 129 : 比较好的开源人脸识别软件

    1.face.com 以色列公司,某年六月时被Facebook收购,同时暂停了API服务,之前测试过他们的服务,基本上是了解到的应用中做得最牛的了. 2.orbe Orbeus由麻省理工学院和波士顿大 ...

  6. 【003:jsoncpp的简单使用】

    #include <json/json.h> #include <iostream> #include <string> using namespace std; ...

  7. C/C++之指针加减法

    C和C++中可对指针进行加减,但对其进行乘除则基本无实际意义.一般来说,对指针进行减法的前提是减数和被减数均指向同一数组.加法同理.需要注意的是,两个指针的减法,结果是两个地址之间索引变量的数目,而不 ...

  8. Java Garbage Collection基础详解------Java 垃圾回收机制技术详解

    最近还是在找工作,在面试某移动互联网公司之前认为自己对Java的GC机制已经相当了解,其他面试官问的时候也不存在问题,直到那天该公司一个做搜索的面试官问了我GC的问题,具体就是:老年代使用的是哪中垃圾 ...

  9. MySQL错误:The user specified as a definer (XXX@XXX) does not exist

    今天由于更换服务器,重新再本地备份了数据库,试运行程序报错,如下: MySQL错误:The user specified as a definer (XXX@XXX) does not exist 意 ...

  10. url编码

    url编码 情况1:网址路径中包含汉字 打开IE,输入网址”http://zh.wikipedia.org/wiki/春节”.注意,”春节”这两个字此时是网址路径的一部分. 查看HTTP请求的头信息, ...