图文列表和图片列表JS切换特效代码

最新推荐文章于 2024-07-31 14:35:30 发布
最新推荐文章于 2024-07-31 14:35:30 发布
阅读量2.1k 收藏
点赞数
分类专栏： js 文章标签： 前端
<!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" />
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<link rel="stylesheet" href="mytest/code/2/style/style_1.css">
<link rel="stylesheet" href="mytest/code/2/style/style_2.css">
<script type="text/javascript">
var doAlerts=false;
function changeSheets(whichSheet){
  whichSheet=whichSheet-1;
  if(document.styleSheets){
    var c = document.styleSheets.length;
    if (doAlerts) alert('Change to Style '+(whichSheet+1));
    for(var i=0;i<c;i++){
      if(i!=whichSheet){
        document.styleSheets[i].disabled=true;
      }else{
        document.styleSheets[i].disabled=false;
      }
    }
  }
}
</script>
</head>
<body>
<div id="container">
  <div class="box01">
    <div class="part"><a class="a1" href="javascript:changeSheets(1)"></a><a class="a2" href="javascript:changeSheets(2)"></a></div>
  </div>
  <div class="box02">
    <div class="part">
      <div class="grp01"> <a href="#"><img src="mytest/code/2/images/1.jpg" /></a> </div>
      <div class="grp02">
        <h4><a href="#">漂亮的衣服</a></h4>
        <h5><a href="#">美女</a></h5>
      </div>
      <div class="grp03">
        <h6>￥1900.00</h6>
        <b>运费： 20.00 </b> </div>
      <div class="grp04">山东青岛</div>
      <div class="grp05"> <a href="#">诚信保障</a> </div>
    </div>
    <div class="part">
      <div class="grp01"> <a href="#"><img src="mytest/code/2/images/2.jpg" /></a> </div>
      <div class="grp02">
        <h4><a href="#">漂亮的衣服</a></h4>
        <h5><a href="#">美女</a></h5>
      </div>
      <div class="grp03">
        <h6>￥1900.00</h6>
        <b>运费： 20.00 </b> </div>
      <div class="grp04">山东青岛</div>
      <div class="grp05"> <a href="#">诚信保障</a> </div>
    </div>
    <div class="part">
      <div class="grp01"> <a href="#"><img src="mytest/code/2/images/3.jpg" /></a> </div>
      <div class="grp02">
        <h4><a href="#">漂亮的衣服</a></h4>
        <h5><a href="#">美女</a></h5>
      </div>
      <div class="grp03">
        <h6>￥1900.00</h6>
        <b>运费： 20.00 </b> </div>
      <div class="grp04">山东青岛</div>
      <div class="grp05"> <a href="#">诚信保障</a> </div>
    </div>
    <div class="part">
      <div class="grp01"> <a href="#"><img src="mytest/code/2/images/4.jpg" /></a> </div>
      <div class="grp02">
        <h4><a href="#">漂亮的衣服</a></h4>
        <h5><a href="#">美女</a></h5>
      </div>
      <div class="grp03">
        <h6>￥1900.00</h6>
        <b>运费： 20.00 </b> </div>
      <div class="grp04">山东青岛</div>
      <div class="grp05"> <a href="#">诚信保障</a> </div>
    </div>
    <div class="part">
      <div class="grp01"> <a href="#"><img src="mytest/code/2/images/5.jpg" /></a> </div>
      <div class="grp02">
        <h4><a href="#">漂亮的衣服</a></h4>
        <h5><a href="#">美女</a></h5>
      </div>
      <div class="grp03">
        <h6>￥1900.00</h6>
        <b>运费： 20.00 </b> </div>
      <div class="grp04">山东青岛</div>
      <div class="grp05"> <a href="#">诚信保障</a> </div>
    </div>
    <div class="part">
      <div class="grp01"> <a href="http://www.byqpw.com"><img src="mytest/code/2/images/6.jpg" /></a> </div>
      <div class="grp02">
        <h4><a href="#">漂亮的衣服</a></h4>
        <h5><a href="#">美女</a></h5>
      </div>
      <div class="grp03">
        <h6>￥1900.00</h6>
        <b>运费： 20.00 </b> </div>
      <div class="grp04">山东青岛</div>
      <div class="grp05"> <a href="#">诚信保障</a> </div>
    </div>
  </div>
