仿今日头条图片真人在线投注网极速赛车官网轮播js特效/焦点幻灯代码
Opera、Safari、搜狗、 仿今日头条图片轮播js特效/焦点幻灯代码，jQuery仿今日头条图片轮播代码是一款新闻图片轮播切换代码 1、真人在线投注网html页面代码 2、FireFox、傲 效果演示今日头条图片轮播演示 - bokequ.com极速赛车官网"" src="http://img.bokequ.com/wp-content/uploads/2023/0113162033.jpg" width="633" height="398" />
<!doctype html><html><head><meta charset="utf-8"><title>今日头条图片轮播演示 - bokequ.com</title><link rel="stylesheet" type="text/css" href="./style.css"></head><body><div id="banner"> <div id="pic"> <ul id="picUl"> <li><a href="#"><img src="images/b1.jpg"></a></li> <li><a href="#"><img src="images/b2.jpg"></a></li> <li><a href="#"><img src="images/b3.jpg"></a></li> <li><a href="#"><img src="images/b4.jpg"></a></li> <li><a href="#"><img src="images/b5.jpg"></a></li> <li><a href="#"><img src="images/b6.jpg"></a></li> </ul> </div> <div id="tab"> <ul id="tabUl"> <li class="active"><a href="#">要闻</a><span class="on"></span></li> <li><a href="#">旅游</a><span></span></li> <li><a href="#">娱乐</a><span></span></li> <li><a href="#">游戏</a><span></span></li> <li><a href="#">动漫</a><span></span></li> <li><a href="#">明星</a><span></span></li> </ul> </div></div><script src="js/jquery.js"></script><script type="text/javascript"> $(function(){ var timer=null; var index=0; var picLi=$("#banner #picUl li"); var tabLi=$("#banner #tabUl li" ); var tabSp=$("#banner #tabUl li span") var size=$("#banner #picUl li").size(); tabLi.mouseover(function(){ index=$(this).index(); $(this).addClass('active').siblings().removeClass('active'); tabSp.eq(index).addClass('on').siblings().removeClass('on'); picLi.eq(index).fadeIn().siblings().fadeOut(); }); $("#picUl").hover(function(){ clearInterval(timer); },function(){timer=setInterval(move,1500);}); window.clearInterval(timer); timer=window.setInterval(move,1500); function move(){ index++; if(index==size) { index=0; } tabLi.eq(index).addClass('active').siblings().removeClass('active'); tabSp.eq(index).addClass('on').siblings().removeClass('on'); picLi.eq(index).fadeIn().siblings().fadeOut(); } })</script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>适用浏览器：360、</p></div></body></html>body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0;border:none;list-style:none; } #banner{ width:662px; height:300px; margin:100px auto; position:relative; overflow:hidden;} #banner #picUl li{ position:absolute; top:0; left:0;} #banner #picUl li img{ width:600px;} #banner #tab{ width:62px; height:100%; position:absolute; right:0; background:#000;} #banner #tab li { width:62px;text-align:center; position:relative;} #banner #tab li a{ text-decoration:none; color:#fff; font-size:15px;line-height:50px; display:block;} #banner #tab li span{ width: 0; height: 0; display: block; position: absolute; top: 50%; left:-15px; margin-top:-3px; border-width: 8px; border-style: solid; border-color: transparent rgba(255,0,0,0.6) transparent transparent; display:none;} #banner #tab li.active{ background:rgba(255,0,0,0.6);} #banner #tab li.active .on{ display:block;}
- 最近发表
-
- dedecms织梦5.7仿站视频教程(初级上部)
- HTML+JavaScript创建响应式404页面
- 百度搜索引擎搜索查询的表现形式
- QQ空间心情说说日志类网站织梦模板(带手机端)
- 个人网站程序语言HTML/ASP/PHP解析
- WordPress搜索引擎优化插件All in One SEO Pack Pro
- 织梦dedecms红黑配图片模板源码v2.0
- These Crypto Assets Dumped the Most as the Total Market Cap Shed Over $200B (Weekend Watch)
- (扒站工具)如何下载网站fonts文件夹
- WordPress外链图片插件Featured Image from URL
- 随机阅读
-
- 飞牛fnOS系统虚拟机迎来v0.9.0更新，新增安装镜像支持，从此告别繁琐安装
- 华为发布HUAWEI Pura 80系列 王者归位再次引领移动影像未来
- HTML5+CSS3实现列表式音乐播放器特效源码
- 小米米家无线直发梳新色上市：云瑾紫，三挡调温，售价亲民，实用之选
- WHOIS域名信息查询php源码
- 2024龙年除夕跨年烟花html代码大全
- 荣耀手表Fit即将揭秘健康能量评估功能，萌宠表盘引爆5月28日，科技与时尚碰撞，你准备好了吗？
- 微软Microsoft Edge Image Editor扩展如何关闭？
- 微博图片显示403无法打开如何解决？
- JavaScript实现页面跳转方法大全
- 个人博客网站如何实现https重定向(301)到http
- DOGE, WIF Emerge as Today's Top Performers, BTC Aims at $70K (Weekend Watch)
- TON Defies Market Sentiment With a Massive 23% Surge, BTC Slumps Toward $70K (Market Watch)
- TON Defies Market Sentiment With a Massive 23% Surge, BTC Slumps Toward $70K (Market Watch)
- HTML+JavaScript创建响应式404页面
- 纸张撕裂404错误页面动画效果
- JavaScript实现页面跳转方法大全
- WordPress建站安装时“此站点遇到了致命错误”
- 小米新款智能净烟机S20上市：告别油烟困扰，还能实时监测空气质量
- WordPress音乐主题Always1.8使用教程
- 搜索
-
- 友情链接
-