这是HTML部分
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8">
<title>图片轮换</title>
<link rel="stylesheet" href="css/default.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/default.js"></script>
</head>
<body>
<div id="img_auto">
<div id="img_show">
<img class="img_selected" src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/4.jpg" />
<img src="images/5.jpg" />
</div>
<ul id="img_list">
<li class='list_selected'><a href=''>1</a></li>
<li><a href=''>2</a></li>
<li><a href=''>3</a></li>
<li><a href=''>4</a></li>
<li><a href=''>5</a></li>
</ul>
</div>
</body>
</html>
这是CSS部分
*{
margin:0;
padding0;
}
body{
width:1000px;
height:1000px;
}
#img_auto{
width:600px;
height:600px;
margin:100px auto;
background:#000;
}
#img_show img{
width:500px;
height:500px;
left:245px;
top:130px;
position:absolute;
display:none;
}
#img_list{
list-style:none;
width:100px;
height:50px;
top:640px;
left:600px;
position:absolute;
}
#img_list li,a{
width:15px;
height:20px;
text-align:center;
color:white;
}
#img_list li{
border:1px solid #fff;
float:left;
}
#img_list a{
display:block;
text-decoration:none;
}
#img_list a:hover{
background:#06c;
}
/*以下两个类即是JS中的识别的类*/
.list_selected{
background:#06c;
}
.img_selected{
display:block;
}以下是JS部分,Jquery版本1.90
$(document).ready(function(){
/*初始设置的值*/
var auto_t = ''; //保存定时执行器的变量
var time_switch = 2000;//每多少毫秒轮换一次图片
var img_speed = 1500;//图片出现的速度,越小越快,应该小于轮换图片的时间
/*div名称及关键类名称设置*/
var base_div = '#img_auto';//整个轮换所放在哪个DIV下
var img_div = '#img_show img';//页面中img放在哪个DIV下
var li_div = '#img_list li';//页面中li放在哪个DIV下
var li_switch_class = 'list_selected';//无序列表中用来识别的类
var img_switch_class = 'img_selected';//图片中用来识别的类
/*长度大小设置及判断*/
var img_length = $(img_div).length;//img的总数
var li_length = $(li_div).length;//li的总数
if(img_length != li_length)
{
alert('抱歉有错误发生!!');
window.close();
window.location='http://www.baidu.com'; //出错时强制转换到的页面
}
$(img_div).eq(0).css('display','block');//初始化第一张图片
/*点击li时的事件代码*/
$(li_div).click(function(event){
event.preventDefault();//阻止<a>标签的跳转
var li_pos = $(this).index(); //当前无序列表中li位置
$(this).addClass(li_switch_class);
$(this).siblings('li').removeClass(li_switch_class);
/*操作图片变换*/
$(img_div).eq(li_pos).siblings('img').css('display','none').removeClass(img_switch_class);
$(img_div).eq(li_pos).fadeIn(img_speed).addClass(img_switch_class);
})
/*图片变换的代码*/
function img_auto()
{
var img_pos = $(img_div+'.'+img_switch_class).index();//返回当前的图片的位置
$(img_div).eq(img_pos).next('img').fadeIn(img_speed).addClass(img_switch_class);
$(li_div).eq(img_pos).next('li').addClass(li_switch_class);
$(li_div).eq(img_pos).next().siblings('li').removeClass(li_switch_class);
$(img_div).eq(img_pos).next().siblings('img').css('display','none').removeClass(img_switch_class);
if(img_pos == img_length-1)
{
$(img_div).eq(0).fadeIn(img_speed).addClass(img_switch_class);
$(li_div).eq(0).addClass(li_switch_class);
$(li_div).eq(0).siblings('li').removeClass(li_switch_class);
$(img_div).eq(0).siblings('img').css('display','none').removeClass(img_switch_class);
}
}
/*自动定时器代码部分*/
function auto_switch(){
auto_t = setInterval(img_auto,time_switch);
}
$(base_div).mouseover(function(){
clearInterval(auto_t);
})
$(base_div).mouseout(function(){
auto_switch();
})
auto_switch();
})
这个是自己写的,不知道写得好不好,求指导
第一次发贴,求支持.
全部源码打包下载在这里:http://pan.baidu.com/share/link?shareid=251160&uk=1209733778jquery图片轮换
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8">
<title>图片轮换</title>
<link rel="stylesheet" href="css/default.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/default.js"></script>
</head>
<body>
<div id="img_auto">
<div id="img_show">
<img class="img_selected" src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/4.jpg" />
<img src="images/5.jpg" />
</div>
<ul id="img_list">
<li class='list_selected'><a href=''>1</a></li>
<li><a href=''>2</a></li>
<li><a href=''>3</a></li>
<li><a href=''>4</a></li>
<li><a href=''>5</a></li>
</ul>
</div>
</body>
</html>
这是CSS部分
*{
margin:0;
padding0;
}
body{
width:1000px;
height:1000px;
}
#img_auto{
width:600px;
height:600px;
margin:100px auto;
background:#000;
}
#img_show img{
width:500px;
height:500px;
left:245px;
top:130px;
position:absolute;
display:none;
}
#img_list{
list-style:none;
width:100px;
height:50px;
top:640px;
left:600px;
position:absolute;
}
#img_list li,a{
width:15px;
height:20px;
text-align:center;
color:white;
}
#img_list li{
border:1px solid #fff;
float:left;
}
#img_list a{
display:block;
text-decoration:none;
}
#img_list a:hover{
background:#06c;
}
/*以下两个类即是JS中的识别的类*/
.list_selected{
background:#06c;
}
.img_selected{
display:block;
}以下是JS部分,Jquery版本1.90
$(document).ready(function(){
/*初始设置的值*/
var auto_t = ''; //保存定时执行器的变量
var time_switch = 2000;//每多少毫秒轮换一次图片
var img_speed = 1500;//图片出现的速度,越小越快,应该小于轮换图片的时间
/*div名称及关键类名称设置*/
var base_div = '#img_auto';//整个轮换所放在哪个DIV下
var img_div = '#img_show img';//页面中img放在哪个DIV下
var li_div = '#img_list li';//页面中li放在哪个DIV下
var li_switch_class = 'list_selected';//无序列表中用来识别的类
var img_switch_class = 'img_selected';//图片中用来识别的类
/*长度大小设置及判断*/
var img_length = $(img_div).length;//img的总数
var li_length = $(li_div).length;//li的总数
if(img_length != li_length)
{
alert('抱歉有错误发生!!');
window.close();
window.location='http://www.baidu.com'; //出错时强制转换到的页面
}
$(img_div).eq(0).css('display','block');//初始化第一张图片
/*点击li时的事件代码*/
$(li_div).click(function(event){
event.preventDefault();//阻止<a>标签的跳转
var li_pos = $(this).index(); //当前无序列表中li位置
$(this).addClass(li_switch_class);
$(this).siblings('li').removeClass(li_switch_class);
/*操作图片变换*/
$(img_div).eq(li_pos).siblings('img').css('display','none').removeClass(img_switch_class);
$(img_div).eq(li_pos).fadeIn(img_speed).addClass(img_switch_class);
})
/*图片变换的代码*/
function img_auto()
{
var img_pos = $(img_div+'.'+img_switch_class).index();//返回当前的图片的位置
$(img_div).eq(img_pos).next('img').fadeIn(img_speed).addClass(img_switch_class);
$(li_div).eq(img_pos).next('li').addClass(li_switch_class);
$(li_div).eq(img_pos).next().siblings('li').removeClass(li_switch_class);
$(img_div).eq(img_pos).next().siblings('img').css('display','none').removeClass(img_switch_class);
if(img_pos == img_length-1)
{
$(img_div).eq(0).fadeIn(img_speed).addClass(img_switch_class);
$(li_div).eq(0).addClass(li_switch_class);
$(li_div).eq(0).siblings('li').removeClass(li_switch_class);
$(img_div).eq(0).siblings('img').css('display','none').removeClass(img_switch_class);
}
}
/*自动定时器代码部分*/
function auto_switch(){
auto_t = setInterval(img_auto,time_switch);
}
$(base_div).mouseover(function(){
clearInterval(auto_t);
})
$(base_div).mouseout(function(){
auto_switch();
})
auto_switch();
})
这个是自己写的,不知道写得好不好,求指导
第一次发贴,求支持.
全部源码打包下载在这里:http://pan.baidu.com/share/link?shareid=251160&uk=1209733778jquery图片轮换
写的比我自己写的精致多了。
$(function () {
//点击显示
$("#toggle>ul>li")
.each(function (i) {
$(this)
.click(function () {
$("#float>img").eq(i).fadeIn("slow").siblings().hide();
})
})
ter = setInterval("AutoShow()", 6000);
}) function AutoShow() {
curr = curr >= (4 - 1) ? 0 : ++curr;
$("#toggle>ul>li").eq(curr).trigger("click");
}