您的位置:

js轮播开源代码(轮播图后端代码实现)

js轮播开源代码(轮播图后端代码实现)

更新:

本文目录一览:

求js轮播图代码,有详细注释

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

title/title

style type="text/css"

* {

padding: 0;

margin: 0;

list-style: none;

border: 0;

}

.all {

width: 500px;

height: 200px;

padding: 7px;

border: 1px solid #ccc;

margin: 100px auto;

position: relative;

}

.screen {

width: 500px;

height: 200px;

overflow: hidden;

position: relative;

}

.screen li {

width: 500px;

height: 200px;

overflow: hidden;

float: left;

}

.screen ul {

position: absolute;

left: 0;

top: 0px;

width: 3000px;

}

.all ol {

position: absolute;

right: 10px;

bottom: 10px;

line-height: 20px;

text-align: center;

}

.all ol li {

float: left;

width: 20px;

height: 20px;

background: #fff;

border: 1px solid #ccc;

margin-left: 10px;

cursor: pointer;

}

.all ol li.current {

background: #DB192A;

}

#arr {

display: none;

}

#arr span {

width: 40px;

height: 40px;

position: absolute;

left: 5px;

top: 50%;

margin-top: -20px;

background: #000;

cursor: pointer;

line-height: 40px;

text-align: center;

font-weight: bold;

font-family: '黑体';

font-size: 30px;

color: #fff;

opacity: 0.3;

border: 1px solid #fff;

}

#arr #right {

right: 5px;

left: auto;

}

/style

/head

body

div class="all" id='box'

!--相框--

div class="screen"

ul

li

img src="images/41.jpg" width="500" height="200" /

/li

li

img src="images/42.jpg" width="500" height="200" /

/li

li

img src="images/43.jpg" width="500" height="200" /

/li

li

img src="images/44.jpg" width="500" height="200" /

/li

li

img src="images/45.jpg" width="500" height="200" /

/li

/ul

ol

/ol

/div

div id="arr"

span id="left"lt;/span

span id="right"gt;/span

/div

/div

!-- script src="common.js"/script --

script

function my$(id) {

return document.getElementById(id);

}

function setInnerText(element, content) {

if (typeof element.textContent === "undefined") {

//IE浏览器

element.innerText = content;

} else {

element.textContent = content;

}

}

function animate(element, target) {

//先干掉定时器

clearInterval(element.timeId);

element.timeId = setInterval(function () {

//时时的获取元素的当前的位置

var current = element.offsetLeft;

//每次移动的步数

var step = 10;

//设置每次移动的步数是正数还是负数

step = current  target ? step : -step;

//移动后的当前的位置

current += step;

if (Math.abs(target - current)  Math.abs(step)) {

element.style.left = current + "px";

} else {

clearInterval(element.timeId);

element.style.left = target + "px";

}

}, 20);

}

//获取最外面的div

var box = my$("box");

//获取相框

var screen = box.children[0];

//获取相框的宽度

var imgWidth = screen.offsetWidth;

//获取ul

var ulObj = screen.children[0];

//获取ul中的li

var ulLiObj = ulObj.children;

//获取ol

var olObj = screen.children[1];

//获取的是左右焦点的div

var arr = my$("arr");

//获取左边的按钮

var left = my$("left");

//获取右边的按钮

var right = my$("right");

var pic = 0;

//页面加载后先创建小按钮,根据ul中的li个个数来创建li,把li加入到ol中

for (var i = 0; i  ulLiObj.length; i++) {

//创建li

var liObj = document.createElement("li");

//把li加入到ol中

olObj.appendChild(liObj);

setInnerText(liObj, (i + 1)); //兼容代码

//为每个ol中的li添加一个自定义属性存储索引值

liObj.setAttribute("index", i);

//为每个li注册鼠标进入事件

liObj.onmouseover = function () {

//先把ol中所有的li的背景颜色全部干掉

for (var j = 0; j  olObj.children.length; j++) {

olObj.children[j].removeAttribute("class");

}

//设置当前鼠标进入的li有背景颜色

this.className = "current";

//移动ul

//获取鼠标进入的ol中的li的索引值

pic = this.getAttribute("index");

animate(ulObj, -pic * imgWidth);

};

}

