仿搜狐視頻圖片內容切換效果

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   id="70qarhlowxag"   class="wrap"><ul>	<li id="70qarhlowxag"    class="li0">1</li>    <li id="70qarhlowxag"    class="li1">2</li>    <li id="70qarhlowxag"    class="li2">3</li>    <li id="70qarhlowxag"    class="li3">4</li>    <li id="70qarhlowxag"    class="li4">5</li></ul><div   id="70qarhlowxag"   class="block">	<div   id="70qarhlowxag"   class="box" style="background:#A0A0A4">1</div>    <div   id="70qarhlowxag"   class="box" style="background:#FFBFFF">2</div>    <div   id="70qarhlowxag"   class="box" style="background:#55DFAA">3</div>    <div   id="70qarhlowxag"   class="box" style="background:#AA9FAA">4</div>    <div   id="70qarhlowxag"   class="box" style="background:#7FBF55">5</div></div></div></body></html>

上一篇：Div背景透明，文字不透明的方法

下一篇：無下拉箭頭的Select下拉框，實現網頁背景切換