Jquery实现图片轮换效果
最近在看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实现图片轮换效果的更多相关文章
- jQuery仿迅雷图片轮换效果
jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- 仿FLASH的图片轮换效果
css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...
- 如何用Jquery做图片展示效果
一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
- jQuery实现图片放大镜效果
实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...
- jquery 鼠标图片经过效果
<script> //鼠标图片经过效果 $(function(){ $(".jione_box ").css("background-color", ...
- 第74天:jQuery实现图片导航效果
图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- jquery带小图的图片轮换效果
右边显示大图,左边显示小图 <style> ul{ list-style:none; padding:0px; margin:0px;} li{ list-style:none; padd ...
- JS 阶段练习~ 仿flash的图片轮换效果
结合了所学的简单运动框架~ 做这样一个综合小实例~~ -------------------------主要问题: 1.getByClassName IE低版的兼容性 2.DOM不够严谨 … 各种 ...
随机推荐
- ue4 ios
project settings package 可以指定非APK打包,确定资源是否发布 可以指定content下某个目录所有文件(非.uassert)都打包 ios环境下fopen打开文件需要指定路 ...
- 配置Openfire的eclipse项目
官方文档在这里 Install JDK Download JDK and install them. The least version should be 1.5. I use 1.6. Sorry ...
- IE or Chrome can not use localhost, firefox can works.
因为服务器开启'localhost:9999",使用IE无法登陆,firefox下正常. 遂查看cookie,果然没有写入. stackoverflow.com: "ie enab ...
- REmap首次尝试--PC端
在REchart项目中,实验此网址的内容,得到若干实例 针对此我针对北京市做了若干实验 第一:绘制北京市的填充地图 代码如下: >BJqu<-mapNames("beijing& ...
- FORTRAN 90标准函数(一) (转)
符号约定: l I代表整型;R代表实型;C代表复型;CH代表字符型;S代表字符串;L代表逻辑型;A代表数组;P代表指针;T代表派生类型;AT为任意类型. l s:P表示s类型为P类型(任意kind ...
- 拼接LINQ动态表达式
using System; using System.Linq; using System.Linq.Expressions; public static class LinqBuilder { // ...
- JS获取当前浏览器的类型
<script type=“text/javascript”> function isIE(){return navigator.appName.indexOf(“Microsoft In ...
- Struts2相关面试题
Struts2面试题 1.struts2工作流程 Struts 2框架本身大致可以分为3个部分: 核心控制器FilterDispatcher.业务控制器Action和用户实现的企业业务逻辑组件. 核心 ...
- windows下jenkins常见问题填坑
没有什么高深的东西,1 2天的时间大多数人都能自己摸索出来,这里将自己遇到过的问题分享出来避免其他同学再一次挖坑. 目录 1. 主从节点 2. Nuget自动包还原 3. powershell部署 4 ...
- JavaScript语言精粹读书笔记 - JavaScript函数
JavaScript是披着C族语言外衣的LISP,除了词法上与C族语言相似以外,其他几乎没有相似之处. JavaScript 函数: 函数包含一组语句,他们是JavaScript的基础模块单元,用于代 ...