自己写的jQuery焦点图（渐变、横向、竖向），没有做成函数 ，有必要的同学自己去做一下~~~~
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>html5</title>
<meta name="keywords" content="html5" />
<meta name="description" content="html5 test" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.left {width:500px; height: 200px; overflow:hidden; margin: 50px auto;position: relative;}
ul.list_img {position: absolute; width: 3000px;}
ul ,li {list-style: none;}
.list_img li {width: 500px;font-size: 30px;height: 200px;/*~~如果横向切换设置float:left;~~*/}
.list_num { position: absolute; right: 0px; bottom: 0px;}
.list_num li {float: left; width: 20px; height: 20px; background: #eaeaea; list-style: none; text-align: center; cursor: pointer;}
.list_num li.on {background: #FF0000;}
</style>
<script type="text/javascript">
$(function() {
var index = 0;
var len = $(".list_img li").length;
//自动翻转 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
var MyTime = setInterval(function(){
showimg(index);
index++;
if(index==len){index=0;}
},3000);
//数字跳转 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
$(".list_num li").mouseover(function(){
index = $(".list_num li").index(this);
showimg(index);
});
//鼠标悬停是不翻转 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('.left').hover(function(){
if(MyTime){
clearInterval(MyTime);
}
},function(){
MyTime = setInterval(function(){
showimg(index)
index++;
if(index==len){index=0;}
} , 4000);
});
//翻转效果函数，stop用来解决鼠标滑动过快后多次执行的bug ~~~~~~~~~~~~~~~~~~~~~~~~~~~
function showimg(i){
//渐变切换
$(".list_img li").eq(i).stop(true,true).fadeIn("slow").siblings("li").hide();
//横向切换
//$(".list_img").stop(true,false).animate({left:-500*i},200);
//竖向切换
//$(".list_img").stop(true,false).animate({top:-200*i},200);
$(".list_num li").eq(i).addClass("on").siblings().removeClass("on");
}
})
</script>
</head>
<body>
<div class="left">
<ul class="list_img">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="list_num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号