//第一个标签设置颜色

olObj.children[0].className = "current";

//追加一个图片到ul中

ulObj.appendChild(ulObj.children[0].cloneNode(true));

//页面加载之后自动移动

var timeId = setInterval(f1, 1000);

//鼠标进入

box.onmouseover = function () {

arr.style.display = "block";

clearInterval(timeId);

}

//鼠标离开

box.onmouseout = function () {

arr.style.display = "none";

timeId = setInterval(f1, 1000);

}

//右边焦点

right.onclick = f1;

function f1() {

//判断是否到达最后一张

if (pic == ulLiObj.length - 1) {

//跳转到第一张

pic = 0;

ulObj.style.left = -pic * imgWidth + "px";

}

pic++;

//调用动画函数

animate(ulObj, -pic * imgWidth);

//刷一遍

for (var i = 0; i  olObj.children.length; i++) {

olObj.children[i].removeAttribute("class");

}

//第一个按钮的颜色

if (pic == ulLiObj.length - 1) {

olObj.children[0].className = "current";

} else {

olObj.children[pic].className = "current";

}

};

//左边焦点

left.onclick = function () {

//判断是否到达第一张图片

if (pic == 0) {

//跳转到第六张图片

pic = ulLiObj.length - 1;

ulObj.style.left = -pic * imgWidth + "px";

}

pic--;

//调用动画函数

animate(ulObj, -pic * imgWidth);

//刷一遍

for (var i = 0; i  olObj.children.length; i++) {

olObj.children[i].removeAttribute("class");

}

olObj.children[pic].className = "current";

}

/script

/body

/html

JS轮播弹窗代码

//时间控制的广告代码

var cookie = {

ad0:30,//时间控制第一个广告30分钟轮播

ad1:60,//时间控制第二个广告60分钟轮播

ad_num : 2,

get_cookie : function(Name){var search = Name + "="; var returnvalue = "";if (document.cookie.length 0) {offset = document.cookie.indexOf(search);if (offset != -1) {offset += search.length;end = document.cookie.indexOf(";", offset);if (end == -1)end = document.cookie.length;returnvalue=unescape(document.cookie.substring(offset, end));}}return returnvalue;},

init : function(){

for(var i=0; icookie.ad_num; i++){

if(cookie.get_cookie('ppad_cookie_'+i)){

continue;

}else{

var Then = new Date();current_time = eval('cookie.ad'+i);Then.setTime(Then.getTime() + current_time*60*1000);document.cookie='ppad_cookie_'+i+'=1;expires='+ Then.toGMTString()+';path=/;';

switch(i){

case 0:

广告代码一 break;

case 1:

广告代码二 break;

}

break;

}

}

}

}

cookie.init();

//直接就放JS文件里面

js实现轮播代码怎么写?

!DOCTYPE html

html

head

meta charset="UTF-"

title最简单的轮播广告/title

style

body, div, ul, li {

margin: ;

padding: ;

}

ul {

list-style-type: none;

}

body {

background: #;

text-align: center;

font: px/px Arial;

}

#box {

position: relative;

width: px;

height: px;

background: #fff;

border-radius: px;

border: px solid #fff;

margin: px auto;

}

#box .list {

position: relative;

width: px;

height: px;

overflow: hidden;

border: px solid #ccc;

}

#box .list li {

position: absolute;

top: ;

left: ;

width: px;

height: px;

opacity: ;

transition: opacity .s linear

}

#box .list li.current {

opacity: ;

}

#box .count {

position: absolute;

right: ;

bottom: px;

}

#box .count li {

color: #fff;

float: left;

width: px;

height: px;

cursor: pointer;

margin-right: px;

overflow: hidden;

background: #F;

opacity: .;

border-radius: px;

}