</div>
</body>
</html>
shuangyidehudie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
分享111个JS图片切换特效，总有一款适合您
adendean的博客
02-03 365
js
css div层 切换,JS+DIV+CSS实现的经典标签切换效果代码
weixin_36472718的博客
08-03 719
本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码。分享给大家供大家参考。具体如下：这里演示JS+DIV+CSS实现的标签切换效果代码，通俗说就是滑动门的实现效果，很不错的实例，希望对你学习JS+CSS布局有帮助。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"...
分享117个图片切换JS特效，总有一款适合您
zy0412326的专栏
02-04 624
JS
分享63个广告代码JS特效，总有一款适合您
zdh13370188237的博客
02-12 955
jquery实现鼠标移动到图片上显示大图广告代码。jquery实现led广告牌旋转系统图片切换效果。全屏图片广告随机漂浮可点击关闭jQuery特效。jquery实现网页顶部定时广告，支持关闭隐藏。jQuery仿QQ空间鼠标感应图片滚动预览代码。jQuery关闭后不再显示的全屏图片广告代码。jQuery-实现仿QQ空间鼠标感应图片滚动。分享63个广告代码JS特效，总有一款适合您。简洁易用的jQuery左右对称浮动广告代码。jQuery图文左右滚动代码(箭头控制)图片无缝滚动插件上下左右图片无缝滚动代码。
10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码（二）
墨鱼部落格
02-28 237
js电影图片滑动放大展示特效 jQuery列表图片全图滚动预览 jQuery游戏图片手风琴切换代码 响应式图片文字横幅布局代码 swiper新闻大图滚动组合特效 swiper图文标题滚动轮播特效 js自适应屏幕图片瀑布流代码 js随机照片墙布局特效 jquery 图片放大镜仿iphone苹果手机图片文字放大查看效果 jQu...
10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码（一）
墨鱼部落格
02-28 421
实现图片墙时光穿梭特效 swiper图文卡片滑块切换特效 网页放大镜图片预览插件 图片瀑布流tab分类切换特效 js窗帘式图片切换特效 全屏带视频banner轮播图片特效 Swiper仿魅族官网大图轮播幻灯片特效 Swiper小米官网导航图片轮播实例 Swiper响应式缩略图片幻灯片切换特效 卡片式商品列表添加购物车特效 ...
分享114个图片切换JS特效，总有一款适合您
zy0412326的专栏
02-03 691
JS
分享115个图片切换JS特效，总有一款适合您
zy0412326的专栏
02-04 624
js特效源码
jquery怎样在手机里面进行列表模式的切换
baidu_36681154的博客
02-01 302
电商项目里面，我们会经常遇到这样一种特效，就是我们在点击某个按钮时，会切换成另种图标，接着我们下面内容也会发生变化，其实本质上还是tab选项卡的变形版本，因为tab选项卡是图标与图标的并存，而这里无非就是一种图标隐藏，其下面内容显示成xxx,而当点击它变成另一种图标时，其下面内容的样式发生改变而数据不变。 下面我将介绍列表模式的写法： 工具/原料 jq
jQuery箭头左右切换图文列表特效
07-24
这个特效中，我们需要选中图片列表容器以及左右箭头，然后对这些元素进行添加事件监听器、改变样式等操作。 3. **事件处理**：jQuery提供了丰富的事件处理函数，如`click()`用于监听点击事件。当用户点击左右箭头时...
百度应用jQuery图文列表切换.zip
07-04
4. **响应式设计**：为了让特效在不同设备和屏幕尺寸上都能正常工作，"百度应用jQuery图文列表切换"采用了响应式布局。这通常涉及到媒体查询(`@media`)来根据屏幕宽度调整元素的样式，以及可能的布局调整，确保在...
swiper团队成员图文列表轮播切换代码.zip
09-25
总的来说，"swiper团队成员图文列表轮播切换代码" 是一个集成了jQuery、CSS3动画和良好可扩展性的插件，适合于快速构建具有轮播功能的网页。理解并掌握其工作原理和实现方式，对于提升网页开发技能和提高工作效率...
百度应用jQuery图文列表切换特效代码
03-20
【标题】"百度应用jQuery图文列表切换特效代码"所涉及的知识点主要集中在使用jQuery实现一个响应式的、在不同设备上都能良好展示的图文列表切换效果。这种特效常见于各种网站的首页、产品展示或者排行榜区域，它能...
swiper团队成员图文列表轮播切换代码
06-10
总的来说，"swiper团队成员图文列表轮播切换代码"是一个利用Swiper4的实例，通过HTML、CSS和JavaScript技术，实现了一个功能丰富的团队成员展示模块。它展示了如何将图片和文字结合，以美观且交互性强的方式展示团队...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1294
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 845
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【前端面试】五、框架
最新发布
weixin_49015558的博客
07-31 442
1 Vue2 2 Vue3 3 React 4 Angular
electron 主进程和渲染进程
qq_21087199的博客
07-29 355
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值