这是我刚学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. reinterpret_cast应用

    reinterpret_cast 的一个实际用途是在哈希函数中,即,通过让两个不同的值几乎不以相同的索引结尾的方式将值映射到索引. #include <iostream> using na ...

  2. Kinetis学习笔记（一）——基于KSDK 2.0

  3. H5获取的经纬度，该怎么在百度地图中查看？

    之前理所当然的的到百度的坐标拾取系统, 输入H5获取的经纬度坐标,然后查询,然后发现老是有误差,而且误差都是一样的规律:偏实际位置西南方约1000~1500米左右. 以为是H5获取经纬度必然会产生这么 ...

  4. Chloe and pleasant prizes

    Chloe and pleasant prizes time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  5. 非常不错的MySQL优化的8条经验

    1.选取最适用的字段属性   MySQL 可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度 ...

  6. Samba: Server setup..

    To make samba shard folder permission clear, there are 3 kind of permission need to be paid attentio ...

  7. New Year Tree 【DFS序+先段数区间查询修改+二进制保存状态】

    题目链接[http://codeforces.com/problemset/problem/620/E] 题意:给出n个数,每个数有一个初始的颜色.由这n个数组成一颗树.有两种操作1.将以节点u为根的 ...

  8. javaWEB总结(11):JSP简介及原理

    前言 本文主要通过一个简单小例子,介绍JSP的原理. 1.项目结构 2.web.xml <?xml version="1.0" encoding="UTF-8&qu ...

  9. 如何区分javascript中的方法（method）、函数（function）、事件（event）三个概念？

    方法是程序对某操作的处理,比如show(),你可以在触发单击事件的时候调用show(),也可以在双击的时候调用. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.比如自己写的倒计时函数,触 ...

  10. NDK常见错误

    1.错误1: android mk文件没有定义 $ ndk-buildAndroid NDK: Your APP_BUILD_SCRIPT points to an unknown file: /cy ...