margin: 0
padding: 0
}
ul{
list-style:none
}
.slideShow{
width: 620px
height: 700px /*其实就是图片的高度*/
border: 1px #eeeeee solid
margin: 100px auto
position: relative
overflow: hidden /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
width: 2500px
position: relative /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
float: left /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
width: 620px
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
position: absolute
right: 10px
bottom: 5px
text-align:center
font-size: 12px
line-height: 20px
}
.slideShow .showNav span{
cursor: pointer
display: block
float: left
width: 20px
height: 20px
background: #ff5a28
margin-left: 2px
color: #fff
}
.slideShow .showNav .active{
background: #b63e1a
}
js代码规范：
<script src="../../../jQuery/js/jquery-2.1.4.js"></script> <script type="text/javascript">
$(document).ready(function(){
var slideShow=$(".slideShow"), //获取最外层框架的名称
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNav span"), //获取按钮
oneWidth=slideShow.find("ul li").eq(0).width() //获取每个图片的宽度
var timer=null //定时器返回值，主要用于关闭定时器
var iNow=0 //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
showNumber.on("click",function(){ //为每个按钮绑定一个点击事件
$(this).addClass("active").siblings().removeClass("active") //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
var index=$(this).index() //获取哪个按钮被点击，也就是找到被点击按钮的索引值
iNow=index
ul.animate({ "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
})
})
function autoplay(){
timer=setInterval(function(){ //打开定时器
iNow++ //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0 }
showNumber.eq(iNow).trigger("click") //模拟触发数字按钮的click
},2000) //2000为轮播的时间
}
autoplay()
slideShow.hover( function(){clearInterval(timer)},autoplay) 另外注意setInterval的用法比较关键。
})
</script>
主体代码：
[html] view plain copy print?
<body>
<div class="slideShow">
<!--图片布局开始-->
<ul>
<li><a href="#"><img src="images/view/111.jpg"/></a></li>
<li><a href="#"><img src="images/view/112.jpg" /></a></li>
<li><a href="#"><img src="images/view/113.jpg" /></a></li>
<li><a href="#"><img src="images/view/114.jpg" /></a></li>
</ul>
<!--图片布局结束-->
<!--按钮布局开始-->
<div class="showNav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--按钮布局结束-->
</div>
</body>
使用jQuery做轮播图是网页特效中很常见的一个特效。
工具原料：编辑器、浏览器、jQuery
1、实现的总体思路：
首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
2、实现的具体事件处理思路：
事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。
3、简单的代码示例如下：
<!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
}
.slider-panel img {
border: none
}
.slider-extra {
position: relative
}
.slider-nav {
margin-left: -51px
position: absolute
left: 50%
bottom: 4px
}
.slider-nav li {
background: #3e3e3e
border-radius: 50%
color: #fff
cursor: pointer
margin: 0 2px
overflow: hidden
text-align: center
display: inline-block
height: 18px
line-height: 18px
width: 18px
}
.slider-nav .slider-item-selected {
background: blue
}
.slider-page a{
background: rgba(0, 0, 0, 0.2)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
color: #fff
text-align: center
display: block
font-family: "simsun"
font-size: 22px
width: 28px
height: 62px
line-height: 62px
margin-top: -31px
position: absolute
top: 50%
}
.slider-page a:HOVER {
background: rgba(0, 0, 0, 0.4)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000)
}
.slider-next {
left: 100%
margin-left: -28px
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已经开始轮播
t = 3000 //轮播时间间隔
length = $('.slider-panel').length
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide()
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected')
//隐藏向前、向后翻按钮
$('.slider-page').hide()
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel, .slider-pre, .slider-next').hover(function() {
stop()
$('.slider-page').show()
}, function() {
$('.slider-page').hide()
start()
})
$('.slider-item').hover(function(e) {
stop()
var preIndex = $(".slider-item").filter(".slider-item-selected").index()
currentIndex = $(this).index()
play(preIndex, currentIndex)
}, function() {
start()
})
$('.slider-pre').unbind('click')
$('.slider-pre').bind('click', function() {
pre()
})
$('.slider-next').unbind('click')
$('.slider-next').bind('click', function() {
next()
})
/**
* 向前翻页
*/
function pre() {
var preIndex = currentIndex
currentIndex = (--currentIndex + length) % length
play(preIndex, currentIndex)
}
/**
* 向后翻页
*/
function next() {
var preIndex = currentIndex
currentIndex = ++currentIndex % length
play(preIndex, currentIndex)
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000)
$('.slider-item').removeClass('slider-item-selected')
$('.slider-item').eq(currentIndex).addClass('slider-item-selected')
}
/**
* 开始轮播
*/
function start() {
if(!hasStarted) {
hasStarted = true
interval = setInterval(next, t)
}
}
/**
* 停止轮播
*/
function stop() {
clearInterval(interval)
hasStarted = false
}
//开始轮播
start()
})
</script>
</head>
<body>
<div class="slider">
<ul class="slider-main">
<li class="slider-panel">
<a href="
title="图片1" src="images/1.jpg"></a>
</li>
<li class="slider-panel">
<a href="#"><img title="图片2" src="images/1.jpg"></a>
</li>
<li class="slider-panel">
<a href="#"><img title="图片3" src="images/1.jpg"></a>
</li>
<li class="slider-panel">
<a href="#"><img title="图片4" src="images/1.jpg"></a>
</li>
</ul>
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
</ul>
<div class="slider-page">
<a class="slider-pre" href="javascript:"><</a>
<a class="slider-next" href="javascript:">></a>
</div>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）