css:
.con_left span.pic_left { z-index: 4; cursor:pointer; position: absolute; top: 190px; left: 20px; background: url("../images/icons.png") no-repeat -90px -60px; display: block; width: 50px; height: 50px;}
.con_left span.pic_right{ z-index: 4; cursor:pointer; position: absolute; top: 190px; right: 20px; background: url("../images/icons.png") no-repeat -90px -10px; display: block; width: 50px; height: 50px;}
.con_left .pic_list{ width: 495px; height: 350px; margin-top:20px;}
.con_left .pic_list .pic{ position: absolute; opacity: 0; background: #f9f9f9; width: 100%; height: 100%; text-align: center;}
.con_left .pic_list .pic.current{ z-index:3;}
.con_left .pic_list .pic.prev{ z-index:2;}
.con_left .pic_list .pic img{ width: 250px; height: 240px; padding-top:20px; *padding-top:40px; }
.con_left .pic_list .pic p{ background: #f9f9f9; font-family: "方正兰亭黑_GBK"; opacity: 0.99; font-size: 18px; color: #4c4c4c; padding-top: 50px;}
html:
< div class="con_left" >
< div class="top_txt">![jQuery图片自动切换(带左右切换按钮)]()
< span class="pic_left">< /span >
< div class="pic_list" >
< div class="pic current" >
< img src="images/pic01.png" alt=""/>
< p >图片1< /p >
< /div >
< div class="pic" >
< img src="images/pic02.png" alt=""/>
< p >图片2< /p >
< /div >
< div class="pic" >
< img src="images/pic03.png" alt=""/>
< p >图片3< /p >
< /div >
< div class="pic" >
< img src="images/pic04.png" alt=""/>
< p >图片4< /p >
< /div >
< /div >
< span class="pic_right" >< /span >
< /div >
js:
$( document ).ready( function( ){
$(".pic_left" ).click( function( ){
var $current = $(".pic_list .pic.current");
// 判断div.current个数为0的时候 $current的取值
if ( $current.length == 0 ) $current = $(".pic_list .pic:first");
// 判断div.current存在时则匹配$current.next(),否则转到第一个div
var $prev = $current.prev().length ? $current.prev() : $(".pic_list .pic:last");
$current.addClass('prev');
$prev.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 0, function() {
//因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
$current.removeClass("current prev");
});
});
$(".pic_right").click(function(){
var $current = $(".pic_list .pic.current");
// 判断div.current个数为0的时候 $current的取值
if ( $current.length == 0 ) $current = $(".pic_list .pic:last");
// 判断div.current存在时则匹配$current.next(),否则转到第一个div
var $next = $current.next().length ? $current.next() : $(".pic_list .pic:first");
$current.addClass('prev');
$next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 0, function() {
//因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
$current.removeClass("current prev");
});
});
});
$( function( ) {
// $(".pic_list .pic p").css("opacity","0.7");
$(".current").css("opacity","1.0");
// 设定时间为3秒(1000=1秒)
setInterval( "slideSwitch()", 6000);
});
function slideSwitch( ) {
var $current = $(".pic_list .pic.current");
// 判断div.current个数为0的时候 $current的取值
if ( $current.length == 0 ) $current = $(".pic_list .pic:last");
// 判断div.current存在时则匹配$current.next(),否则转到第一个div
var $next = $current.next().length ? $current.next() : $(".pic_list .pic:first");
$current.addClass('prev');
$next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 10, function() {
//因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
$current.removeClass("current prev");
});
}