网络编程

简单实现js轮播图效果
网络编程 2025/10/25 佚名
3 2

本文实例为大家分享了js实现轮播图效果展示的具体代码，供大家参考，具体内容如下

html结构

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  *{
   margin:0;
   padding:0;
   font-size:14px;
   -webkit-user-select:none;
  }
  ul,li{
   list-style:none;

  }
  img{
   display:block;
   border:none;
  }
  a{
   display:block;
   color:#000;
   text-decoration: none;
  }
  a:hover,a:active,a:visited,a:target{
   display:block;
   color:#000;
   text-decoration: none;
  }
  .banner{
   position:relative;
   margin:0 auto;
   width:1000px;
   height:300px;
   overflow:hidden;
  }
  .banner .inner{
   position:absolute;
   top:0;
   left:0;
   height:300px;
   width:1000px;/*在JS数据绑定结束后根据请求数据的多少来动态调整宽度*/
  }
  .banner .inner div{
   float:left;
   width:1000px;
   height:300px;
   background:url('img/default.gif') no-repeat center center #e1e1e1;
  }
  .banner .inner img{
   display:none;
   width:100%;
   height:100%;
   opacity:0;
   filter:alpha(opacity=0);
  }
  .banner .bannerTip{
   height:18px;
   position:absolute;
   right:20px;
   bottom:20px;

  }
  .banner .bannerTip li{
   float:left;
   margin-left:10px;
   width:18px;
   height:18px;
   border-radius:50%;
   background:lightblue;
   cursor:pointer;
  }
  .banner .bannerTip li.bg{
   background:red;
  }
  .banner a{
   display:none;
   position:absolute;
   top:50%;
   margin-top:-22.5px;
   width:30px;
   height:45px;
   background-image:url("img/pre.png");
   background-repeat:no-repeat;
   opacity:0.5;
   filter:alpha(opacity=50);

  }
  .banner a:hover{
   opacity:1;
   filter:alpha(opacity=100);
  }
  .banner a.bannerLeft{
   left:20px;
   background-position:0 0;
  }
  .banner a.bannerRight{
   right:20px;
   background-position:-45px 0;

  }
 </style>
</head>
<body>
 <div class='banner' id='banner'>
  <div class='inner'>
   <div><img src="/UploadFiles/2021-04-02/banner1.jpg">


js





(function(){
 var banner = document.getElementById('banner');
 var bannerInner = utils.firstChild(banner);
 var bannerTip = utils.children(banner,'ul')[0];
 var imgList = bannerInner.getElementsByTagName('img');
 var oLis = bannerTip.getElementsByTagName('li');
 var bannerLeft = utils.children(banner,'a')[0];
 var bannerRight = utils.children(banner,'a')[1];
 //实现数据绑定：Ajax请求数据、按照字符串拼接的方式绑定数据
 var jsonData = null,count = null
 ~function(){
  var xhr = new XMLHttlRequest;
  xhr.open('get',"json/banner.txt"+Math.random(),false);
  xhr.onreadystatechange = function(){
   if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
    jsonData = utils.formatJSON(xhr.responseText);
   }
  }
  xhr.send(null);
 }()

 ~function(){
  //绑定轮播图区域的数据
  var str = "";
  if(jsonData){
   for(var i = 0,len = jsonData.length;i<len;i++){
    str+='<div><img src="/UploadFiles/2021-04-02/">


绑定的数据





[
 {"img":"img/banner1.jpg","desc":"第一张轮播图"},
 {"img":"img/banner2.jpg","desc":"第二张轮播图"},
 {"img":"img/banner3.jpg","desc":"第三张轮播图"},
 {"img":"img/banner4.jpg","desc":"第四张轮播图"}
]







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,轮播图
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“简单实现js轮播图效果”

暂无“简单实现js轮播图效果”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2025/10/25

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com