前端JS特效第29集：jQuery仿途牛多样式图片轮播代码

强迫领导写Bug

于 2024-07-11 11:30:00 发布

阅读量301

点赞数 10

文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/2401_85903333/article/details/139999439

版权

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>jQuery仿途牛多样式图片轮播代码 - php中文网</title>

<!-- 页面css样式 -->
<link rel="stylesheet" href="css/tuniu.css" />

<!-- js文件 -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/index.js"></script>

</head>

<body>

<style>
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;list-style-type: none;overflow-x:none  }
body{line-height: 1;font-size: 88% ;font-family: "微软雅黑"}
h1, h2, h3, h4, h5, h6{font-size: 100%; margin: 0 ;font-weight: 400;padding:0;}
ul, ol{list-style: none;}
a{color:#404040;text-decoration: none;}  

</style>

<div class="center">
	 <div class="center_top">
	  <!-- <==========================================================> -->
					  <!-- 轮播图开始区域 -->
	 <!-- <div id="bannar"> -->
		   <div class="content_middle">
			  <div class="common_da">

					<a class="common btnLeft"href="javascript:;"></a>
					<a class="common btnRight"href="javascript:;"></a>

			  </div>
	                       		
	                       	
			   <ul>
				  <li style="background:url(images/bg1.jpeg) no-repeat center center;opacity: 100;filter: alpha(opacity=1);"></li>
				  <li style="background:url(images/bg2.jpeg) no-repeat center center;"></li>
				  <li style="background:url(images/bg3.jpeg) no-repeat center center;"></li>
				  <li style="background:url(images/bg4.jpeg) no-repeat center center;"></li>
				  <li style="background:url(images/bg5.jpeg) no-repeat center center;"></li>
				  <li style="background:url(images/bg6.jpeg) no-repeat center center;"></li>
			   </ul>
				<div class="table">
					<a class="small_active"href="javascript:;">跨年购心动价</a>
					<a href="javascript:;">五折秒杀周边游</a>
					<a href="javascript:;"> 跟台湾宝贝趴趴走</a>
					<a href="javascript:;">国内最高减1000</a>
					<a href="javascript:;">迪拜新年特惠</a>
					<a href="javascript:;">日韩东南亚专场</a>
					 
				</div>
		   </div>    	  
	 </div>    
</div>

</body>
</html>

全部代码：jQuery仿途牛多样式图片轮播代码