#box .count li.current {

color: #fff;

opacity: .;

font-weight: ;

background: #f

}

/style

/head

body

div id="box"

ul

li style="opacity: ;"img src="img/images/.jpg" width="" height=""/li

li style="opacity: ;"img src="img/images/.jpg" width="" height=""/li

li style="opacity: ;"img src="img/images/.jpg" width="" height=""/li

li style="opacity: ;"img src="img/images/.jpg" width="" height=""/li

li style="opacity: ;"img src="img/images/.jpg" width="" height=""/li

/ul

ul

li/li

li class=""/li

li class=""/li

li class=""/li

li class=""/li

/ul

/div

script

var box=document.getElementById('box');

var uls=document.getElementsByTagName('ul');

var imgs=uls[].getElementsByTagName('li');

var btn=uls[].getElementsByTagName('li');

var i=index=; //中间量,统一声明;

var play=null;

console.log(box,uls,imgs,btn);//获取正确

//图片切换, 淡入淡出效果我是用(transition: opacity .s linear)做的,不纠结、简单 在css里面

function show(a){    //方法定义的是当传入一个下标时,按钮和图片做出对的反应

for(i=;ibtn.length;i++ ){

btn[i].className='';  //很容易看懂吧?每个按钮都先设置成看不见,然后把当前按钮设置成可见。

btn[a].className='current';

}

for(i=;iimgs.length;i++){ //把图片的效果设置和按钮相同

imgs[i].style.opacity=;

imgs[a].style.opacity=;

}

}

//切换按钮功能,响应对应图片

for(i=;ibtn.length;i++){

btn[i].index=i; //不知道你有没有发现,循环里的方法去调用循环里的变量体i,会出现调到的不是i的变动值的问题。所以我先在循环外保存住

btn[i].onmouseover=function(){

show(this.index);

clearInterval(play); //这就是最后那句话追加的功能

}

}

//自动轮播方法

function autoPlay(){

play=setInterval(function(){ //这个paly是为了保存定时器的,变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了

index++;

index=imgs.length(index=);//可能有优先级问题,所以用了括号,没时间测试了。

show(index);

},)

}

autoPlay();//马上调用,我试过用window.onload调用这个方法,但是调用之后影响到了其他方法,使用autoPlay所以只能这样调用了

//div的鼠标移入移出事件

box.onmouseover=function(){

clearInterval(play);

};

box.onmouseout=function(){

autoPlay();

};

//按钮下标也要加上相同的鼠标事件,不然图片停止了,定时器没停,会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。

/script

/body

/html

图片自动播放轮播JQ,js代码。

//轮播器

var crs_num=1

function interval(){

carousel=setInterval(function(){

num2=crs_num*-800

$('.crs_img').animate({

attr:'x',

target:num2,

time:50,

speed:10,

})

$('.crs_words p').html($('.crs_img img').getnum(crs_num).attr('alt'))

$('#carousel li').css('color','#999')

$('#carousel li').getnum(crs_num).css('color','#333')

crs_num++;

if(crs_num==3)crs_num=0;

},3000)

}

interval();

$('#carousel li').hover(function(){

var num=$(this).childNum()*-800

clearInterval(carousel)

$('.crs_img').animate({

attr:'x',

target:num,

time:50,

speed:5,

})

$('.crs_words p').html($('.crs_img img').getnum($(this).childNum()).attr('alt'))

$('#carousel li').css('color','#999')

$(this).css('color','#333')

},function(){

interval()

})

animate是自己封装的,可能和jq不兼容

求淡入淡出的js轮播效果的代码

如下代码可以实现,不过你首先需要引用Jquery,我使用的是jquery-1.7.1.min.js

支持两个div或多个div的淡入淡出切换:

div id="imgbox"

    div style="width:100px;height:100px;background-color:red;"/div

    div style="width:100px;height:100px;background-color:blue;"/div

/div

script src="jquery-1.7.1.min.js"/script

script

