首页 编程语言正文

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

无情 阅读：677 2021-04-01 10:19:52 评论：0

截图效果：

页面代码：

<%@ 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 rel="stylesheet" type="text/css" href="styles.css"> 
	--> 
<!--css样式文件  --> 
<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> 
<!--jquery 核心文件  --> 
<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; 
}


 

相关的js 代码

$(function(){ 
 $('#number li').mouseover(function(){ 
  $("#"+this.id).addClass("selected").siblings().removeClass("selected"); 
  $('.slider1 li img').fadeIn(4000).attr("src","images/"+(this.id)+".jpg"); 
  }); 
 }); 
/*首页广告效果*/ 
$(function(){ 
     var len  = $(".num > li").length; 
  var index = 0; 
  var adTimer; 
  $(".num li").mouseover(function(){ 
  index  =   $(".num li").index(this); 
  showImg(index); 
  }).eq(0).mouseover();  
  //滑入 停止动画，滑出开始动画. 
  $('.ad').hover(function(){ 
    clearInterval(adTimer); 
   },function(){ 
    adTimer = setInterval(function(){ 
       showImg(index) 
    index++; 
    if(index==len){index=0;} 
     } , 2000); 
  }).trigger("mouseleave"); 
}) 
// 通过控制top ，来显示不同的幻灯片 
function showImg(index){ 
        var adHeight = $(".content_right .ad").height(); 
  $(".slider").stop(true,false).animate({bottom : -adHeight*index},1000); 
   
      $(".num li").removeClass("on") 
   .eq(index).addClass("on"); 
}



 

标签:程序员编程语言
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
关注我们

一个IT知识分享的公众号

友情链接IM LINKS