带标题的图片切换代码_背景特效

带标题的图片切换代码: 发布时间：2020-09-09编辑：脚本学堂

带标题的图片切换代码，借助jquery实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
	auto();
	animates();
})
var i = -1;
var offset = 2500;	
var timer = null;
function auto(){
	var n = $("li").length-1;
	i++;
	if(i > n){
		i = 0;	
	}
	slide(i);
	timer = window.setTimeout(auto, offset);	
}
function slide(i){
		$(".block:animated").stop(false,true);
		$(".block").animate({top: -300*i+"px"});
		$(".li" + i).addClass("curr").siblings().removeClass("curr");
		
}
function animates(){
	$("li").each(function(){
		$(this).hover(function(){
			var num = $(this).index();
			if(timer){
				clearTimeout(timer);
				i = $(this).prevAll().length;
             	slide(i); 
				$(this).addClass("curr").siblings().removeClass("curr");
				$(".block").animate({top: -300*num+"px"});						
			}																	 
		},function(){
			timer = window.setTimeout(auto, offset);
			$(".block").dequeue();
		})
	})
	$(".block").hover(function(){
		clearTimeout(timer);	
	},function(){
		timer = window.setTimeout(auto, offset);	
	})
}
</script>
<style>
*{margin:0;padding:0}
.wrap {width:500px;height:300px;margin:50px auto;border:1px solid #ccc;overflow:hidden;position:relative}
ul,li{list-style:none}
ul {float:left;width:100px}
li {height:30px;<a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>:30px;background:#ccc;border-bottom:1px solid #fff}
li.curr {background:#f90}
.block {width:390px;position:absolute;right:0;}
.box {width:390px;background:#ccc;height:300px;}
</style>
</head>
<body>
<div class="wrap">
<ul>
	<li class="li0">1</li>
    <li class="li1">2</li>
    <li class="li2">3</li>
    <li class="li3">4</li>
    <li class="li4">5</li>
</ul>
<div class="block">
	<div class="box" style="background:#A0A0A4">1</div>
    <div class="box" style="background:#FFBFFF">2</div>
    <div class="box" style="background:#55DFAA">3</div>
    <div class="box" style="background:#AA9FAA">4</div>
    <div class="box" style="background:#7FBF55">5</div>
</div>
</div>
</body>
</html>

提示：可修改代码后再运行!

上一篇：Div背景透明，文字不透明的方法
下一篇：兼容众多主流浏览器的CSS背景渐变代码

与带标题的图片切换代码有关的文章

本文标题：带标题的图片切换代码
本页链接：http://www.jb200.com/tx/100.html

浏览排行

栏目分类

热点文章

带标题的图片切换代码