$(document).ready(function(){

    $("#imgbox div").fadeOut(0).eq(0).fadeIn(0);

    var i = 0;

    setInterval(function(){

        if($("#imgbox div").length  (i+1)){

            $("#imgbox div").eq(i).fadeOut(0).next("div").fadeIn(1000);

            i++;

        }

        else{

            $("#imgbox div").eq(i).fadeOut(0).siblings("div").eq(0).fadeIn(1000);

            i = 0;

        }

    },2000);

});

/script

求首页js轮播图代码

!DOCTYPE html

html

head

  meta charset="UTF-8"

  titlequery焦点轮播图/title

  style type="text/css"

      *{ margin: 0; padding: 0; text-decoration: none;}

      body { padding: 20px;}

      #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}

      #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}

      #list img { float: left;}

      #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}

      #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}

      #buttons .on {  background: orangered;}

      .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}

      .arrow:hover { background-color: RGBA(0,0,0,.7);}

      #container:hover .arrow { display: block;}

      #prev { left: 20px;}

      #next { right: 20px;}

  /style

  script type="text/javascript" src="js/jquery.1.10.2.js"/script

  script type="text/javascript"

      $(function () {

          var container = $('#container');

          var list = $('#list');

          var buttons = $('#buttons span');

          var prev = $('#prev');

          var next = $('#next');

          var index = 1;

          var len = 5;

          var interval = 3000;

          var timer;

          function animate (offset) {

              var left = parseInt(list.css('left')) + offset;

              if (offset0) {

                  offset = '+=' + offset;

              }

              else {

                  offset = '-=' + Math.abs(offset);

              }

              list.animate({'left': offset}, 300, function () {

                  if(left -200){

                      list.css('left', -600 * len);

                  }

                  if(left (-600 * len)) {

                      list.css('left', -600);

                  }

              });

          }

          function showButton() {

              buttons.eq(index-1).addClass('on').siblings().removeClass('on');

          }

          function play() {

              timer = setTimeout(function () {

                  next.trigger('click');

                  play();

              }, interval);

          }

          function stop() {

              clearTimeout(timer);

          }

          next.bind('click', function () {

              if (list.is(':animated')) {

                  return;

              }

              if (index == 5) {

                  index = 1;

              }

              else {

                  index += 1;

              }

              animate(-600);

              showButton();

          });

          prev.bind('click', function () {

              if (list.is(':animated')) {

                  return;

              }

              if (index == 1) {

                  index = 5;

              }

              else {

                  index -= 1;

              }

              animate(600);

              showButton();

          });

          buttons.each(function () {

               $(this).bind('click', function () {

                   if (list.is(':animated') || $(this).attr('class')=='on') {

                       return;

                   }

                   var myIndex = parseInt($(this).attr('index'));

                   var offset = -600 * (myIndex - index);

                   animate(offset);

                   index = myIndex;

                   showButton();

               })

          });

          container.hover(stop, play); //鼠标移入停止轮播

          play();

      });

  /script

/head

body

div id="container"

  div id="list" style="left: -600px;"

      img src="img/5.jpg" alt="1"/

      img src="img/1.jpg" alt="1"/

      img src="img/2.jpg" alt="2"/

      img src="img/3.jpg" alt="3"/

      img src="img/4.jpg" alt="4"/

      img src="img/5.jpg" alt="5"/

      img src="img/1.jpg" alt="5"/

  /div

  div id="buttons"

      span index="1" class="on"/span

      span index="2"/span

      span index="3"/span

      span index="4"/span

      span index="5"/span

  /div

  a href="javascript:;" id="prev" class="arrow"lt;/a

  a href="javascript:;" id="next" class="arrow"gt;/a

/div

/body

/html

可以直接复制用,记得引入JQ库!

js轮播开源代码(轮播图后端代码实现)

本文目录一览: 1、求js轮播图代码,有详细注释 2、JS轮播弹窗代码 3、js实现轮播代码怎么写? 4、图片自动播放轮播JQ,js代码。 5、求淡入淡出的js轮播效果的代码 6、求首页js轮播图代码

