分享一个轮播图匀速播放点击

<div class="xinwen">
<div class="xinwen-left">
<div class="neirong9">
<div class="wai" id="lunbo">
<a class="img1" href="#"></a>
<a class="img2" href="#"></a>
<a class="img3" href="#"></a>
<a class="img1" href="#"></a>
</div>
<ul class="biaoji">
<li class="biaoji-neirong"><a id="biao1" onclick="lunbo1(2) "></a></li>
<li class="biaoji-neirong"><a id="biao2" onclick="lunbo1(4)"></a></li>
<li class="biaoji-neirong"><a id="biao3" onclick="lunbo1(6)"></a></li>
</ul>
</div>
</div>

  

.xinwen {
width: 1180px;
height: 215px;
position: absolute;
top: 722px;
margin-left: 50%;
left: -590px; }

.xinwen .xinwen-left {
        float: left;
        position: relative;
        width: 580px;
        height: 100%; }
        .xinwen .xinwen-left .neirong9 {
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: relative; }
          .xinwen .xinwen-left .neirong9 .biaoji {
            position: absolute;
            bottom: 15px;
            left: 30px;
            height: 29px;
            z-index: 600; }
            .xinwen .xinwen-left .neirong9 .biaoji .biaoji-neirong {
              width: auto;
              height: 29px;
              float: left;
              margin-right: 10px; }
              .xinwen .xinwen-left .neirong9 .biaoji .biaoji-neirong a {
                display: block;
                width: 29px;
                height: 29px;
                background: url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon3_5f803b4.png) center center no-repeat; }
              .xinwen .xinwen-left .neirong9 .biaoji .biaoji-neirong #biao1 {
                background: url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon4_d756c84.png) center center no-repeat; }
          .xinwen .xinwen-left .neirong9 .wai {
            position: absolute;
            width: 400%;
            left: 0%; }
           .xinwen .xinwen-left .neirong9 a {
            display: block;
            float: left;
            width: 580px;
            height: 215px; }
           .xinwen .xinwen-left .neirong9 .img1 {
            background: url(https://fz.fp.ps.netease.com/file/57ba9ff5143cfaa160833d00TuXDxiE8) center center no-repeat; }
           .xinwen .xinwen-left .neirong9 .img2 {
            background: url(https://fz.fp.ps.netease.com/file/57ba9faa143cfaa7a5b4b5cflOwcBHOo) center center no-repeat; }
          .xinwen .xinwen-left .neirong9 .img3 {
            background: url(https://fz.fp.ps.netease.com/file/57ba9fcf96dee46c55ca57b9exSpdGvv) center center no-repeat; }

  

var num=1;
biao1 = document.getElementById("biao1");
biao2 = document.getElementById("biao2");
biao3 = document.getElementById("biao3");
lunbo = document.getElementById("lunbo");
setInterval(function(){
switch (num){
case 1:
lunbo.style.transition="none";
lunbo.style.left="0%";
//biao1.style.backgroundImage="url(img/icon4_d756c84.png)";
//console.log(2);
num=2;
break;
case 2:
lunbo.style.transition="none";
lunbo.style.left="0%";
//console.log(3);
num=3;
break;
case 3:
biao1.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon3_5f803b4.png)";
biao2.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon4_d756c84.png)";
lunbo.style.transition="all ease-in-out .5s";
lunbo.style.left="-100%";
//console.log(4);
num=4;
break;
case 4:
lunbo.style.transition="none";
lunbo.style.left="-100%";
//console.log(5);
num=5;
break;
case 5:
biao2.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon3_5f803b4.png)";
biao3.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon4_d756c84.png)";
lunbo.style.transition="all ease-in-out .5s";
lunbo.style.left="-200%";
//console.log(6);
num=6;
break;
case 6:
lunbo.style.transition="none";
lunbo.style.left="-200%";
//console.log(7);
num=7;
break;
case 7:
biao3.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon3_5f803b4.png)";
biao1.style.backgroundImage="url(http://res.gfxm.netease.com/pc/gw/15v2/img/icon4_d756c84.png)";
lunbo.style.transition="all ease-in-out .5s";
lunbo.style.left="-300%";
//console.log(2);
num=2;

break;
default:
break;
}
},1000);

时间: 2024-10-29 19:12:13

分享一个轮播图匀速播放点击的相关文章

用jq代码写出一个轮播图。

由于项目的需要,需要写出一个图片预览的功能,在预览的同时如果预览的图片大于1,还要能够轮播,.所以,这就是一个从后台取图片的路径,然后轮播的一个功能.  当图片数为1时,不显示左右箭头以及轮播圆点. 下面是一个gif的demo: 首先,我们理清了实现的方式.我们先做出一个轮播图的效果. DEMO地址:https://codepen.io/Dios/pen/dzLMVJ 然后我们再通过一些js判断达到图中的效果.

通过一个轮播图插件来了解构造函数

例子:https://github.com/wayaha/rotateChart 在ES5中,构造函数的使用可以说是很能体现面向对象的编程思想,有学过c的同学,可以很明显体会到面向过程和面向对象的区别,不多瞎扯,这次通过一个轮播图的插件来理解一下构造函数: 1.关于对象的创建方式 常见的创建对象方式有:字面量和通过new + 构造函数的方式: 字面量的方式相对灵活.简单:缺点也很明显,用一个需要造一个,不便于复用和属性的继承如下: var person = { name: 'Picker', a

ScrollView(2)轮播图-点击跳转

轮播图的实现就是使用的ScrollView.它具有滑动切换功能.我们在淘宝上.新闻页看到的图片可以选择滚动的都是用ScrollView实现的.在轮播图中用到的属性有:UIPageControl .UIView.UIScrollView .UITableViewDelegate.并设置为全局变量. UIPageControl *_pageControl; UIView *_headerView; UIScrollView *_headScrollView; 用Main.storyboard直接设置

jQ实现的一个轮播图

众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 </body> 10 <

vue element 框架 自定义轮播图,点击上下翻图,并让图片居中

1.素材展示窗口,左侧预览滚动区域按分辨率做一屏最大预览数量做均分(超过最大预览数量是滚动条滑动) 2.左侧预览滚动区域增加浅灰色底色要求与滚动条颜色区分 3.预览滚动区域单个区域高度固定,素材图按比例缩放 4.素材图展示大图上下顶部及底部区域增加上下翻页箭头,点击有按压效果 5.预览的素材大图为左侧预览区域居中的素材,上下翻页,滚动区域居中素材跟随翻滚  以上是需求,下面贴代码 轮播图效果 template 1 <el-dialog class="material-dialog"

swiper轮播,小轮播图,点击变大轮播图(小图变大图)

主要用的是swiper,pc,app都适用,根据实际需要,添加或者删除一些东西 其中必须:swiper.css,swiper.js,jquery.js,几张图片 接下来贴入代码结构html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>放大轮播</title> <meta name="

AXURE 8弄一个轮播图的步骤

这个图是网上找到,7.0可以使用. 如果是8.0.没有找到"动态面板"这个地方,如下图所示

jquery特效(3)—轮播图①(手动点击轮播)

今天上班做设计做的头疼,就写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等~~~~~~虽然今天我生日,但是代码还是得写的,不能找借口放松自己,原地踏步也算后退~~~~ 下面来看看最终做的手动点击轮播效果: 哈哈哈,有没有看出来我的四张图片都是美男子哦~~~~找个赏心悦目的图片真不容易,这样才能激起我写轮播图的代码欲望,写出来就可以点击按钮翻他们牌子了~~~~ 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包

关于图片轮播图的一个简单实例 以及实例中发现问题

1.最近在学习JS的过程中,为了巩固水平做了一个简单的轮播图,以及在做的过程中发现一些问题(未解决!希望可以有大佬可以解释这个问题)2.代码如下:<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.wai{width: 100