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

最新推荐文章于 2023-03-09 15:14:38 发布
最新推荐文章于 2023-03-09 15:14:38 发布
阅读量1k 收藏
点赞数
分类专栏： js特效代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/10035835
版权

截图效果：

页面代码：

<%@ 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");
}



 

在奋斗的大道
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最简单的js图片切换效果实现代码
10-28
最简单的js图片切换效果实现代码，需要的朋友可以参考下。
JS实现图片切换特效
11-28
本文实例为大家分享了JS实现图片切换的具体代码，供大家参考，具体内容如下 知识点： 1.[removed]网页全部加载完后再执行 2.获取元素 设置属性 3.临界情况判断 运行效果： 点击上一张下一章切换图片 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #box{ width: 1200px; margin: 0 auto; } </style> <body> <div id="
js图片自动切换效果处理代码
10-27
自己设置每张图片切换的时间间隔，自己设置每张图片的路径（绝对、相对路径都可以）虽然很简单，但是很实用
js图片切换特效
03-19
NULL 博文链接：https://kinyum-li.iteye.com/blog/718772
如何用js代码实现图片切换效果
weixin_30437847的博客
09-08 230
通过点击按钮，实现图片的隐藏与显现，切换。实现代码：<style> .a{ width: 300px; height: 300px; border: 1px solid black; } .b{ width: 50px; height: 30px; float: left; cu...
js实现20多种图片切换特效
06-04
首先，"js实现20多种图片切换特效"这个标题暗示我们将讨论JavaScript在图像处理方面的强大功能。JavaScript是一种广泛用于网页开发的脚本语言，能够实时更新DOM（文档对象模型）以改变页面内容。在图片切换特效中，...
ES6实现图片切换特效代码
10-15
在本文中，我们将深入探讨如何使用ES6语法来实现一个图片切换特效。这个特效通过创建一个动态展示的图片列表，使用户能够轻松地浏览和切换不同的图片。代码示例展示了如何利用JavaScript和CSS来实现这一功能，使得...
js实现图片放大和拖拽特效代码分享
11-23
js实现图片放大和拖拽特效是一款非常实用的js特效，实现了图片的放大和拖拽功能，没用用到jquery插件，是用原生javascript实现的，除了点击放大和缩小按钮来控制图片的放大缩小，还可以使用鼠标的滚轮控制图片的缩放...
js实现图片切换效果
最新发布
qq_46162047的博客
03-09 2125
JS实现图片切换
通过js代码实现图片切换和放大镜等效果
10-14
通过以上代码实现图片的切换和放大镜的效果 本代码是针对京东商城的手机详情页做的 通过移动手机的小图片可以切换不同的大图片 同时当鼠标放在大图片上时可以实现放大效果 分享给初学者！
图片切换效果代码html图片切换
12-16
图片切换html
纯js实现背景图片切换效果代码
12-02
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”> <head> <title>背景切换</title> <link href=”css/bgchage.css” type=”text/css” rel=”Stylesheet” /> </head> <body> <div><ul><li>
20行JS代码实现图片切换效果
03-16
NULL 博文链接：https://jinghua.iteye.com/blog/400420
js鼠标点击图片切换效果实现代码
01-21
本文实例讲述了js鼠标点击图片切换效果实现代码。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： html代码： <div id=menuWrapper class=menuWrapper> <ul class=menu id=menu> <li class=bg1 xss=removed> <a>迈瑞宝</a> <ul class=sub1 xss=removed> <li><a>报价：11
滚动图片切换连播(JavaScript特效 | JS特效源代码)
foart的专栏
09-27 4682
符合 XHTML 1.0 Transitional 滚动图片切换连播<!--/*图片切换样式开始*/#ImgChangeMain {WIDTH:356px; HEIGHT:160px;margin:auto; overflow:hidden}#ImgChangeDATA {display:none;visibility:hidden}.ImgChange
html js 图片左右切换代码,Js图片切换特效中的左右箭头功能实现代码
weixin_30199835的博客
06-04 1364
Js图片切换特效中的左右箭头功能实现代码function $(e){return "string" == typeof e ? document.getElementById(e) : e;}var Event={add:function (obj,EventType,fn){if (obj.attachEvent){obj['e'+EventType+fn] = fn;obj[EventType...
图文列表和图片列表JS切换特效代码
shuangyidehudie的专栏
05-07 2153
蚂蚁部落 var doAlerts=false; function changeSheets(whichSheet){   whichSheet=whichSheet-1;   if(document.styleSheets){     var c = document.styleSheets.length;     if (doAlerts) alert('Change
轮换大图切换代码html,js实现图片轮换效果代码
weixin_31201481的博客
06-10 539
var numb = 0;var imgnumb = 1;function showimg() {//两张图片切换方法1 /*numb++;if (numb % 2 == 0) {document.getElementById('img1').setAttribute('src', 'images/1.jpg');}else {document.getElementById('img1').set...
"网站设计JavaScript特效总结：图片切换、放大镜、下拉菜单
本文主要总结了一些常见的JavaScript特效，这些特效包括鼠标悬停图片切换查看器、鼠标移动图片放大、鼠标移动切换内容、贵财下拉菜单案例、JS图片放大镜功能、以及下一页翻页跳转功能。 首先，通过鼠标悬停图片切换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值