仿搜狐视频图片内容切换效果

2024-09-05 12:22:00

字体：大中小

来源：转载

供稿：网友

一款JS仿搜狐视频做的一个效果，带标题的图片切换代码，目前还没有发现什么BUG，有问题反馈下哈，也是刚学的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/javascript" src="http://www.w3school.com.cn/jquery/jquery.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;line-height: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背景透明，文字不透明的方法

下一篇：无下拉箭头的Select下拉框，实现网页背景切换

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注