(js特效) js代码实现图片切换

朴灿烈づ我的快乐病毒、 2024-04-17 23:13 81阅读 0赞

截图效果：

![Center][]

页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    }
    
    h1 {
    	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
    	color: #333;
    	margin: 0;
    	padding: 5px 0;
    }
    
    h1 small {
    	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    	text-transform: uppercase;
    	letter-spacing: 1.5em;
    	display: block;
    	color: #fff;
    }
    
    .container {
    	width: 970px;
    	margin: 0 auto;
    }
    
    ul#topnav {
    	margin: 0;
    	padding: 0;
    	float: left;
    	width: 970px;
    	list-style: none;
    	position: relative;
    	font-size: 1.2em;
    	background: url(images/topnav_s.gif) repeat-x;
    }
    
    ul#topnav li {
    	float: left;
    	margin: 0;
    	padding: 0;
    	border-right: 1px solid #555;
    }
    
    ul#topnav li a {
    	padding: 10px 15px;
    	display: block;
    	color: #f0f0f0;
    	text-decoration: none;
    }
    
    ul#topnav li:hover {
    	background: #1376c9 url(images/topnav_a.gif ) repeat-x;
    }
    
    ul#topnav li span {
    	float: left;
    	padding: 15px 0;
    	position: absolute;
    	left: 0;
    	top: 35px;
    	display: none;
    	width: 970px;
    	background: #1376c9;
    	color: #fff;
    	-moz-border-radius-bottomright: 5px;
    	-khtml-border-radius-bottomright: 5px;
    	-webkit-border-bottom-right-radius: 5px;
    	-moz-border-radius-bottomleft: 5px;
    	-khtml-border-radius-bottomleft: 5px;
    	-webkit-border-bottom-left-radius: 5px;
    }
    
    ul#topnav li:hover span {
    	display: block;
    }
    
    ul#topnav li span a {
    	display: inline;
    }
    
    ul#topnav li span a:hover {
    	text-decoration: underline;
    }
    
    
    
    
    </style>
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    
    <script type="text/javascript">
    	$(document).ready(function() {
    
    		$("ul#topnav li").hover(function() { //Hover over event on list item
    			$(this).css({
    				'background' : '#1376c9 url(topnav_active.gif) repeat-x'
    			}); //Add background color + image on hovered list item
    			$(this).find("span").show(); //Show the subnav
    		}, function() { //on hover out...
    			$(this).css({
    				'background' : 'none'
    			}); //Ditch the background
    			$(this).find("span").hide(); //Hide the subnav
    		});
    
    	});
    </script>
    
    </head>
    
    <body>
    <div class="container">	
    	<h1></h1>
    	<div style="clear: both; display: block; padding-bottom: 20px;">  <ul id="topnav">
            <li><a href="">首页</a></li>
            <li>
                <a href="">关于克明</a>
                <span>
                    <a href="">企业介绍</a> |
                    <a href="">发展历程</a> |
                    <a href="">组织机构</a> |
    				<a href="">企业风采</a> |
                    <a href="">领导关怀</a> |
    				<a href="">企业荣誉</a>
                </span>
            </li>
            <li>
                <a href="">新闻中心</a>
                <span>
                    <a href="">公司新闻</a> |
                    <a href="">行业资讯</a> |
                    <a href="">媒体报道</a>
                </span>
            </li>
            <li>
                <a href="">克明文化</a>
                <span>
                    <a href="">企业文化</a> |
                    <a href="">员工风采</a>               
                </span>
            </li>
            <li><a href="">克明产品</a>
    			 <span>
                    <a href="">挂面</a> |
                    <a href="">调味酱</a>               
                </span>
    		</li>
    		 <li><a href="">品牌推广</a>
    			 <span>
                    <a href="">VI规范</a> |
                    <a href="">品牌推广</a>               
                </span>
    		</li>
    		<li><a href="">售后服务</a>
    			 <span>
                    <a href="">售后服务</a> |
                    <a href="">销售网络</a> | 
    				<a href="">联系我们</a>
                </span>
    		</li> 
    		<li><a href="">投资者服务</a>
    			 <span>
                    <a href="">投资者互动平台</a>                            
                </span>
    		</li>
    		<li><a href="">加入克明</a>
    			 <span>
                    <a href="">人才战略</a> |
                    <a href="">职位需求</a> |   
    				 <a href="">简历提交</a>
                </span>
    		</li>
    		<li><a href="">联系我们</a>
    			
    		</li>
        </ul>
    	
    
    </div>
    <br><br><br><br>
    <div style="text-align:center;clear:both">
    </div>

//图片切换布局 
    <div class="content_right">
      <div class="ad" >
        <ul class="slider" >
          <li><a href="#"><img src="images/buttom_0.jpg"/></a></li>
          <li><a href="#"><img src="images/buttom_1.jpg"/></a></li>
          <li><a href="#"><img src="images/buttom_2.jpg"/></a></li>
          <li><a href="#"><img src="images/buttom_3.jpg" /></a></li>
        </ul>
        <ul class="num" >
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    
    
    
    
    
    </body>
    </html>

css文件（index.css）

#number {
     width:88px;
     position:absolute;
     left:10px;
     bottom:10px;
    }
    #number li {
     padding-left:6px;
     float:left;
     text-indent:-9999px;
     width:16px;
     height:16px;
     overflow:hidden;
     background-repeat:no-repeat;
    }
    #buttom_0 {
     background-position:0 0;
    }
    #buttom_1 {
     background-position:-22px 0;
    }
    #buttom_2 {
     background-position:-44px 0;
    }
    #buttom_3 {
     background-position:-66px 0;
    }
    #buttom_0.selected {
     background-position:0 -16px;
    }
    #buttom_1.selected {
     background-position:-22px -16px;
    }
    #buttom_2.selected {
     background-position:-44px -16px;
    }
    #buttom_3.selected {
     background-position:-66px -16px;
    }
    /* */
    .content_right{float:left;}
    .content_right .ad { 
     margin-bottom:10px;
     /*设置背景图片的大小*/
     width:573px; 
     height:257px; 
     overflow:hidden;
     position:relative;
    }
    .content_right .slider,.content_right .num{
     position:absolute;
    }
    .content_right .slider li{ 
     list-style:none;
     display:inline;
     
    }
    .content_right .slider img{ 
     width:573px; 
     height:257px;
     display:block;
    }
    .content_right .num{ 
     right:5px; 
     bottom:5px;
    }
    .content_right .num li{
     float: left;
     color: #069;
     text-align: center;
     line-height: 16px;
     width: 16px;
     height: 16px;
     font-family: Arial;
     font-size: 12px;
     cursor: pointer;
     overflow: hidden;
     margin: 3px 1px;
     border: 1px solid #069;
     background-color: #fff;
    }
    .content_right .num li.on{
     color: #fff;
     line-height: 16px;
     width: 16px;
     height: 16px;
     font-size: 14px;
     margin: 3px 1px;
     border: 1px solid #069;
     background-color: #069;
     font-weight: bold;
    }