Jquery代码实现图片轮播效果(一)代码实现图片轮播效果(一)
文章写的不好,还请各位高手指教,不废话了,先上张效果图吧看下:
在线演示 下载源码
首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前、向后按钮,使第一个索引按钮处于激活状态。
事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前、向后
翻动、轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播。
下篇是一个纯粹的jquery轮播插件, 该插件可以定制各种效果,方便的配置以及可扩展。
下面是整体的代码:
index.html
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery轮播效果图 </title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
}
ul {
list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
width: 650px;
height: 413px;
}
.slider {
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
评论10