图片导航轮播

Dear 丶 2022-08-21 11:56 173阅读 0赞

1.建立一个html页面

2.引入jquery.js

3.建立一个tab.js,里边写所需的样式

代码实现：

tab.html

<!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" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<link rel="stylesheet" href="tab.css" />
    	 <include file="Public/left" />
    	<script src='jquery.js'></script>
    	<script src='tab.js'></script>
    	<title></title>
    </head>
    <body>
    	<div  class='tabtitle'>
    		<ul>
    			<li class='curent'>蔡依林</li>
    			<li>范冰冰</li>
    			<li>杨幂</li>
    			<li>小三</li>
    		</ul>
    	</div>
    	<div class='tabcontent'>
    		<div class='hide' style='display:block'><img src="1.jpg" width="200px" height="180px"></div>
    		<div class="hide"><img src="2.jpg" width="200px" height="180px"></div>
    		<div class='hide'><img src="3.jpg" width="200px" height="180px"></div>
    		<div class='hide'><img src="4.jpg" width="200px" height="180px"></div>
    	</div>
    </body>
    </html>

2.tab.js

$(function(){
    //获取所有li的值
    	var li = $('.tabtitle ul li');
    	//获取所有div
    	var div = $('.tabcontent div');
    	li.mouseover(function(){
    		//获取当前对象
    		var _this = $(this);
    		time = setTimeout(function(){
    			//获取当前对象索引值
    			var num = _this.index();
    			_this.addClass('curent').siblings().removeClass('curent');
    			div.eq(num).show().siblings().hide();
    		},300);
    		
    	}).mouseout(function(){
    		clearTimeout(time);
    	})
    })

tab.css

*{
    	margin: 0px;
    }
    li{
    	list-style: none;
    }
    .tabtitle ul li{
    	float: left;
    	border: 1px solid red;
    	width: 50px;
    	height:45px;
    	line-height: 45px;
    	text-align: center;
    	cursor: pointer;
    }
    .tabcontent div{
    	border: 2px solid blue;
    	width: 200px;
    	height: 180px;
    	line-height: 180px;
    	text-align: center;
    }
    .tabcontent{
    	clear: both;
    	margin-left: 45px;
    }
    .curent{
    	background:red;
    	color:black;
        font-family: 华文行楷;
    }
    .hide{
    	display: none;
    }

案例效果展示 ：

![Center][]![Center 1][]![Center 2][]

[Center]: https://img-blog.csdn.net/20160429184313918?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20160429184349277?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220724/c556608f135948c39af64946fde6b245.png