2023-12-08
js轮播图标代码,js自动轮播图代码

本文目录一览: 1、js实现轮播代码怎么写? 2、JS制作轮播图 3、简单的HTML+js图片轮播? 4、JS轮播弹窗代码 5、求首页js轮播图代码 6、图片自动播放轮播JQ,js代码。 js实现轮播

2023-12-08
轮播代码,大图轮播代码

2023-01-06
js轮播图代码,js轮播图代码左右切换

2022-11-26
js轮播图代码,JS轮播图代码html js 分离

2023-01-05
js写轮播图代码(js轮播图怎么写)

本文目录一览: 1、javascript 轮播 缩略图 怎么实现 2、怎么用js的原生写法写出来一个轮播图呢? 3、JS轮播图,当鼠标悬停于图片时停止轮播,移开继续,代码怎么写? 4、求一个简单的js

2023-12-08
javascript做图片轮播,js图片轮播效果实现代码

2022-11-23
简单的js图片滚动轮播代码,简单的js图片滚动轮播代码大全

2022-11-23
css+js轮播图,如何用css实现轮播图

本文目录一览: 1、css轮播图怎么实现 2、js还是css错了,轮播图点不动 3、网上下的图片轮播效果的css和js代码怎么弄到DW里? 4、纠结个问题、求大神帮忙解答、用css代替js做横向轮播图

2023-12-08
js手机轮播代码是什么(JavaScript轮播)

本文目录一览: 1、手机app滑动轮播原生js怎么写 2、图片自动播放轮播JQ,js代码。 3、js实现轮播代码怎么写? 4、JS轮播弹窗代码 手机app滑动轮播原生js怎么写 下面是提供的一个dem

2023-12-08
轮播图php(轮播图怎么实现)

2022-11-14
原生js层叠图片轮播展示代码,js图片轮播效果实现代码

2022-11-25
网页轮播图用js做,js轮播图怎么实现

本文目录一览: 1、js如何制作图片轮播 2、JS制作轮播图 3、js图片轮播点击 4、js里面可以写轮播图吗? 5、网页设计中如何让图片轮播 js如何制作图片轮播 工具/材料 Sublime Tex

2023-12-08
js轮播图cs5版本,js轮播图实现

本文目录一览: 1、js图片轮播点击 2、使用dreamweaver cs5如何制作像幻灯片一样播放的图片?cs5中的时间轴已经取消,请高手指点! 3、如何用原生js和css制作轮播图 4、怎么用js

2023-12-08
原生js实现轮播图实例教程,原生js轮播图实现原理

本文目录一览: 1、用原生JS实现小米内容部分的类似轮播图的部分 2、js如何制作图片轮播 3、js图片轮播点击 4、JS制作轮播图 用原生JS实现小米内容部分的类似轮播图的部分 思路一 绝对定位+透

2023-12-08
js写轮播图网页(js轮播图的实现)

本文目录一览: 1、怎么用js的原生写法写出来一个轮播图呢? 2、简单的HTML+js图片轮播? 3、js里面可以写轮播图吗? 怎么用js的原生写法写出来一个轮播图呢? 1:排出一个版,包含上下切换的

2023-12-08
HTML轮播图片代码阐述

2023-05-20
java简单轮播图,简单的轮播图

2022-11-20
js幻灯片轮番代码案例,js幻灯片轮播原理

本文目录一览: 1、网页轮显幻灯片是怎么做的 2、在javascript中图片的轮番播放怎么做 3、求js轮番图片代码 网页轮显幻灯片是怎么做的 用JS(JavaScript)+CSS或Applet做

2023-12-08
jsp网页图片轮播代码下载(html网页图片轮播)

本文目录一览: 1、下的轮播文件是html的,怎样把他放入jsp页面? 2、jsp上传图片,最好完整代码。100分! 3、求CSS图片轮播完整代码? 下的轮播文件是html的,怎样把他放入jsp页面?

2023-12-08