这是我刚学jquery写的，感觉效果不是很好。

#scrollPics{
height: 330px;
width: 980px;
margin-bottom: 10px;
overflow: hidden;
position:relative;
}
.slider ul{
padding: 0px;
}
.slider ul li{
float: left;
list-style: none;
width: 980px;
}
.num{
position:absolute;
right:5px;
bottom:5px;
}
#scrollPics .num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
#scrollPics .num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}

<body>
<div id="scrollPics">
<div style="height: 330px;width:5000px " class="slider">
<ul >
<li><img src="data:images/1.jpg"/></li>
<li><img src="data:images/2.jpg"/></li>
<li><img src="data:images/7.jpg"/></li>
<li><img src="data:images/4.jpg"/></li>
<li><img src="data:images/5.jpg"/></li>
</ul>
</div>
<ul class="num" >
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script type="text/javascript">
var len = $(".num > li").length;//获取按钮（与图片数量对应）的数量
var index = 0; //图片序号
var adTimer;
$(".num li").mouseover(function() { //当鼠标移到按钮时则显示相对应的图片
index = $(".num li").index(this); //获取鼠标悬浮 li 的index
showImg(index);    
}).eq(0).mouseover();
//滑入停止动画，滑出开始动画.
$('#scrollPics').hover(function() {
clearInterval(adTimer);  //当鼠标移入时停止动画
}, function() {
adTimer = setInterval(function() { //当鼠标移出时动画继续
showImg(index)
index++;   
if (index == len) { //最后一张图片之后，转到第一张
index = 0;
}
}, 2000);
})
function showImg(index) {
var addWidth = $("#scrollPics>.slider>ul>li:first").width(); //获取图片的宽度
$(".slider").animate({
"marginLeft": -addWidth* index + "px" //改变 marginLeft属性的值达到轮播的效果
}, 1000);

//当前图片显示时设置相对应按钮的样式或状态（用类选择器来控制）
$(".num li").removeClass("on")//未显示图片所对应的按钮移除其类选择器的名字
.eq(index).addClass("on"); //当相对应的图片显示时设置当前按钮的类选择器的名字为on
}

</script>
</html>

jquery-图片轮播（新手请大神指教一下）的更多相关文章

  1. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  4. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  5. Jquery 图片轮播实现原理总结

    Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...

  6. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

  7. 面板支持单个，多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  8. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  9. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

随机推荐

  1. MAMP、wordpress安装

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 12.0px Helvetica } p.p4 { margin: ...

  2. iOS Plugins

    iOS Plugins This section provides details for how to implement native plugin code on the iOS platfor ...

  3. 在Java中system.out.println使用方法

    先输入sysout,然后输入辅助快捷键:Alt+/ 常用快捷键: 1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以打开工作区中任何一个文件,只需要按下文件 ...

  4. 一、java自带的观察者模式

    Observer对象是观察者,Observable对象是被观察者. 官网api文档:http://docs.oracle.com/javase/7/docs/api/ 1. 实现观察者模式 实现观察者 ...

  5. C# XML配置文件读写类（用于程序配置保存）

    调用方式 //初始化并指定文件路径 XmlConfigUtil util = new XmlConfigUtil("C:\\1.xml"); //写入要保存的值以及路径(Syste ...

  6. eclipse 使用问题

    eclipse 启动失败,错误信息为org.eclipse.swt.SWTException: Failed to execute runnable 方法三:删除了workspace\.metadat ...

  7. crontab 的例子

    0 5 * * * python /home/iscas/xiujinnews/wangyi.py >>/home/iscas/xiujinnews/l og/wangyi.log 2&g ...

  8. jmeter从外部文件取值问题,如果文件中的参数值为纯数字形式的,jmeter会默认将其识别成int型数据

    如果你通过CSV Data Set Config或者_StringFromFile函数来参数化你的请求,需要特别注意当参数为纯数字时,jmeter会默认将其识别成int型数据,说明jmeter并不是默 ...

  9. MongoDB高级查询用法大全

    转载 http://blog.163.com/lgh_2002/blog/static/440175262012052116455/ 详见官方的手册: http://www.mongodb.org/d ...

  10. intellij idea 12 搭建maven web项目 freemarker + spring mvc

    配置spring mvc ,写这篇文章的时候spring已经出了4.0 这里还是用稳定的3.2.7.RELEASE,先把spring和freemarker配置好 1.spring mvc配置 在web ...