站长资源网络编程
js实现炫酷的左右轮播图
简介本文实例为大家分享了js左右轮播图的具体代码，供大家参考，具体内容如下html代码Document</ti</div>
<div class="news_infos"><div id="MyContent"><p>本文实例为大家分享了js左右轮播图的具体代码，供大家参考，具体内容如下</p>
<p>html代码</p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta keyword="左右轮播图-效果比较好">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="/UploadFiles/2021-04-02/animate.js">
<p>主要css代码：</p>
<div class="htmlcode">
<pre class="brush:css;">
.w-slider{
width: 310px;
height: 265px;
background-color: pink;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider{
width: 310px;
height: 220px;
}
.slider-main{
width: 620px; /* 两个图片的宽度 */
height: 310px;
}
.slider-main img{
vertical-align: top; /* 消除图片上下3px的间隙 */
}
.slider-main-img{
position: absolute;
top: 0;
left: 0;
}
.slider-ctrl{
text-align:center;
padding-top: 8px;
}
.slider-ctrl-con{
display: inline-block;
width: 24px;
height: 20px;
background-color: blue;
margin: 0 5px;
background: url(../images/icon.png) no-repeat -24px -782px;
cursor: pointer;
text-indent: -20em; /* 为了将span的标号隐藏掉 */
overflow: hidden;
}
.slider-ctrl .current{
background-position: -24px -762px;
}
.slider-ctrl-prev,.slider-ctrl-next{
position: absolute;
top: 50%;
margin-top: -35px;
display: inline-block;
width: 30px;
height: 35px;
background: url(../images/icon.png) no-repeat 6px top;
opacity: 0.8;
cursor: pointer;
}
.slider-ctrl-prev{
left: 0;
}
.slider-ctrl-next{
right: 0;
background-position: -6px -44px;
}
</pre>
</div>
<p>主要js代码（<strong>slider.js</strong>）：</p>
<div class="htmlcode">
<pre class="brush:js;">
window.onload = function(){
function $(id){ return document.getElementById(id);}
var js_slider = $("js_slider");
var slider_main = $("slider_main"); //获取轮播图片的父盒子
var imgs = slider_main.children; //得到图片组
var slider_ctrl = $("slider_ctrl"); //获取控制的 父盒子
//生成控制轮播的span
for(var i = 0; i< imgs.length; i++){
var span = document.createElement("span");
span.className = "slider-ctrl-con";
span.innerHTML = imgs.length - i;
slider_ctrl.insertBefore(span,slider_ctrl.children[1]);
}
var spans = slider_ctrl.children;
spans[1].setAttribute("class","slider-ctrl-con current"); //设置第一个span增加current样式
//布局图片，第一张在正确位置，其余的在右边
var scrollWidth = js_slider.clientWidth; //获取大盒子的宽度，也就是后面动画走的距离
for(var i=1; i<imgs.length; i++){ //第一张图片在正确位置
imgs[i].style.left = scrollWidth + "px"; //其余图片在310px的位置
}
//遍历三个按钮--左、右和下面的span
var iNow = 0; //设置当前显示的图片的索引号
for(var k in spans){ //k是索引号
spans[k].onclick = function(){
if(this.className == "slider-ctrl-prev"){
//当前图片右移（从0 -> 310px）
animate(imgs[iNow],{left: scrollWidth});
iNow = --iNow < 0 "px";//快速执行，即将显示的一页立马走到左边，然后显示
animate(imgs[iNow],{left:0}); //下一张图片右移，从-310px->0
setSquare();
}else if(this.className == "slider-ctrl-next"){
//当前图片左移（从0 -> -310px）
animate(imgs[iNow],{left: -scrollWidth});
iNow = (++iNow) % imgs.length;
imgs[iNow].style.left = scrollWidth + "px";//快速执行，即将显示的一页立马走到右边，然后左移显示
animate(imgs[iNow],{left:0}); //下一张图片左移，从310px->0
setSquare();
//或者精简为函数
/*autoPlay();*/
}else{
/*alert("点击了下面的span");*/
var clickIndex = this.innerHTML - 1;
if(clickIndex > iNow){
//做法等同于右侧按钮
animate(imgs[iNow],{left: -scrollWidth});
imgs[clickIndex].style.left = scrollWidth + "px";//快速执行，即将显示的一页立马走到右边，然后左移显示
}else if(clickIndex < iNow){
//做法等同于左侧
animate(imgs[iNow],{left: scrollWidth});
imgs[clickIndex].style.left = -scrollWidth + "px";//快速执行，即将显示的一页立马走到左边，然后显示
}
iNow = clickIndex;
animate(imgs[iNow],{left:0});
setSquare();
}
}
}
//控制span小方块的样式 函数
function setSquare(){
//下面的span样式清空，将iNow设置为current，注意是下面的span，不包含左右控制按钮
for(var i=1; i<spans.length-1; i++){
spans[i].className = "slider-ctrl-con";
}
spans[iNow+1].className = "slider-ctrl-con current"; //注意iNow是索引号，要加1
}
//设置定时器 ，和右侧按钮功能一致
var timer =null;
timer = setInterval(autoPlay,2000);
function autoPlay(){
animate(imgs[iNow],{left: -scrollWidth});
iNow = (++iNow) % imgs.length;
imgs[iNow].style.left = scrollWidth + "px";//快速执行，即将显示的一页立马走到右边，然后左移显示
animate(imgs[iNow],{left:0}); //下一张图片左移，从310px->0
setSquare();
}
//清除定时器
js_slider.onmouseover = function(){
clearInterval(timer);
}
//开启定时器
js_slider.onmouseout = function(){
clearInterval(timer); //要执行定时器，先清除定时器
timer = setInterval(autoPlay,2000);
}
}
</pre>
</div>
<p>缓动动画js代码：（<strong>animate.js</strong>）</p>
<div class="htmlcode">
<pre class="brush:js;">
//返回当前样式
function getStyle(obj,attr){ //obj对象，attr属性名
if(obj.currentStyle){ //ie等
return obj.currentStyle[attr];
}else{ //w3c
return window.getComputedStyle(obj,null)[attr];
}
}
function animate(obj,json,fn) { // 给谁 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面
for(var attr in json){ // attr 属性 json[attr] 值
//开始遍历 json
// 计算步长 用 target 位置 减去当前的位置 除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; //用户没有定义opacity，则返回undefined
console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr)); // 数值，去除样式的 “px”
}
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 "opacity") // 判断用户有没有输入 opacity
{
if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity
{
// obj.style.opacity，//支持opacity-----opacity:0.3
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调
{
fn(); // 函数名 + （） 调用函数 执行函数 暂且这样替代
}
}
},30)
}
</pre>
</div>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。</p></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="http://m.paidiu.com/show/1/101985.html" title="原生Javascript插件开发实践">原生Javascript插件开发实践</a></p>
<p>下一篇：<a href="http://m.paidiu.com/show/1/101987.html" title="jQuery实现别踩白块儿网页版小游戏">jQuery实现别踩白块儿网页版小游戏</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619123.html" one-link-mark="yes" title="群星《奔赴！万人现场 第2期》[FLAC/分轨][518.87MB]"><span>群星《奔赴！万人现场 第2期》[FLAC/分轨][518.8</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619122.html" one-link-mark="yes" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[320K/MP3][43.91MB]"><span>群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[32</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619121.html" one-link-mark="yes" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FLAC/分轨][140.49MB]"><span>群星《奇妙浪一夏 (上海迪士尼度假区音乐)》[FL</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619120.html" one-link-mark="yes" title="【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]"><span>【古典音乐】詹姆斯·高威《季节》1993[WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619119.html" one-link-mark="yes" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]"><span>贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619118.html" one-link-mark="yes" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]"><span>小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619117.html" one-link-mark="yes" title="群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]"><span>群星《欢迎来到我身边 电影原声专辑》[320K/MP3</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619116.html" one-link-mark="yes" title="群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]"><span>群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619115.html" one-link-mark="yes" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]"><span>雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓</span></a>
</li>
<li>
<i class="iconfont icon-point"></i>
<a class="text-sm" href="/show/1/619114.html" one-link-mark="yes" title="群星《2024好听新歌42》AI调整音效【WAV分轨】"><span>群星《2024好听新歌42》AI调整音效【WAV分轨】</span></a>
</li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div>
</div>
</article>
<footer>
<p style="font-size: 14px;">友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a></p>
<p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.com</a></p>
</footer>
<script src="/images/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>